Auth

@nativescript/firebase-auth #

• Intro

• Installation

• Use @nativescript/firebase-auth

  • Listen to the authentication state change
  • Sign a user in anonymously
  • Create a user account with email and password
  • Sign in with email and password
  • Send a user's email verification email
  • Sign a user out
  • Sign in with Apple
  • Sign in with Facebook account
  • Sign in with Twitter account
  • Sign in with GitHub account
  • Sign in with Google account
  • Phone number authentication
    • Phone number auth setup
    • Sign in user with phone number
    • Testing phone number auth

• API

  • Auth class
    • Properties
    • Methods
  • User
    • Properties
    • Methods
  • UserCredential

• License

Intro #

A plugin that allows you to add Firebase Authentification to your NativeScript app.

Installation #

Install the plugin by running the following command in the root directory of your project.

npm install @nativescript/firebase-auth

Use @nativescript/firebase-auth #

Before using Firebase Auth, ensure to initialize Firebase.

To create a new Firebase Auth instance, call the auth method on the firebase instance as follow:

import { firebase } from '@nativescript/firebase-core'
import '@nativescript/firebase-auth' // only needs to be imported 1x

const auth = firebase().auth()

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.

import { firebase } from '@nativescript/firebase-core'
import '@nativescript/firebase-auth'

// create secondary app instance
const config = new FirebaseOptions()
const secondaryApp = firebase.initializeApp(config, 'SECONDARY_APP')

const auth = firebase().auth(secondaryApp)

Listen to the authentication state change #

To subscribe to auth state change event, call the addAuthStateChangeListener method on your FirebaseAuth class returned by firebase().auth():

import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-auth';

firebase().auth()
  .addAuthStateChangeListener((user) => {
    if (!user) {
      console.log('User is currently signed out!');
    } else {
      console.log('User is signed in!');
    }
  }))

Sign a user in anonymously #

To sign a user in anonymously, call the signInAnonymously method on the instance of the FirebaseAuth class returned by firebase().auth().

import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-auth';

firebase()
	.auth()
	.signInAnonymously()
	.then((cred: [UserCredential]()) => {})
	.catch((error) => {});

Create a user account with email and password #

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.

import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-auth';

firebase()
	.auth()
	.createUserWithEmailAndPassword('[email protected]', 'password')
	.then((cred: [UserCredential]()) => {})
	.catch((error) => {});

Sign in a user with email and password #

To sign in a user with their registered email and password, call signInWithEmailAndPassword method, with the email and password, on firebase().auth()

import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-auth';

firebase()
	.auth()
	.signInWithEmailAndPassword('[email protected]', 'password')
	.then((cred: [UserCredential]()) => {})
	.catch((error) => {});

Send a user's email verification email #

To send an email to the user to request them to verify their email, call the sendEmailVerification method on User object.

const user = firebase().auth().currentUser

if (user && !user.emailVerified) {
  user.sendEmailVerification()
}

Sign a user out #

To sign a user out, call the signOut method on firebase().auth().

firebase()
  .auth()
  .signOut()
  .then(res => {
    if (res) {
      // user signed out
      return
    }
    // else do staff
  })

// OR

let signedOut = await firebase().auth().signOut()

Sign in a user with Apple #

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.

• Before you begin configure Sign In with Apple and enable Apple as a sign-in provider.

• Next, ensure that the app has the Sign in with Apple capability.

• Install the @nativescript/apple-sign-in plugin. Use the signIn method from the plugin to get the user's credentials from Apple.

• Create an AuthCredential instance from the user's credentials. Call the signInWithCredential method passing it the Apple credentials.

import { firebase } from '@nativescript/firebase-core'
import { AppleAuthProvider } from '@nativescript/firebase-auth'
import { signIn, User } from '@nativescript/apple-sign-in'

signIn({
  scopes: ['EMAIL', 'FULLNAME']
})
  .then((result: User) => {
    const oauthCredential = AppleAuthProvider.credential(
      result.identityToken,
      result.nonce
    )

    firebase().auth().signInWithCredential(oauthCredential)
  })
  .catch(err => console.log('Error signing in: ' + err))

Sign in with Facebook account #

• Before getting started, follow the steps at Facebook Developer App to enable Facebook login and obtain the Facebook App ID and App secret that you need for setting the Facebook sign-in provider.

