Skip to content

Commit fa7de9b

Browse files
committed
docs(auth): update examples to use modular API
1 parent 082a1e4 commit fa7de9b

File tree

5 files changed

+103
-42
lines changed

5 files changed

+103
-42
lines changed

docs/auth/multi-factor-auth.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ instance for the current user. This is the entry point for most multi-factor
2121
operations:
2222

2323
```js
24-
import auth from '@react-native-firebase/auth';
25-
const multiFactorUser = await auth().multiFactor(auth().currentUser);
24+
import auth, { getAuth } from '@react-native-firebase/auth';
25+
const multiFactorUser = await getAuth().multiFactor(getAuth().currentUser);
2626
```
2727

2828
Request the session identifier and use the phone number obtained from the user
@@ -36,7 +36,7 @@ const phoneOptions = {
3636
};
3737

3838
// Sends a text message to the user
39-
const verificationId = await auth().verifyPhoneNumberForMultiFactor(phoneOptions);
39+
const verificationId = await getAuth().verifyPhoneNumberForMultiFactor(phoneOptions);
4040
```
4141

4242
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
5858
a second factor to complete login, an exception will be raised:
5959

6060
```js
61-
import auth from '@react-native-firebase/auth';
61+
import auth, { getAuth } from '@react-native-firebase/auth';
6262

