docs(auth): update examples to use modular API

DoctorJohn · DoctorJohn · commit fa7de9b1b07e · 2025-02-20T18:38:56.000+01:00
diff --git a/docs/auth/multi-factor-auth.md b/docs/auth/multi-factor-auth.md
@@ -21,8 +21,8 @@ instance for the current user. This is the entry point for most multi-factor
 operations:
 
 ```js
-import auth from '@react-native-firebase/auth';
-const multiFactorUser = await auth().multiFactor(auth().currentUser);
+import auth, { getAuth } from '@react-native-firebase/auth';
+const multiFactorUser = await getAuth().multiFactor(getAuth().currentUser);
 ```
 
 Request the session identifier and use the phone number obtained from the user
@@ -36,7 +36,7 @@ const phoneOptions = {
 };
 
 // Sends a text message to the user
-const verificationId = await auth().verifyPhoneNumberForMultiFactor(phoneOptions);
+const verificationId = await getAuth().verifyPhoneNumberForMultiFactor(phoneOptions);
 ```
 
 Once the user has provided the verification code received by text message, you
@@ -58,9 +58,9 @@ default sign-in methods, for example email and password. If the account requires
 a second factor to complete login, an exception will be raised:
 
 ```js
-import auth from '@react-native-firebase/auth';
+import auth, { getAuth } from '@react-native-firebase/auth';
 
