diff --git a/docs/auth/multi-factor-auth.md b/docs/auth/multi-factor-auth.md index 0da24f2081..1aed87ddaf 100644 --- a/docs/auth/multi-factor-auth.md +++ b/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,12 +138,16 @@ 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 }) @@ -143,26 +155,26 @@ 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 = 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 --git a/docs/auth/oidc-auth.md b/docs/auth/oidc-auth.md index c258e29b2e..391693fe5f 100644 --- 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 { 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 --git a/docs/auth/phone-auth.md b/docs/auth/phone-auth.md index fbe501ac15..2c73b53e87 100644 --- a/docs/auth/phone-auth.md +++ b/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 (