docs(auth): update examples to use modular API

Author: DoctorJohn

Diff for: docs/auth/multi-factor-auth.md

@@ -21,8 +21,10 @@ 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 authModule, { PhoneAuthProvider, getAuth, multiFactor } from '@react-native-firebase/auth';
+
+const auth = getAuth();
+const multiFactorUser = await multiFactor(auth.currentUser);
 ```
 
 Request the session identifier and use the phone number obtained from the user
@@ -36,15 +38,15 @@ const phoneOptions = {
 };
 
 // Sends a text message to the user
-const verificationId = await auth().verifyPhoneNumberForMultiFactor(phoneOptions);
+const verificationId = await auth.verifyPhoneNumberForMultiFactor(phoneOptions);
 ```
 
 Once the user has provided the verification code received by text message, you
 can complete the process:
 
 ```js
-const cred = auth.PhoneAuthProvider.credential(verificationId, verificationCode);
-const multiFactorAssertion = auth.PhoneMultiFactorGenerator.assertion(cred);
+const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
+const multiFactorAssertion = authModule.PhoneMultiFactorGenerator.assertion(cred);
 await multiFactorUser.enroll(multiFactorAssertion, 'Optional display name for the user');
 ```
 
@@ -58,10 +60,16 @@ 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 authModule, {
+  PhoneAuthProvider,
+  getAuth,
+  signInWithEmailAndPassword,
+  getMultiFactorResolver,
+} from '@react-native-firebase/auth';
+
+const auth = getAuth();
 
-auth()
-  .signInWithEmailAndPassword(email, password)
+signInWithEmailAndPassword(auth, email, password)
   .then(() => {
     // User has not enrolled a second factor
   })
@@ -81,7 +89,7 @@ Using the error object you can obtain a
 continue the flow:
 
 ```js
-const resolver = auth().getMultiFactorResolver(error);
+const resolver = getMultiFactorResolver(auth, error);
 ```
 
 The resolver object has all the required information to prompt the user for a
@@ -93,7 +101,7 @@ if (resolver.hints.length > 1) {
 }
 
 // Currently only phone based factors are supported
