Use @nativescript/firebase-auth
A plugin that allows you to add Firebase Authentification to your NativeScript app.
Note
Use this plugin with the @nativescript/firebase-core plugin to initialize Firebase in your app.
Install the plugin by running the following command in the root directory of your project.
npm install @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)
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!');
}
}))
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) => {});
Note
To authenticate a user with email and password, enable Email/Password
sign-in provider Firebase Console 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 Email\password
provider.
5. Turn Enable
switch on.
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('myemail@myemail.com', 'password')
.then((cred: [UserCredential]()) => {})
.catch((error) => {});
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('myemail@myemail.com', 'password')
.then((cred: [UserCredential]()) => {})
.catch((error) => {});
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()
}
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()
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))
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:
Authentication
.Sign-in method
tab.Facebook
provider.Enable
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)
})
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.
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)
})
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)
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.
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 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.
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.
Firebase Phone Authentication is not supported in all countries. Please see their FAQs for more information.
Before starting with Phone Authentication, ensure you have followed these steps:
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.
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)
})
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.
Property | Type | Description |
---|---|---|
app | FirebaseApp | readonly |
currentUser | User | null | readonly |
languageCode | boolean | readonly |
settings | AuthSettings | readonly |
tenantId | string | A readonly only property that returns the tenant ID of the Auth class instance. Read more at tenantId. |
Method | Returns | Description |
---|---|---|
useEmulator(host: string, port: number) | void | For the description, see useEmulator on the Firebase documentation. |
applyActionCode(code: string) | Promise<void> | For the description, see applyActionCode on the Firebase documentation. |
checkActionCode(code: string) | Promise<ActionCodeInfo> | For the description, see checkActionCode on the Firebase documentation. |
confirmPasswordReset(code: string, newPassword: string) | Promise<void> | For the description, see confirmPasswordReset on the Firebase documentation. |
createUserWithEmailAndPassword(email: string, password: string) | Promise<UserCredential> | For the description, see createUserWithEmailAndPassword on the Firebase documentation. |
fetchSignInMethodsForEmail(email: string) | Promise<string[]> | For the description, see fetchSignInMethodsForEmail on the Firebase documentation. |
isSignInWithEmailLink(emailLink: string) | boolean | For the description, see isSignInWithEmailLink on the Firebase documentation. |
addAuthStateChangeListener(listener: (user: User) => void) | void | For the description, see onAuthStateChanged on the Firebase documentation. |
removeAuthStateChangeListener(listener: (user: User) => void) | void | |
addIdTokenChangeListener(listener: (user: User) => void) | void | For the description, see onIdTokenChanged on the Firebase documentation. |
removeIdTokenChangListener(listener: (user: User) => void) | void | |
sendPasswordResetEmail(email: string, actionCodeSettings?: ActionCodeSettings) | Promise<void> | For the description, see sendPasswordResetEmail on the Firebase documentation. |
sendSignInLinkToEmail(email: string, actionCodeSettings?: ActionCodeSettings) | Promise<void> | For the description, see sendSignInLinkToEmail( on the Firebase documentation. |
signInAnonymously() | Promise<UserCredential> | For the description, see signInAnonymously on the Firebase documentation. |
signInWithProvider(provider: OAuthProvider) | Promise<UserCredential> | |
getProviderCredential(provider: OAuthProvider) | Promise<OAuthCredential> | |
signInWithCredential(credential: AuthCredential) | Promise<UserCredential> | For the description, see signInWithCredential on the Firebase documentation. |
signInWithCustomToken(customToken: string) | Promise<UserCredential> | For the description, see signInWithCustomToken on the Firebase documentation. |
signInWithEmailAndPassword(email: string, password: string) | Promise<UserCredential> | For the description, see signInWithEmailAndPassword on the Firebase documentation. |
signInWithEmailLink(email: string, emailLink: string) | Promise<UserCredential> | For the description, see signInWithEmailLink on the Firebase documentation. |
signOut() | boolean | Signs the user out. |
useUserAccessGroup(userAccessGroup: string) | Promise<void> | |
verifyPasswordResetCode(code: string) | Promise<string> | For the description, see verifyPasswordResetCode on the Firebase documentation. |
The user object has the following members.
Property | Type | Description |
---|---|---|
uid | string | readonly |
displayName | string | readonly |
anonymous | boolean | readonly |
emailVerified | boolean | readonly |
email | string | readonly |
phoneNumber | string | readonly |
providerId | string | readonly |
photoURL | string | readonly |
metadata | UserMetadata | readonly` |
providerData | UserInfo[] | readonly |
Method | Returns | Description |
---|---|---|
delete() | Promise<void> | For the description, see delete on the Firebase documentation. |
getIdToken(forceRefresh?: undefined | false | true) | Promise<string> | For the description, see getIdToken on the Firebase documentation. |
getIdTokenResult(forceRefresh?: undefined | false | true) | Promise<AuthTokenResult> | |
linkWithCredential(credential: AuthCredential) | Promise<UserCredential> | For the description, see linkWithCredential on the Firebase documentation. |
reauthenticateWithProvider(provider: OAuthProvider) | Promise<UserCredential> | |
reauthenticateWithCredential(credential: AuthCredential) | Promise<UserCredential> | For the description, see reauthenticateWithCredential on the Firebase documentation. |
reload() | Promise<void> | For the description, see reload on the Firebase documentation. |
sendEmailVerification(actionCodeSettings?: ActionCodeSettings) | Promise<void> | For the description, see sendEmailVerification on the Firebase documentation. |
unlink(providerId: string) | Promise<User> | For the description, see unlink on the Firebase documentation. |
updateEmail(email: string) | Promise<void> | For the description, see updateEmail on the Firebase documentation. |
updatePassword(password: string) | Promise<void> | For the description, see updatePassword on the Firebase documentation. |
updatePhoneNumber(credential: AuthCredential) | Promise<void> | For the description, see updatePhoneNumber on the Firebase documentation. |
updateProfile(updates: UserProfileChangeRequest) | Promise<void> | For the description, see updateProfile on the Firebase documentation. |
verifyBeforeUpdateEmail(email: string, actionCodeSettings?: ActionCodeSettings) | Promise<void> | For the description, see verifyBeforeUpdateEmail on the Firebase documentation. |
Property | Type | Description |
---|---|---|
additionalUserInfo | <AdditionalUserInfo> | |
user | <User> | |
credential | <AuthCredential> |
Property | Type | Description |
---|---|---|
newUser | boolean | |
profile | Record<string, any> | |
providerId | string | |
username | string |
| 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 |
Property | Type | Description |
---|---|---|
ios | readonly | |
android | readonly | |
signInMethod | string | |
idToken | string | readonly |
accessToken | string | readonly |
secret | string | readonly |
Apache License Version 2.0