diff --git a/docs/auth/multi-factor-auth.md b/docs/auth/multi-factor-auth.md index 0da24f2081..7881db235d 100644 --- a/docs/auth/multi-factor-auth.md +++ b/docs/auth/multi-factor-auth.md @@ -21,8 +21,14 @@ 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 { + PhoneAuthProvider, + PhoneMultiFactorGenerator, + getAuth, + multiFactor, +} from '@react-native-firebase/auth'; + +const multiFactorUser = await multiFactor(getAuth().currentUser); ``` Request the session identifier and use the phone number obtained from the user @@ -36,15 +42,15 @@ const phoneOptions = { }; // Sends a text message to the user -const verificationId = await auth().verifyPhoneNumberForMultiFactor(phoneOptions); +const verificationId = await new PhoneAuthProvider(getAuth()).verifyPhoneNumber(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 = PhoneMultiFactorGenerator.assertion(cred); await multiFactorUser.enroll(multiFactorAssertion, 'Optional display name for the user'); ``` @@ -58,10 +64,15 @@ 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'; - -auth() - .signInWithEmailAndPassword(email, password) +import { + PhoneAuthProvider, + PhoneMultiFactorGenerator, + getAuth, + signInWithEmailAndPassword, + getMultiFactorResolver, +} from '@react-native-firebase/auth'; + +signInWithEmailAndPassword(getAuth(), email, password) .then(() => { // User has not enrolled a second factor }) @@ -81,7 +92,7 @@ Using the error object you can obtain a continue the flow: ```js -const resolver = auth().getMultiFactorResolver(error); +const resolver = getMultiFactorResolver(getAuth(), error); ``` The resolver object has all the required information to prompt the user for a @@ -93,7 +104,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 === PhoneMultiFactorGenerator.FACTOR_ID) { // Continue with the sign-in flow } ``` @@ -105,8 +116,8 @@ verification code to the user: const hint = resolver.hints[0]; const sessionId = resolver.session; -auth() - .verifyPhoneNumberWithMultiFactorInfo(hint, sessionId) // triggers the message to the user +new PhoneAuthProvider(getAuth()) + .verifyPhoneNumber(hint, sessionId) // triggers the message to the user .then(verificationId => setVerificationId(verificationId)); ``` @@ -114,9 +125,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 = PhoneMultiFactorGenerator.assertion(credential); resolver.resolveSignIn(multiFactorAssertion).then(userCredential => { // additionally onAuthStateChanged will be triggered as well @@ -130,12 +141,15 @@ will trigger with the new authentication state of the user. To put the example together: ```js -import auth from '@react-native-firebase/auth'; - -const authInstance = auth(); - -authInstance - .signInWithEmailAndPassword(email, password) +import { + PhoneAuthProvider, + PhoneMultiFactorGenerator, + getAuth, + signInWithEmailAndPassword, + getMultiFactorResolver, +} from '@react-native-firebase/auth'; + +signInWithEmailAndPassword(getAuth(), email, password) .then(() => { // User has not enrolled a second factor }) @@ -143,26 +157,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 === PhoneMultiFactorGenerator.FACTOR_ID) { const hint = resolver.hints[0]; const sessionId = resolver.session; - authInstance - .verifyPhoneNumberWithMultiFactorInfo(hint, sessionId) // triggers the message to the user + new PhoneAuthProvider(getAuth()) + .verifyPhoneNumber(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 = 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..2404c0ec45 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,10 @@ 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); +await signInWithCredential(getAuth(), credential); ``` diff --git a/docs/auth/phone-auth.md b/docs/auth/phone-auth.md index fbe501ac15..7d2339a3e6 100644 --- a/docs/auth/phone-auth.md +++ b/docs/auth/phone-auth.md @@ -56,9 +56,9 @@ a code. Based on whether the code is correct for the device, the method rejects The example below demonstrates how you could setup such a flow within your own application: ```jsx -import React, { useState, useEffect } from 'react'; +import { 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'; function PhoneSignIn() { // If null, no SMS has been sent @@ -68,7 +68,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 +78,13 @@ function PhoneSignIn() { } useEffect(() => { - const subscriber = auth().onAuthStateChanged(onAuthStateChanged); + const subscriber = onAuthStateChanged(getAuth(), 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(getAuth(), phoneNumber); setConfirm(confirmation); } @@ -100,7 +100,7 @@ function PhoneSignIn() { return (