Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(auth): update examples to use modular API #8327

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs(auth): update examples to use modular API #8327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 34 additions & 22 deletions docs/auth/multi-factor-auth.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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');
```

Expand All @@ -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
})
Expand All @@ -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
Expand All @@ -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
}
```
Expand All @@ -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));
```
Expand All @@ -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
Expand All @@ -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
Expand Down
7 changes: 4 additions & 3 deletions docs/auth/oidc-auth.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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);
```
42 changes: 27 additions & 15 deletions docs/auth/phone-auth.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
Expand All @@ -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);
}

Expand All @@ -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')}
/>
);
}
Expand Down Expand Up @@ -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
Expand All @@ -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') {
Expand All @@ -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') {
Expand All @@ -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')
}
/>
);
}
Expand Down
Loading
Loading