• Enable the Facebook sign-in provider by following the steps below:

  1. Go to Firebase Console.
  2. Click on your project.
  3. On the left sidebar, select Authentication.
  4. Click on the Sign-in method tab.
  5. Click on the Facebook provider.
  6. Switch on Enable
  7. Enter your App ID and App secret, and click on Save.

• 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.

import { firebase } from '@nativescript/firebase-core'
import { FacebookAuthProvider } from '@nativescript/firebase-auth'
import { LoginManager, AccessToken } from '@nativescript/facebook'

LoginManager.logInWithPermissions(['public_profile', 'email']).then(result => {
  // Once signed in, get the users AccesToken
  const data = await AccessToken.currentAccessToken()

  // Create a Firebase credential with the AccessToken
  const facebookCredential = FacebookAuthProvider.credential(data.tokenString)

  // Sign-in the user with the credential
  return firebase().auth().signInWithCredential(facebookCredential)
})

Sign in with Twitter account #

• Before you authenticate the user with their Twitter account, follow steps 1-5 at Before you begin to enable the Twitter sign-in provider.

• 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.

import { firebase } from '@nativescript/firebase-core'
import { TwitterAuthProvider } from '@nativescript/firebase-auth'
import { Twitter, TwitterSignIn } from '@nativescript/twitter'

Twitter.init('TWITTER_CONSUMER_KEY', 'TWITTER_CONSUMER_SECRET') // called earlier in the app

// Perform the login request
TwitterSignIn.logIn().then(data => {
  const twitterAuthCredential = TwitterAuthProvider.credential(
    data.authToken,
    data.authTokenSecret
  )

  firebase().auth().signInWithCredential(twitterAuthCredential)
})

Sign in with GitHub account #

• 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 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.

• Call the signInWithCredential method on firebase().auth() passing it the GitHub credentials.

import { firebase } from '@nativescript/firebase-core'
import { GithubAuthProvider } from '@nativescript/firebase-auth'
const githubAuthCredential = GithubAuthProvider.credential(token)

firebase().auth().signInWithCredential(githubAuthCredential)

Sign in with Google account #

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.

• 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.

import { firebase } from '@nativescript/firebase-core'
import { GoogleAuthProvider } from '@nativescript/firebase-auth'
import { GoogleSignin } from '@nativescript/google-signin'

GoogleSignin.configure() // called earlier in the app

GoogleSignin.signIn().then(user => {
  const credential = GoogleAuthProvider.credential(user.idToken, user.accessToken)

  firebase().auth().signInWithCredential(credential)
})

Phone number authentication #

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.

Firebase Phone Authentication is not supported in all countries. Please see their FAQs for more information.

Phone number auth setup #

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

1. Enable Phone as a Sign-In method in the Firebase console.
2. Android: If you haven't already set your app's SHA-1 hash in the Firebase console, do so. See Authenticating Your Client for information about finding your app's SHA-1 hash.
3. iOS: In Xcode, enable push notifications for your project & ensure your APNs authentication key is configured with Firebase Cloud Messaging (FCM). To view an in-depth explanation of this step, view the Firebase iOS Phone Auth documentation.

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.

Sign in user with phone number #

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.

import { PhoneAuthProvider } from '@nativescript/firebase-auth'
PhoneAuthProvider.provider()
  .verifyPhoneNumber('+44 7123 123 456')
  .then(verificationId => {
    // present ui to allow user to enter verificationCode
    // use the verificationCode entered by the user to create PhoneAuthCredentials
    const credential = PhoneAuthProvider.provider().credential(
      verificationId,
      verificationCode
    )
    firebase().auth().signInWithCredential(credential)
  })

Testing phone number auth #

Firebase provides support for locally testing phone numbers:

• On the Firebase Console, enable the "Phone" authentication provider and click on the "Phone numbers for testing" dropdown by following the steps at .

• Enter a new phone number (e.g. +44 7444 555666) and a test code (e.g. 123456). 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.

API #

Auth class #

Properties #

Methods #

User #

The user object has the following members.

Properties #

Methods #

UserCredential #

AdditionalUserInfo #

AuthCredential #

| Property | Type | Description | | -------------- | ----------------------------------------- | ----------- | ---------- | | ios | FIRAuthCredential | | _readonly_ | |android |com.google.firebase.auth.AuthCredential| _readonly_ | |signInMethod|string | _readonly_ | |idToken |string | _readonly_ | |accessToken |string | _readonly_ | |secret |string` | readonly |

OAuthCredential #

License #

Apache License Version 2.0