-auth()
+getAuth()
   .signInWithEmailAndPassword(email, password)
   .then(() => {
     // User has not enrolled a second factor
@@ -81,7 +81,7 @@ Using the error object you can obtain a
 continue the flow:
 
 ```js
-const resolver = auth().getMultiFactorResolver(error);
+const resolver = getAuth().getMultiFactorResolver(error);
 ```
 
 The resolver object has all the required information to prompt the user for a
@@ -105,7 +105,7 @@ verification code to the user:
 const hint = resolver.hints[0];
 const sessionId = resolver.session;
 
-auth()
+getAuth()
   .verifyPhoneNumberWithMultiFactorInfo(hint, sessionId) // triggers the message to the user
   .then(verificationId => setVerificationId(verificationId));
 ```
@@ -130,9 +130,9 @@ will trigger with the new authentication state of the user.
 To put the example together:
 
 ```js
-import auth from '@react-native-firebase/auth';
+import auth, { getAuth } from '@react-native-firebase/auth';
 
-const authInstance = auth();
+const authInstance = getAuth();
 
 authInstance
   .signInWithEmailAndPassword(email, password)
@@ -143,7 +143,7 @@ authInstance
     const { code } = error;
     // Make sure to check if multi factor authentication is required
     if (code === 'auth/multi-factor-auth-required') {
-      const resolver = auth.getMultiFactorResolver(error);
+      const resolver = authInstance.getMultiFactorResolver(error);
 
       if (resolver.hints.length > 1) {
         // Use resolver.hints to display a list of second factors to the user
diff --git a/docs/auth/oidc-auth.md b/docs/auth/oidc-auth.md
@@ -44,7 +44,7 @@ Before you use `react-native-app-auth` you have to complete the setup in their [
 The example below demonstrates how you could setup such a flow within your own application:
 
 ```jsx
-import auth from '@react-native-firebase/auth';
+import auth, { getAuth } from '@react-native-firebase/auth';
 import { authorize } from 'react-native-app-auth';
 
 // using react-native-app-auth to get oauth token from Azure AD
@@ -64,5 +64,5 @@ const credential = auth.OIDCAuthProvider.credential(
   authState.idToken,
 );
 
-await auth().signInWithCredential(credential);
+await getAuth().signInWithCredential(credential);
 ```
diff --git a/docs/auth/phone-auth.md b/docs/auth/phone-auth.md
@@ -58,7 +58,7 @@ The example below demonstrates how you could setup such a flow within your own a
 ```jsx
 import React, { useState, useEffect } from 'react';
 import { Button, TextInput } from 'react-native';
-import auth from '@react-native-firebase/auth';
+import { getAuth } from '@react-native-firebase/auth';
 
 function PhoneSignIn() {
   // If null, no SMS has been sent
@@ -78,13 +78,13 @@ function PhoneSignIn() {
   }
 
   useEffect(() => {
-    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
+    const subscriber = getAuth().onAuthStateChanged(onAuthStateChanged);
     return subscriber; // unsubscribe on unmount
   }, []);
 
   // Handle the button press
   async function signInWithPhoneNumber(phoneNumber) {
-    const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
+    const confirmation = await getAuth().signInWithPhoneNumber(phoneNumber);
     setConfirm(confirmation);
   }
 
@@ -138,7 +138,7 @@ After successfully creating a user with an email and password (see Authenticatio
 ```jsx
 import React, { useState, useEffect } from 'react';
 import { Button, TextInput, Text } from 'react-native';
-import auth from '@react-native-firebase/auth';
+import auth, { getAuth } from '@react-native-firebase/auth';
 
 export default function PhoneVerification() {
   // Set an initializing state whilst Firebase connects
@@ -157,14 +157,17 @@ export default function PhoneVerification() {
   }
 
   useEffect(() => {
-    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
+    const subscriber = getAuth().onAuthStateChanged(onAuthStateChanged);
     return subscriber; // unsubscribe on unmount
   }, []);
 
   // Handle create account button press
   async function createAccount() {
     try {
-      await auth().createUserWithEmailAndPassword('jane.doe@example.com', 'SuperSecretPassword!');
+      await getAuth().createUserWithEmailAndPassword(
+        'jane.doe@example.com',
+        'SuperSecretPassword!',
+      );
       console.log('User account created & signed in!');
     } catch (error) {
       if (error.code === 'auth/email-already-in-use') {
@@ -180,15 +183,15 @@ export default function PhoneVerification() {
 
   // Handle the verify phone button press
   async function verifyPhoneNumber(phoneNumber) {
-    const confirmation = await auth().verifyPhoneNumber(phoneNumber);
+    const confirmation = await getAuth().verifyPhoneNumber(phoneNumber);
     setConfirm(confirmation);
   }
 
   // Handle confirm code button press
   async function confirmCode() {
     try {
       const credential = auth.PhoneAuthProvider.credential(confirm.verificationId, code);
-      let userData = await auth().currentUser.linkWithCredential(credential);
+      let userData = await getAuth().currentUser.linkWithCredential(credential);
       setUser(userData.user);
     } catch (error) {
       if (error.code == 'auth/invalid-verification-code') {
diff --git a/docs/auth/social-auth.md b/docs/auth/social-auth.md
@@ -52,7 +52,7 @@ When the user presses the pre-rendered button, we can trigger the initial sign-i
 passing in the scope required for our application:
 
 ```js
-import auth from '@react-native-firebase/auth';
+import auth, { getAuth } from '@react-native-firebase/auth';
 import { appleAuth } from '@invertase/react-native-apple-authentication';
 
 async function onAppleButtonPress() {
@@ -74,7 +74,7 @@ async function onAppleButtonPress() {
   const appleCredential = auth.AppleAuthProvider.credential(identityToken, nonce);
 
   // Sign the user in with the credential
-  return auth().signInWithCredential(appleCredential);
+  return getAuth().signInWithCredential(appleCredential);
 }
 ```
 
@@ -84,7 +84,7 @@ with the new authentication state of the user.
 Apple also requires that the app revoke the `Sign in with Apple` token when the user chooses to delete their account. This can be accomplished with the `revokeToken` API.
 
 ```js
-import auth from '@react-native-firebase/auth';
+import { getAuth } from '@react-native-firebase/auth';
 import { appleAuth } from '@invertase/react-native-apple-authentication';
 
 async function revokeSignInWithAppleToken() {
@@ -99,7 +99,7 @@ async function revokeSignInWithAppleToken() {
   }
 
   // Revoke the token
-  return auth().revokeToken(authorizationCode);
+  return getAuth().revokeToken(authorizationCode);
 }
 ```
 
@@ -134,7 +134,7 @@ function FacebookSignIn() {
 The `onFacebookButtonPress` can then be implemented as follows:
 
 ```js
-import auth from '@react-native-firebase/auth';
+import auth, { getAuth } from '@react-native-firebase/auth';
 import { LoginManager, AccessToken } from 'react-native-fbsdk-next';
 
 async function onFacebookButtonPress() {
@@ -156,7 +156,7 @@ async function onFacebookButtonPress() {
   const facebookCredential = auth.FacebookAuthProvider.credential(data.accessToken);
 
   // Sign-in the user with the credential
-  return auth().signInWithCredential(facebookCredential);
+  return getAuth().signInWithCredential(facebookCredential);
 }
 ```
 
@@ -165,7 +165,7 @@ async function onFacebookButtonPress() {
 To use Facebook Limited Login instead of "classic" Facebook Login, the `onFacebookButtonPress` can then be implemented as follows:
 
 ```js
-import auth from '@react-native-firebase/auth';
+import auth, { getAuth } from '@react-native-firebase/auth';
 import { LoginManager, AuthenticationToken } from 'react-native-fbsdk-next';
 import { sha256 } from 'react-native-sha256';
 
@@ -197,7 +197,65 @@ async function onFacebookButtonPress() {
   const facebookCredential = auth.FacebookAuthProvider.credential(data.authenticationToken, nonce);
 
   // Sign-in the user with the credential
-  return auth().signInWithCredential(facebookCredential);
+  return getAuth().signInWithCredential(facebookCredential);
+}
+```
+
+Upon successful sign-in, any [`onAuthStateChanged`](/auth/usage#listening-to-authentication-state) listeners will trigger
+with the new authentication state of the user.
+
+## Twitter
+
+Using the external [`@react-native-twitter-signin/twitter-signin`](https://github.com/react-native-twitter-signin/twitter-signin) library,
+we can sign-in the user with Twitter and generate a credential which can be used to sign-in with Firebase.
+
+To get started, install the library and ensure you have completed setup, following the required [prerequisites](https://github.com/react-native-twitter-signin/twitter-signin#prerequisites) list.
+
+Ensure the "Twitter" sign-in provider is enabled on the [Firebase Console](https://console.firebase.google.com/project/_/authentication/providers).
+
+Before triggering a sign-in request, you must initialize the Twitter SDK using your accounts consumer key & secret:
+
+```js
+import { NativeModules } from 'react-native';
+const { RNTwitterSignIn } = NativeModules;
+
+RNTwitterSignIn.init('TWITTER_CONSUMER_KEY', 'TWITTER_CONSUMER_SECRET').then(() =>
+  console.log('Twitter SDK initialized'),
+);
+```
+
+Once initialized, setup your application to trigger a sign-in request with Twitter using the `login` method.
+
+```jsx
+import React from 'react';
+import { Button } from 'react-native';
+
+function TwitterSignIn() {
+  return (
+    <Button
+      title="Twitter Sign-In"
+      onPress={() => onTwitterButtonPress().then(() => console.log('Signed in with Twitter!'))}
+    />
+  );
+}
+```
+
+The `onTwitterButtonPress` can then be implemented as follows:
+
+```js
+import auth, { getAuth } from '@react-native-firebase/auth';
+import { NativeModules } from 'react-native';
+const { RNTwitterSignIn } = NativeModules;
+
+async function onTwitterButtonPress() {
+  // Perform the login request
+  const { authToken, authTokenSecret } = await RNTwitterSignIn.logIn();
+
+  // Create a Twitter credential with the tokens
+  const twitterCredential = auth.TwitterAuthProvider.credential(authToken, authTokenSecret);
+
+  // Sign-in the user with the credential
+  return getAuth().signInWithCredential(twitterCredential);
 }
 ```
 
@@ -250,7 +308,7 @@ function GoogleSignIn() {
 The `onGoogleButtonPress` can then be implemented as follows:
 
 ```js
-import auth from '@react-native-firebase/auth';
+import auth, { getAuth } from '@react-native-firebase/auth';
 import { GoogleSignin } from '@react-native-google-signin/google-signin';
 
 async function onGoogleButtonPress() {
@@ -273,7 +331,7 @@ async function onGoogleButtonPress() {
   const googleCredential = auth.GoogleAuthProvider.credential(signInResult.data.idToken);
 
   // Sign-in the user with the credential
-  return auth().signInWithCredential(googleCredential);
+  return getAuth().signInWithCredential(googleCredential);
 }
 ```
 
@@ -310,7 +368,7 @@ function MicrosoftSignIn() {
 `onMicrosoftButtonPress` can be implemented as the following:
 
 ```js
-import auth from '@react-native-firebase/auth';
+import auth, { getAuth } from '@react-native-firebase/auth';
 
 const onMicrosoftButtonPress = async () => {
   // Generate the provider object
@@ -327,7 +385,7 @@ const onMicrosoftButtonPress = async () => {
   });
 
   // Sign-in the user with the provider
-  return auth().signInWithRedirect(provider);
+  return getAuth().signInWithRedirect(provider);
 };
 ```
 
@@ -406,7 +464,7 @@ To achieve this, you should replace sign-in method in any of the supported socia
 This code demonstrates linking a Google provider to an account that is already signed in using Firebase authentication.
 
 ```js
-import auth from '@react-native-firebase/auth';
+import auth, { getAuth } from '@react-native-firebase/auth';
 import { GoogleSignin } from '@react-native-google-signin/google-signin';
 
 async function onGoogleLinkButtonPress() {
@@ -419,7 +477,7 @@ async function onGoogleLinkButtonPress() {
   const googleCredential = auth.GoogleAuthProvider.credential(idToken);
 
   // Link the user's account with the Google credential
-  const firebaseUserCredential = await auth().currentUser.linkWithCredential(googleCredential);
+  const firebaseUserCredential = await getAuth().currentUser.linkWithCredential(googleCredential);
   //  Handle the linked account as needed in your app
   return;
 }
diff --git a/docs/auth/usage/index.md b/docs/auth/usage/index.md
@@ -50,7 +50,7 @@ render of our main application whilst the connection is established:
 ```jsx
 import React, { useState, useEffect } from 'react';
 import { View, Text } from 'react-native';
-import auth from '@react-native-firebase/auth';
+import { getAuth } from '@react-native-firebase/auth';
 
 function App() {
   // Set an initializing state whilst Firebase connects
@@ -64,7 +64,7 @@ function App() {
   }
 
   useEffect(() => {
-    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
+    const subscriber = getAuth().onAuthStateChanged(onAuthStateChanged);
     return subscriber; // unsubscribe on unmount
   }, []);
 
@@ -110,9 +110,9 @@ allowing you to integrate with other services such as Analytics by providing a u
 Ensure the "Anonymous" sign-in provider is enabled on the [Firebase Console](https://console.firebase.google.com/project/_/authentication/providers).
 
 ```js
-import auth from '@react-native-firebase/auth';
+import { getAuth } from '@react-native-firebase/auth';
 
-auth()
+getAuth()
   .signInAnonymously()
   .then(() => {
     console.log('User signed in anonymously');
@@ -144,9 +144,9 @@ The `createUserWithEmailAndPassword` performs two operations; first creating the
 then signing them in.
 
 ```js
-import auth from '@react-native-firebase/auth';
+import { getAuth } from '@react-native-firebase/auth';
 
-auth()
+getAuth()
   .createUserWithEmailAndPassword('jane.doe@example.com', 'SuperSecretPassword!')
   .then(() => {
     console.log('User account created & signed in!');
@@ -179,9 +179,9 @@ The user's token should be used for authentication with your backend systems. Th
 If you'd like to sign the user out of their current authentication state, call the `signOut` method:
 
 ```js
-import auth from '@react-native-firebase/auth';
+import { getAuth } from '@react-native-firebase/auth';
 
-auth()
+getAuth()
   .signOut()
   .then(() => console.log('User signed out!'));
 ```