-if (resolver.hints[0].factorId === auth.PhoneMultiFactorGenerator.FACTOR_ID) {
+if (resolver.hints[0].factorId === authModule.PhoneMultiFactorGenerator.FACTOR_ID) {
   // Continue with the sign-in flow
 }
 ```
@@ -105,7 +113,7 @@ verification code to the user:
 const hint = resolver.hints[0];
 const sessionId = resolver.session;
 
-auth()
+auth
   .verifyPhoneNumberWithMultiFactorInfo(hint, sessionId) // triggers the message to the user
   .then(verificationId => setVerificationId(verificationId));
 ```
@@ -114,9 +122,9 @@ Once the user has entered the verification code you can create a multi-factor
 assertion and finish the flow:
 
 ```js
-const credential = auth.PhoneAuthProvider.credential(verificationId, verificationCode);
+const credential = PhoneAuthProvider.credential(verificationId, verificationCode);
 
-const multiFactorAssertion = auth.PhoneMultiFactorGenerator.assertion(credential);
+const multiFactorAssertion = authModule.PhoneMultiFactorGenerator.assertion(credential);
 
 resolver.resolveSignIn(multiFactorAssertion).then(userCredential => {
   // additionally onAuthStateChanged will be triggered as well
@@ -130,39 +138,43 @@ will trigger with the new authentication state of the user.
 To put the example together:
 
 ```js
-import auth from '@react-native-firebase/auth';
+import authModule, {
+  PhoneAuthProvider,
+  getAuth,
+  signInWithEmailAndPassword,
+  getMultiFactorResolver,
+} from '@react-native-firebase/auth';
 
-const authInstance = auth();
+const auth = getAuth();
 
-authInstance
-  .signInWithEmailAndPassword(email, password)
+signInWithEmailAndPassword(auth, email, password)
   .then(() => {
     // User has not enrolled a second factor
   })
   .catch(error => {
     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 = getMultiFactorResolver(error);
 
       if (resolver.hints.length > 1) {
         // Use resolver.hints to display a list of second factors to the user
       }
 
       // Currently only phone based factors are supported
-      if (resolver.hints[0].factorId === auth.PhoneMultiFactorGenerator.FACTOR_ID) {
+      if (resolver.hints[0].factorId === authModule.PhoneMultiFactorGenerator.FACTOR_ID) {
         const hint = resolver.hints[0];
         const sessionId = resolver.session;
 
-        authInstance
+        auth
           .verifyPhoneNumberWithMultiFactorInfo(hint, sessionId) // triggers the message to the user
           .then(verificationId => setVerificationId(verificationId));
 
         // Request verificationCode from user
 
-        const credential = auth.PhoneAuthProvider.credential(verificationId, verificationCode);
+        const credential = PhoneAuthProvider.credential(verificationId, verificationCode);
 
-        const multiFactorAssertion = auth.PhoneMultiFactorGenerator.assertion(credential);
+        const multiFactorAssertion = authModule.PhoneMultiFactorGenerator.assertion(credential);
 
         resolver.resolveSignIn(multiFactorAssertion).then(userCredential => {
           // additionally onAuthStateChanged will be triggered as well

Diff for: 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 { OIDCAuthProvider, getAuth, signInWithCredential } from '@react-native-firebase/auth';
 import { authorize } from 'react-native-app-auth';
 
 // using react-native-app-auth to get oauth token from Azure AD
@@ -59,10 +59,11 @@ const config = {
 // Log in to get an authentication token
 const authState = await authorize(config);
 
-const credential = auth.OIDCAuthProvider.credential(
+const credential = OIDCAuthProvider.credential(
   'azure_test', // this is the "Provider ID" value from the firebase console
   authState.idToken,
 );
 
-await auth().signInWithCredential(credential);
+const auth = getAuth();
+await signInWithCredential(auth, credential);
 ```

Diff for: docs/auth/phone-auth.md

@@ -58,7 +58,9 @@ 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, onAuthStateChanged, signInWithPhoneNumber } from '@react-native-firebase/auth';
+
+const auth = getAuth();
 
 function PhoneSignIn() {
   // If null, no SMS has been sent
@@ -68,7 +70,7 @@ function PhoneSignIn() {
   const [code, setCode] = useState('');
 
   // Handle login
-  function onAuthStateChanged(user) {
+  function handleAuthStateChanged(user) {
     if (user) {
       // Some Android devices can automatically process the verification code (OTP) message, and the user would NOT need to enter the code.
       // Actually, if he/she tries to enter it, he/she will get an error message because the code was already used in the background.
@@ -78,13 +80,13 @@ function PhoneSignIn() {
   }
 
   useEffect(() => {
-    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
+    const subscriber = onAuthStateChanged(auth, handleAuthStateChanged);
     return subscriber; // unsubscribe on unmount
   }, []);
 
   // Handle the button press
-  async function signInWithPhoneNumber(phoneNumber) {
-    const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
+  async function handleSignInWithPhoneNumber(phoneNumber) {
+    const confirmation = await signInWithPhoneNumber(auth, phoneNumber);
     setConfirm(confirmation);
   }
 
@@ -100,7 +102,7 @@ function PhoneSignIn() {
     return (
       <Button
         title="Phone Number Sign In"
-        onPress={() => signInWithPhoneNumber('+1 650-555-3434')}
+        onPress={() => handleSignInWithPhoneNumber('+1 650-555-3434')}
       />
     );
   }
@@ -138,7 +140,15 @@ 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 {
+  PhoneAuthProvider,
+  getAuth,
+  onAuthStateChanged,
+  createUserWithEmailAndPassword,
+  verifyPhoneNumber,
+} from '@react-native-firebase/auth';
+
+const auth = getAuth();
 
 export default function PhoneVerification() {
   // Set an initializing state whilst Firebase connects
@@ -151,20 +161,20 @@ export default function PhoneVerification() {
   const [code, setCode] = useState('');
 
   // Handle user state changes
-  function onAuthStateChanged(user) {
+  function handleAuthStateChanged(user) {
     setUser(user);
     if (initializing) setInitializing(false);
   }
 
   useEffect(() => {
-    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
+    const subscriber = onAuthStateChanged(auth, handleAuthStateChanged);
     return subscriber; // unsubscribe on unmount
   }, []);
 
   // Handle create account button press
   async function createAccount() {
     try {
-      await auth().createUserWithEmailAndPassword('[email protected]', 'SuperSecretPassword!');
+      await createUserWithEmailAndPassword(auth, '[email protected]', 'SuperSecretPassword!');
       console.log('User account created & signed in!');
     } catch (error) {
       if (error.code === 'auth/email-already-in-use') {
@@ -179,16 +189,16 @@ export default function PhoneVerification() {
   }
 
   // Handle the verify phone button press
-  async function verifyPhoneNumber(phoneNumber) {
-    const confirmation = await auth().verifyPhoneNumber(phoneNumber);
+  async function handlePhoneNumberVerification(phoneNumber) {
+    const confirmation = await verifyPhoneNumber(auth, 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);
+      const credential = PhoneAuthProvider.credential(confirm.verificationId, code);
+      let userData = await auth.currentUser.linkWithCredential(credential);
       setUser(userData.user);
     } catch (error) {
       if (error.code == 'auth/invalid-verification-code') {
@@ -208,7 +218,9 @@ export default function PhoneVerification() {
       return (
         <Button
           title="Verify Phone Number"
-          onPress={() => verifyPhoneNumber('ENTER A VALID TESTING OR REAL PHONE NUMBER HERE')}
+          onPress={() =>
+            handlePhoneNumberVerification('ENTER A VALID TESTING OR REAL PHONE NUMBER HERE')
+          }
         />
       );
     }