63-
auth()
63+
getAuth()
6464
.signInWithEmailAndPassword(email, password)
6565
.then(() => {
6666
// User has not enrolled a second factor
@@ -81,7 +81,7 @@ Using the error object you can obtain a
8181
continue the flow:
8282

8383
```js
84-
const resolver = auth().getMultiFactorResolver(error);
84+
const resolver = getAuth().getMultiFactorResolver(error);
8585
```
8686

8787
The resolver object has all the required information to prompt the user for a
@@ -105,7 +105,7 @@ verification code to the user:
105105
const hint = resolver.hints[0];
106106
const sessionId = resolver.session;
107107

108-
auth()
108+
getAuth()
109109
.verifyPhoneNumberWithMultiFactorInfo(hint, sessionId) // triggers the message to the user
110110
.then(verificationId => setVerificationId(verificationId));
111111
```
@@ -130,9 +130,9 @@ will trigger with the new authentication state of the user.
130130
To put the example together:
131131

132132
```js
133-
import auth from '@react-native-firebase/auth';
133+
import auth, { getAuth } from '@react-native-firebase/auth';
134134

135-
const authInstance = auth();
135+
const authInstance = getAuth();
136136

137137
authInstance
138138
.signInWithEmailAndPassword(email, password)
@@ -143,7 +143,7 @@ authInstance
143143
const { code } = error;
144144
// Make sure to check if multi factor authentication is required
145145
if (code === 'auth/multi-factor-auth-required') {
146-
const resolver = auth.getMultiFactorResolver(error);
146+
const resolver = authInstance.getMultiFactorResolver(error);
147147

148148
if (resolver.hints.length > 1) {
149149
// Use resolver.hints to display a list of second factors to the user

docs/auth/oidc-auth.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ Before you use `react-native-app-auth` you have to complete the setup in their [
4444
The example below demonstrates how you could setup such a flow within your own application:
4545

4646
```jsx
47-
import auth from '@react-native-firebase/auth';
47+
import auth, { getAuth } from '@react-native-firebase/auth';
4848
import { authorize } from 'react-native-app-auth';
4949

5050
// using react-native-app-auth to get oauth token from Azure AD
@@ -64,5 +64,5 @@ const credential = auth.OIDCAuthProvider.credential(
6464
authState.idToken,
6565
);
6666

67-
await auth().signInWithCredential(credential);
67+
await getAuth().signInWithCredential(credential);
6868
```

docs/auth/phone-auth.md

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ The example below demonstrates how you could setup such a flow within your own a
5858
```jsx
5959
import React, { useState, useEffect } from 'react';
6060
import { Button, TextInput } from 'react-native';
61-
import auth from '@react-native-firebase/auth';
61+
import { getAuth } from '@react-native-firebase/auth';
6262

6363
function PhoneSignIn() {
6464
// If null, no SMS has been sent
@@ -78,13 +78,13 @@ function PhoneSignIn() {
7878
}
7979

8080
useEffect(() => {
81-
const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
81+
const subscriber = getAuth().onAuthStateChanged(onAuthStateChanged);
8282
return subscriber; // unsubscribe on unmount
8383
}, []);
8484

8585
// Handle the button press
8686
async function signInWithPhoneNumber(phoneNumber) {
87-
const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
87+
const confirmation = await getAuth().signInWithPhoneNumber(phoneNumber);
8888
setConfirm(confirmation);
8989
}
9090

@@ -138,7 +138,7 @@ After successfully creating a user with an email and password (see Authenticatio
138138
```jsx
139139
import React, { useState, useEffect } from 'react';
140140
import { Button, TextInput, Text } from 'react-native';
141-
import auth from '@react-native-firebase/auth';
141+
import auth, { getAuth } from '@react-native-firebase/auth';
142142

143143
export default function PhoneVerification() {
144144
// Set an initializing state whilst Firebase connects
@@ -157,14 +157,17 @@ export default function PhoneVerification() {
157157
}
158158

159159
useEffect(() => {
160-
const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
160+
const subscriber = getAuth().onAuthStateChanged(onAuthStateChanged);
161161
return subscriber; // unsubscribe on unmount
162162
}, []);
163163

164164
// Handle create account button press
165165
async function createAccount() {
166166
try {
167-
await auth().createUserWithEmailAndPassword('[email protected]', 'SuperSecretPassword!');
167+
await getAuth().createUserWithEmailAndPassword(
168+
169+
'SuperSecretPassword!',
170+
);
168171
console.log('User account created & signed in!');
169172
} catch (error) {
170173
if (error.code === 'auth/email-already-in-use') {
@@ -180,15 +183,15 @@ export default function PhoneVerification() {
180183

181184
// Handle the verify phone button press
182185
async function verifyPhoneNumber(phoneNumber) {
183-
const confirmation = await auth().verifyPhoneNumber(phoneNumber);
186+
const confirmation = await getAuth().verifyPhoneNumber(phoneNumber);
184187
setConfirm(confirmation);
185188
}
186189

187190
// Handle confirm code button press
188191
async function confirmCode() {
189192
try {
190193
const credential = auth.PhoneAuthProvider.credential(confirm.verificationId, code);
191-
let userData = await auth().currentUser.linkWithCredential(credential);
194+
let userData = await getAuth().currentUser.linkWithCredential(credential);
192195
setUser(userData.user);
193196
} catch (error) {
194197
if (error.code == 'auth/invalid-verification-code') {

docs/auth/social-auth.md

Lines changed: 72 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ When the user presses the pre-rendered button, we can trigger the initial sign-i
5252
passing in the scope required for our application:
5353

5454
```js
55-
import auth from '@react-native-firebase/auth';
55+
import auth, { getAuth } from '@react-native-firebase/auth';
5656
import { appleAuth } from '@invertase/react-native-apple-authentication';
5757

5858
async function onAppleButtonPress() {
@@ -74,7 +74,7 @@ async function onAppleButtonPress() {
7474
const appleCredential = auth.AppleAuthProvider.credential(identityToken, nonce);
7575

7676
// Sign the user in with the credential
77-
return auth().signInWithCredential(appleCredential);
77+
return getAuth().signInWithCredential(appleCredential);
7878
}
7979
```
8080

@@ -84,7 +84,7 @@ with the new authentication state of the user.
8484
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.
8585

8686
```js
87-
import auth from '@react-native-firebase/auth';
87+
import { getAuth } from '@react-native-firebase/auth';
8888
import { appleAuth } from '@invertase/react-native-apple-authentication';
8989

9090
async function revokeSignInWithAppleToken() {
@@ -99,7 +99,7 @@ async function revokeSignInWithAppleToken() {
9999
}
100100

101101
// Revoke the token
102-
return auth().revokeToken(authorizationCode);
102+
return getAuth().revokeToken(authorizationCode);
103103
}
104104
```
105105

@@ -134,7 +134,7 @@ function FacebookSignIn() {
134134
The `onFacebookButtonPress` can then be implemented as follows:
135135

136136
```js
137-
import auth from '@react-native-firebase/auth';
137+
import auth, { getAuth } from '@react-native-firebase/auth';
138138
import { LoginManager, AccessToken } from 'react-native-fbsdk-next';
139139

140140
async function onFacebookButtonPress() {
@@ -156,7 +156,7 @@ async function onFacebookButtonPress() {
156156
const facebookCredential = auth.FacebookAuthProvider.credential(data.accessToken);
157157

158158
// Sign-in the user with the credential
159-
return auth().signInWithCredential(facebookCredential);
159+
return getAuth().signInWithCredential(facebookCredential);
160160
}
161161
```
162162

@@ -165,7 +165,7 @@ async function onFacebookButtonPress() {
165165
To use Facebook Limited Login instead of "classic" Facebook Login, the `onFacebookButtonPress` can then be implemented as follows:
166166

167167
```js
168-
import auth from '@react-native-firebase/auth';
168+
import auth, { getAuth } from '@react-native-firebase/auth';
169169
import { LoginManager, AuthenticationToken } from 'react-native-fbsdk-next';
170170
import { sha256 } from 'react-native-sha256';
171171

@@ -197,7 +197,65 @@ async function onFacebookButtonPress() {
197197
const facebookCredential = auth.FacebookAuthProvider.credential(data.authenticationToken, nonce);
198198

199199
// Sign-in the user with the credential
200-
return auth().signInWithCredential(facebookCredential);
200+
return getAuth().signInWithCredential(facebookCredential);
201+
}
202+
```
203+
204+
Upon successful sign-in, any [`onAuthStateChanged`](/auth/usage#listening-to-authentication-state) listeners will trigger
205+
with the new authentication state of the user.
206+
207+
## Twitter
208+
209+
Using the external [`@react-native-twitter-signin/twitter-signin`](https://github.com/react-native-twitter-signin/twitter-signin) library,
210+
we can sign-in the user with Twitter and generate a credential which can be used to sign-in with Firebase.
211+
212+
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.
213+
214+
Ensure the "Twitter" sign-in provider is enabled on the [Firebase Console](https://console.firebase.google.com/project/_/authentication/providers).
215+
216+
Before triggering a sign-in request, you must initialize the Twitter SDK using your accounts consumer key & secret:
217+
218+
```js
219+
import { NativeModules } from 'react-native';
220+
const { RNTwitterSignIn } = NativeModules;
221+
222+
RNTwitterSignIn.init('TWITTER_CONSUMER_KEY', 'TWITTER_CONSUMER_SECRET').then(() =>
223+
console.log('Twitter SDK initialized'),
224+
);
225+
```
226+
227+
Once initialized, setup your application to trigger a sign-in request with Twitter using the `login` method.
228+
229+
```jsx
230+
import React from 'react';
231+
import { Button } from 'react-native';
232+
233+
function TwitterSignIn() {
234+
return (
235+
<Button
236+
title="Twitter Sign-In"
237+
onPress={() => onTwitterButtonPress().then(() => console.log('Signed in with Twitter!'))}
238+
/>
239+
);
240+
}
241+
```
242+
243+
The `onTwitterButtonPress` can then be implemented as follows:
244+
245+
```js
246+
import auth, { getAuth } from '@react-native-firebase/auth';
247+
import { NativeModules } from 'react-native';
248+
const { RNTwitterSignIn } = NativeModules;
249+
250+
async function onTwitterButtonPress() {
251+
// Perform the login request
252+
const { authToken, authTokenSecret } = await RNTwitterSignIn.logIn();
253+
254+
// Create a Twitter credential with the tokens
255+
const twitterCredential = auth.TwitterAuthProvider.credential(authToken, authTokenSecret);
256+
257+
// Sign-in the user with the credential
258+
return getAuth().signInWithCredential(twitterCredential);
201259
}
202260
```
203261

@@ -250,7 +308,7 @@ function GoogleSignIn() {
250308
The `onGoogleButtonPress` can then be implemented as follows:
251309

252310
```js
253-
import auth from '@react-native-firebase/auth';
311+
import auth, { getAuth } from '@react-native-firebase/auth';
254312
import { GoogleSignin } from '@react-native-google-signin/google-signin';
255313

256314
async function onGoogleButtonPress() {
@@ -273,7 +331,7 @@ async function onGoogleButtonPress() {
273331
const googleCredential = auth.GoogleAuthProvider.credential(signInResult.data.idToken);
274332

275333
// Sign-in the user with the credential
276-
return auth().signInWithCredential(googleCredential);
334+
return getAuth().signInWithCredential(googleCredential);
277335
}
278336
```
279337
@@ -310,7 +368,7 @@ function MicrosoftSignIn() {
310368
`onMicrosoftButtonPress` can be implemented as the following:
311369
312370
```js
313-
import auth from '@react-native-firebase/auth';
371+
import auth, { getAuth } from '@react-native-firebase/auth';
314372

315373
const onMicrosoftButtonPress = async () => {
316374
// Generate the provider object
@@ -327,7 +385,7 @@ const onMicrosoftButtonPress = async () => {
327385
});
328386

329387
// Sign-in the user with the provider
330-
return auth().signInWithRedirect(provider);
388+
return getAuth().signInWithRedirect(provider);
331389
};
332390
```
333391
@@ -406,7 +464,7 @@ To achieve this, you should replace sign-in method in any of the supported socia
406464
This code demonstrates linking a Google provider to an account that is already signed in using Firebase authentication.
407465
408466
```js
409-
import auth from '@react-native-firebase/auth';
467+
import auth, { getAuth } from '@react-native-firebase/auth';
410468
import { GoogleSignin } from '@react-native-google-signin/google-signin';
411469

412470
async function onGoogleLinkButtonPress() {
@@ -419,7 +477,7 @@ async function onGoogleLinkButtonPress() {
419477
const googleCredential = auth.GoogleAuthProvider.credential(idToken);
420478

421479
// Link the user's account with the Google credential
422-
const firebaseUserCredential = await auth().currentUser.linkWithCredential(googleCredential);
480+
const firebaseUserCredential = await getAuth().currentUser.linkWithCredential(googleCredential);
423481
// Handle the linked account as needed in your app
424482
return;
425483
}

docs/auth/usage/index.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ render of our main application whilst the connection is established:
5050
```jsx
5151
import React, { useState, useEffect } from 'react';
5252
import { View, Text } from 'react-native';
53-
import auth from '@react-native-firebase/auth';
53+
import { getAuth } from '@react-native-firebase/auth';
5454

5555
function App() {
5656
// Set an initializing state whilst Firebase connects
@@ -64,7 +64,7 @@ function App() {
6464
}
6565

6666
useEffect(() => {
67-
const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
67+
const subscriber = getAuth().onAuthStateChanged(onAuthStateChanged);
6868
return subscriber; // unsubscribe on unmount
6969
}, []);
7070

@@ -110,9 +110,9 @@ allowing you to integrate with other services such as Analytics by providing a u
110110
Ensure the "Anonymous" sign-in provider is enabled on the [Firebase Console](https://console.firebase.google.com/project/_/authentication/providers).
111111

112112
```js
113-
import auth from '@react-native-firebase/auth';
113+
import { getAuth } from '@react-native-firebase/auth';
114114

115-
auth()
115+
getAuth()
116116
.signInAnonymously()
117117
.then(() => {
118118
console.log('User signed in anonymously');
@@ -144,9 +144,9 @@ The `createUserWithEmailAndPassword` performs two operations; first creating the
144144
then signing them in.
145145

146146
```js
147-
import auth from '@react-native-firebase/auth';
147+
import { getAuth } from '@react-native-firebase/auth';
148148

149-
auth()
149+
getAuth()
150150
.createUserWithEmailAndPassword('[email protected]', 'SuperSecretPassword!')
151151
.then(() => {
152152
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
179179
If you'd like to sign the user out of their current authentication state, call the `signOut` method:
180180

181181
```js
182-
import auth from '@react-native-firebase/auth';
182+
import { getAuth } from '@react-native-firebase/auth';
183183

184-
auth()
184+
getAuth()
185185
.signOut()
186186
.then(() => console.log('User signed out!'));
187187
```

0 commit comments

Comments
 (0)