Skip to content

Commit 0d14d73

Browse files
authored
docs(firebase-auth): update (#187)
* wip(firebase-auth): README * chore: update * chore: update * chore: update * chore: update
1 parent a3c0635 commit 0d14d73

File tree

1 file changed

+144
-62
lines changed

1 file changed

+144
-62
lines changed

packages/firebase-auth/README.md

+144-62
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,45 @@
11
# @nativescript/firebase-auth
2+
* [Intro](#intro)
3+
* [Installation](#installation)
4+
* [Use @nativescript/firebase-auth](#use-nativescriptfirebase-auth)
5+
* [Listen to the authentication state change](#listen-to-the-authentication-state-change)
6+
* [Sign a user in anonymously](#sign-a-user-in-anonymously)
7+
* [Create a user account with email and password](#create-a-user-account-with-email-and-password)
8+
* [Sign in with email and password](#sign-in-with-email-and-password)
9+
* [Send a user's email verification email](#send-a-users-email-verification-email)
10+
* [Sign a user out](#Signauserout)
11+
* [Sign in with Apple](#sign-in-a-with-apple)
12+
* [Sign in with Facebook account](#sign-in-with-facebook-account)
13+
* [Sign in with Twitter account](#sign-in-with-twitter-account)
14+
* [Sign in with GitHub account](#sign-in-with-github-account)
15+
* [Sign in with Google account](#sign-in-with-google-account)
16+
* [Phone number authentication](#phone-number-authentication)
17+
* [Phone number auth setup](#phone-number-auth-setup)
18+
* [Sign in user with phone number](#sign-in-user-with-phone-number)
19+
* [Testing phone number auth](#testing-phone-number-auth)
20+
* [License](#license)
21+
22+
## Intro
23+
A plugin that allows you to add [Firebase Authentification](https://firebase.google.com/docs/auth) to your NativeScript app.
224

3-
```cli
4-
npm install @nativescript/firebase-auth
5-
```
25+
[![image](https://img.youtube.com/vi/8sGY55yxicA/hqdefault.jpg)](https://www.youtube.com/watch?v=8sGY55yxicA)
626

7-
## Authentication
27+
> **Note:** Use this plugin with the [@nativescript/firebase-core](../firebase-core/) plugin to initialize Firebase in your app.
828
9-
### What does it do?
1029

11-
Firebase Authentication provides backend services & easy-to-use SDKs to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.
30+
## Installation
1231

13-
[![image](https://img.youtube.com/vi/8sGY55yxicA/hqdefault.jpg)](https://www.youtube.com/watch?v=8sGY55yxicA)
32+
Install the plugin by running the following command in the root directory of your project.
33+
34+
```cli
35+
npm install @nativescript/firebase-auth
36+
```
1437

15-
## Usage
38+
## Use @nativescript/firebase-auth
1639

17-
Before using Firebase Auth, you must first have ensured you have initialized Firebase.
40+
Before using Firebase Auth, ensure to initialize Firebase.
1841

19-
To create a new Firebase Auth instance, call the auth method on the firebase instance as follow:
42+
To create a new Firebase Auth instance, call the `auth` method on the firebase instance as follow:
2043

2144
```ts
2245
import { firebase } from '@nativescript/firebase-core';
@@ -25,7 +48,7 @@ import '@nativescript/firebase-auth'; // only needs to be imported 1x
2548
const auth = firebase().auth();
2649
```
2750

28-
By default, this allows you to interact with Firebase Auth using the default Firebase App used whilst installing Firebase on your platform. If however you'd like to use a secondary Firebase App, pass the secondary app instance when calling the auth method:
51+
By default, this allows you to interact with Firebase Auth using the default Firebase App used whilst installing Firebase on your platform. If, however, you'd like to use a secondary Firebase App, call the `auth` method with the `FirebaseApp` instance.
2952

3053
```ts
3154
import { firebase } from '@nativescript/firebase-core';
@@ -38,11 +61,9 @@ const secondaryApp = firebase.initializeApp(config, 'SECONDARY_APP');
3861
const auth = firebase().auth(secondaryApp);
3962
```
4063

41-
### Authentication state
64+
### Listen to the authentication state change
4265

43-
In many cases, you will need to know about the authentication state of your user, such as whether they're logged in or logged out.
44-
45-
To subscribe to these changes, call the addAuthStateChangeListener() method on your FirebaseAuth instance:
66+
To subscribe to auth state change event, call the `addAuthStateChangeListener` method on your FirebaseAuth class returned by `firebase().auth()`:
4667

4768
```ts
4869
import { firebase } from '@nativescript/firebase-core';
@@ -58,9 +79,9 @@ firebase().auth()
5879
}))
5980
```
6081

61-
### Sign-in methods
82+
### Sign a user in anonymously
6283

63-
#### Anonymous sign-in
84+
To sign a user in anonymously, call the `signInAnonymously` method on the instance of the FirebaseAuth class returned by `firebase().auth()`.
6485

6586
```ts
6687
import { firebase } from '@nativescript/firebase-core';
@@ -73,13 +94,11 @@ firebase()
7394
.catch((error) => {});
7495
```
7596

76-
#### Email/Password Registration & Sign-in
77-
78-
Email/Password is a common user sign in method for most applications. This requires the user to provide an email address and secure password. Users can register new accounts with a method called createUserWithEmailAndPassword() or sign in to an existing account with signInWithEmailAndPassword().
97+
### Create a user account with email and password
7998

80-
### Ensure the "Email/Password" sign-in provider is enabled on the Firebase Console.
99+
> **Note** To authenticate a user with email and password, enable `Email/Password` sign-in provider Firebase Console following the steps below: <br> 1. Go to Firebase Console. <br> 2. Click on your project. <br> 3. On the left sidebar, select `Authentication`. <br> 4. Click on the `Sign-in method` tab. <br> 5. Click on the `Email\password` provider. <br> 5. Turn `Enable` switch on.
81100
82-
### Registration
101+
Next, to create a user account with an email and password, call the `createUserWithEmailAndPassword` method on the FirebaseAuth instance(`firebase().auth()`) passing it the user's email and secure password.
83102

84103
```ts
85104
import { firebase } from '@nativescript/firebase-core';
@@ -92,7 +111,9 @@ firebase()
92111
.catch((error) => {});
93112
```
94113

95-
### Sign-in
114+
#### Sign in a user with email and password
115+
116+
To sign in a user with their registered email and password, call `signInWithEmailAndPassword` method, with the email and password, on `firebase().auth()`
96117

97118
```ts
98119
import { firebase } from '@nativescript/firebase-core';
@@ -105,7 +126,9 @@ firebase()
105126
.catch((error) => {});
106127
```
107128

108-
### Verifying a users email
129+
#### Send a user's email verification email
130+
131+
To send an email to the user to request them to verify their email, call the `sendEmailVerification` method on `User` object.
109132

110133
```ts
111134
const user = firebase().auth().currentUser;
@@ -115,7 +138,8 @@ if (user && !user.emailVerified) {
115138
}
116139
```
117140

118-
### Signing Out
141+
### Sign a user out
142+
To sign a user out, call the `signOut` method on `firebase().auth()`.
119143

120144
```ts
121145
firebase().auth().signOut()
@@ -132,26 +156,21 @@ firebase().auth().signOut()
132156
let signedOut = await firebase().auth().signOut();
133157
```
134158

135-
### Other sign-in methods
136-
137-
- [Apple Sign-In.](#Apple)
138-
- [Facebook Sign-In.](#Facebook)
139-
- [Twitter Sign-In.](#Twitter)
140-
- [Google Sign-In.](#Google)
141-
- [Phone Number Sign-In.](#Phone)
142-
143-
#### Apple
159+
### Sign in a user with Apple
144160

145161
Apple announced that any applications using 3rd party login services (such as Facebook, Twitter, Google etc) must also have an Apple Sign-In method. Apple Sign-In is not required for Android devices.
146162

147-
Before you begin [configure Sign In with Apple](https://firebase.google.com/docs/auth/ios/apple#configure-sign-in-with-apple) and [enable Apple as a sign-in provider](https://firebase.google.com/docs/auth/ios/apple#enable-apple-as-a-sign-in-provider).
163+
- Before you begin [configure Sign In with Apple](https://firebase.google.com/docs/auth/ios/apple#configure-sign-in-with-apple) and [enable Apple as a sign-in provider](https://firebase.google.com/docs/auth/ios/apple#enable-apple-as-a-sign-in-provider).
148164

149-
Next, ensure that your app have the "Sign in with Apple" capability.
165+
- Next, ensure that the app has the [Sign in with Apple capability](https://developer.apple.com/documentation/xcode/configuring-sign-in-with-apple#Add-the-Sign-in-with-Apple-capability-to-your-app).
166+
167+
- Install the `@nativescript/apple-sign-in` plugin. Use the `signIn` method from the plugin to get the user's credentials from Apple.
168+
- Create an AuthCredential instance from the user's credentials. Call the `signInWithCredential` method passing it the Apple credentials.
150169

151170
```ts
152171
import { firebase } from '@nativescript/firebase-core';
153172
import { AppleAuthProvider } from '@nativescript/firebase-auth';
154-
import { SignIn, User } from "@nativescript/apple-sign-in";
173+
import { signIn, User } from "@nativescript/apple-sign-in";
155174

156175
signIn(
157176
{
@@ -163,16 +182,22 @@ signIn(
163182
firebase().auth().signInWithCredential(oauthCredential);
164183
})
165184
.catch(err => console.log("Error signing in: " + err));
166-
167185
```
168186

169-
#### Facebook
187+
### Sign in with Facebook account
170188

171-
Before getting started setup your [Facebook Developer App](https://developers.facebook.com/apps/) and follow the setup process to enable Facebook Login.
189+
- Before getting started, follow the steps at [Facebook Developer App](https://developers.facebook.com/apps/) to enable Facebook login and obtain the Facebook `App ID` and `App secret` that you need for setting the Facebook sign-in provider.
172190

173-
Ensure the "Facebook" sign-in provider is enabled on the [Firebase Console](https://console.firebase.google.com/u/0/project/_/authentication/providers). with the Facebook App ID and Secret set.
191+
- Enable the `Facebook sign-in provider` by following the steps below:
192+
1. Go to [Firebase Console](https://console.firebase.google.com).
193+
2. Click on your project.
194+
3. On the left sidebar, select `Authentication`.
195+
4. Click on the `Sign-in method` tab.
196+
5. Click on the `Facebook` provider.
197+
6. Switch on `Enable`
198+
7. Enter your `App ID` and `App secret`, and click on `Save`.
174199

175-
A 3rd party library is required to both install the Facebook SDK and trigger the authentication flow.
200+
- Install the `@nativescript/facebook` plugin and call the `logInWithPermissions` method on the `LoginManager` class to get the user's credentials from Facabook that you pass to Firebase.
176201

177202
```ts
178203
import { firebase } from '@nativescript/firebase-core';
@@ -196,11 +221,11 @@ LoginManager.logInWithPermissions(['public_profile', 'email']).then((result) =>
196221

197222
> **Note:** Firebase will not set the User.emailVerified property to true if your user logs in with Facebook. Should your user login using a provider that verifies email (e.g. Google sign-in) then this will be set to true.
198223
199-
#### Twitter
224+
### Sign in with Twitter account
200225

201-
Ensure the "Twitter" sign-in provider is enabled on the Firebase Console with an API Key and API Secret set.
226+
- Before you authenticate the user with their Twitter account, follow steps `1-5` at [Before you begin](https://firebase.google.com/docs/auth/android/twitter-login?hl=en&authuser=0#before_you_begin) to enable the `Twitter` sign-in provider.
202227

203-
A 3rd party library is required to both install the Twitter SDK and trigger the authentication flow.
228+
- Install the `@nativescript/twitter` plugin and call the `logIn` method on the `TwitterSignIn` class to get the user's credentials from Twitter, as shown below, that you pass to Firebase.
204229

205230
```ts
206231
import { firebase } from '@nativescript/firebase-core';
@@ -219,11 +244,12 @@ TwitterSignIn.logIn().then((data) => {
219244

220245
```
221246

222-
#### GitHub
247+
### Sign in with GitHub account
223248

224-
Ensure that you have setup an OAuth App from your GitHub Developer Settings and that the "GitHub" sign-in provider is enabled on the Firebase Console with the Client ID and Secret are set, with the callback URL set in the GitHub app.
249+
- Set up a GitHub OAuth App from your GitHub Developer Settings and enable `GitHub` sign-in provider by following steps 1-5 at [Before you begin using GitHub](https://firebase.google.com/docs/auth/android/github-auth?hl=en&authuser=0#before_you_begin)
250+
A 3rd party library is required to both install the GitHub SDK and trigger the authentication flow. The `credential` method of the `GithubAuthProvider` class achieves that.
225251

226-
A 3rd party library is required to both install the GitHub SDK and trigger the authentication flow.
252+
- Call the `signInWithCredential` method on `firebase().auth()` passing it the GitHub credentials.
227253

228254
```ts
229255
import { firebase } from '@nativescript/firebase-core';
@@ -233,10 +259,11 @@ const githubAuthCredential = GithubAuthProvider.credential(token);
233259
firebase().auth().signInWithCredential(githubAuthCredential);
234260
```
235261

236-
#### Google
262+
### Sign in with Google account
237263

238-
Most configuration is already setup when using Google Sign-In with Firebase, however you need to ensure your machine's SHA1 key has been configured for use with Android. You can see how to generate the key on the [Authenticating Your Client documentation](https://developers.google.com/android/guides/client-auth).
264+
Most configuration is already set up when using Google Sign-In with Firebase. However, you need to ensure your machine's SHA1 key has been configured for use with Android. You can see how to generate the key on the [Authenticating Your Client documentation](https://developers.google.com/android/guides/client-auth).
239265

266+
- Install the `nativescript/google-signin` plugin, configure Google Sign-in by calling the `configure` method, sign in the user to their Google account to obtain the ID and access tokens. Pass the obtained tokens to Firebase.
240267
```ts
241268
import { firebase } from '@nativescript/firebase-core';
242269
import { GoogleAuthProvider } from '@nativescript/firebase-auth';
@@ -251,29 +278,28 @@ GoogleSignin.signIn().then((user) => {
251278
});
252279
```
253280

254-
### Phone Authentication
281+
### Phone number authentication
255282

256-
Phone authentication allows users to sign in to Firebase using their phone as the authenticator. An SMS message is sent to the user (using the provided phone number) containing a unique code. Once the code has been authorized, the user is able to sign into Firebase.
283+
Phone authentication allows users to sign in to Firebase using their phone as the authenticator. An SMS message containing a unique code is sent to the user (using the provided phone number). Once the code has been authorized, the user can sign in into Firebase.
257284

258-
> **Note:** Phone numbers that end users provide for authentication will be sent and stored by Google to improve spam and abuse prevention across Google service, including to, but not limited to Firebase. Developers should ensure they have the appropriate end-user consent prior to using the Firebase Authentication phone number sign-in service.authentication
285+
> **Note:** Phone numbers that end users provide for authentication will be sent and stored by Google to improve spam and abuse prevention across Google services, including , but not limited to Firebase. Developers should ensure they have the appropriate end-user consent prior to using the Firebase Authentication phone number sign-in service.
259286
260287
Firebase Phone Authentication is not supported in all countries. Please see their [FAQs](https://firebase.google.com/support/faq/#develop) for more information.
261288

262-
#### Setup
289+
#### Phone number auth setup
263290

264291
Before starting with Phone Authentication, ensure you have followed these steps:
265292

266293
1. Enable Phone as a Sign-In method in the [Firebase console](https://console.firebase.google.com/u/0/project/_/authentication/providers).
267294
2. **Android**: If you haven't already set your app's SHA-1 hash in the [Firebase console](https://console.firebase.google.com/), do so. See [Authenticating Your Client](https://developers.google.com/android/guides/client-auth) for information about finding your app's SHA-1 hash.
268295
3. **iOS**: In Xcode, [enable push notifications](http://help.apple.com/xcode/mac/current/#/devdfd3d04a1) for your project & ensure your APNs authentication key is [configured with Firebase Cloud Messaging (FCM)](https://firebase.google.com/docs/cloud-messaging/ios/certs). To view an in-depth explanation of this step, view the [Firebase iOS Phone Auth](https://firebase.google.com/docs/auth/ios/phone-auth) documentation.
269296

270-
**Note**; Phone number sign-in is only available for use on real devices and the web. To test your authentication flow on device emulators, please see Testing.
297+
**Note**; Phone number sign-in is only available for use on real devices and the web. To test your authentication flow on device emulators, please see [Testing](#testing).
271298

272-
### Usage
273299

274-
#### verifyPhoneNumber
300+
#### Sign in user with phone number
275301

276-
The user's phone number must be first verified and then the user can either sign-in or link their account with a PhoneAuthCredential.
302+
The user's phone number must be first verified before the user can either sign in or link their account with a PhoneAuthCredential. Verify the phone number by calling the `verifyPhoneNumber` method with the number. Once the number is verified, pass the verification id and code to Firebase.
277303

278304
```ts
279305
import { PhoneAuthProvider } from '@nativescript/firebase-auth';
@@ -287,13 +313,69 @@ PhoneAuthProvider.provider()
287313
});
288314
```
289315

290-
#### Testing
316+
#### Testing phone number auth
291317

292318
Firebase provides support for locally testing phone numbers:
293319

294-
On the Firebase Console, select the "Phone" authentication provider and click on the "Phone numbers for testing" dropdown.
295-
Enter a new phone number (e.g. +44 7444 555666) and a test code (e.g. 123456).
296-
If providing a test phone number to either the verifyPhoneNumber or signInWithPhoneNumber methods, no SMS will actually be sent. You can instead provide the test code directly to the PhoneAuthProvider or with signInWithPhoneNumbers confirmation result handler.
320+
- On the Firebase Console, enable the "Phone" authentication provider and click on the "Phone numbers for testing" dropdown by following the steps at []().
321+
322+
- Enter a new phone number (e.g. +44 7444 555666) and a test code (e.g. 123456).
323+
If providing a test phone number to either the `verifyPhoneNumber` or `signInWithPhoneNumber` methods, no SMS will be sent. You can instead provide the test code directly to the `PhoneAuthProvider` or with `signInWithPhoneNumbers` confirmation result handler.
324+
325+
## API
326+
### Auth
327+
| Property | Type | Description
328+
|----------|------|-------------
329+
| `app`| `FirebaseApp` | _readonly_
330+
| `currentUser`| [User](#user) \| `null` | _readonly_
331+
| `languageCode`| `boolean` | _readonly_
332+
| `settings` | [AuthSettings]()| _readonly_
333+
| `tenantId` | `string` | _readonly_
334+
335+
####
336+
| Method | Returns | Description
337+
|----------|------|-------------
338+
| `useEmulator(host: string, port: number)` | `void`
339+
| `applyActionCode(code: string)` | `Promise<void>`
340+
| `checkActionCode(code: string)` | Promise\<[ActionCodeInfo]()\>
341+
342+
343+
### User
344+
The user object has the following members.
345+
346+
#### Properties
347+
348+
| Property | Type | Description
349+
|----------|------|-------------
350+
| `uid`| `string` | _readonly_
351+
| `displayName`| `string` | _readonly_
352+
| `anonymous`| `boolean` | _readonly_
353+
| `emailVerified`| `boolean` | _readonly_
354+
| `email`| `string` | _readonly_
355+
| `phoneNumber`| ` string` | _readonly_
356+
| `providerId`| `string` | _readonly_
357+
| `photoURL`| `string` | _readonly_
358+
| `metadata`| UserMetadata | _readonly_`
359+
| `providerData`| UserInfo[] | _readonly_
360+
361+
#### Methods
362+
363+
| Method | Returns | Description
364+
|----------|------|-------------
365+
| `delete()` | `Promise<void>` |
366+
| `getIdToken(forceRefresh?: undefined | false | true)` | `Promise<string>` |
367+
| `getIdTokenResult(forceRefresh?: undefined | false | true)` | Promise<AuthTokenResult> |
368+
| `linkWithCredential(credential: AuthCredential)` | Promise<UserCredential> |
369+
| `reauthenticateWithProvider(provider: OAuthProvider)` | Promise<UserCredential> |
370+
| `reauthenticateWithCredential(credential: AuthCredential)` | Promise<UserCredential> |
371+
| `reload()` | `Promise<void>` |
372+
| `sendEmailVerification(actionCodeSettings?: ActionCodeSettings)` | `Promise<void>` |
373+
| `unlink(providerId: string)` | Promise<User> |
374+
`updateEmail(email: string)` | `Promise<void>` |
375+
| `updatePassword(password: string)` | ` Promise<void>` |
376+
| `updatePhoneNumber(credential: AuthCredential)` | `Promise<void>` |
377+
| `updateProfile(updates: UserProfileChangeRequest)` | `Promise<void>` |
378+
| `verifyBeforeUpdateEmail(email: string, actionCodeSettings?: ActionCodeSettings)` | `Promise<void>` |
297379

298380
## License
299381

0 commit comments

Comments
 (0)