- Intro
- Set up your app for Firebase
- Add the FirebaseUI for Auth SDK to your app
- Enable sign-in methods in the Firebase console
- Invoke the FirebaseUI auth flow
- API
With this plugin, you can use the FirebaseUI for Auth library in your NativeScript app. FirebaseUI for Auth is a library that provides a drop-in auth solution that handles the UI flows for signing up and signing in users with email and password, phone number, Google, Facebook, Twitter, and more.
You need to set up your app for Firebase before you can enable FirebaseUI for Auth. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the @nativescript/firebase-core plugin.
To add the FirebaseUI SDK to your app follow these steps:
- Install the
npm install @nativescript/firebase-uiplugin by running the following command in the root directory of your project.
npm install @nativescript/firebase-ui
- Add the SDK by importing the
@nativescript/firebase-messagingmodule once in your app, ideally in the main file (e.g.app.tsormain.ts).
import '@nativescript/firebase-ui';Just like with @nativescript/firebase-auth, you need to go to the Firebase console and enable the sign-in methods you want to offer to your users. For more information on how to do that, see Set up sign-in methods.
To invoke the FirebaseUI auth flow, call the show method on the UI object - returned by firebase().ui()- with an object of type Config specifying the auth options.
import { firebase } from '@nativescript/firebase-core';
import { AppleProvider, EmailProvider, GithubProvider, GoogleProvider, MicrosoftProvider, TwitterProvider, YahooProvider } from '@nativescript/firebase-ui';
firebase()
.ui()
.show({
providers: [
new AppleProvider(),
new GoogleProvider(),
new TwitterProvider(),
new GithubProvider(),
new EmailProvider(),
new MicrosoftProvider(),
new YahooProvider()],
})
.then((result: IIdpResponse) => {
console.log(result.user);
console.log(result.hasCredentialForLinking);
console.log(result.providerType);
})
.catch((error) => {
console.error('show error:', error);
});To sign out a user, call the signOut method on the UI object returned by firebase().ui().
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.signOut()
.then(() => {
console.log('signOut complete');
})
.catch((e) => {
console.error('signOut error:', e);
});The UI object provides the API for the FirebaseUI for Auth library and has the following members.
import { firebase } from '@nativescript/firebase-core';
uiAndroid: com.firebase.ui.auth.AuthUI = firebase().ui().android;A readonly property that returns the UI object for Android.
import { firebase } from '@nativescript/firebase-core';
uiIOS: FUIAuth = firebase().ui().ios;A readonly property that returns the UI object for iOS.
import { firebase } from '@nativescript/firebase-core';
app: FirebaseApp = firebase().ui().app;A readonly property that returns the FirebaseApp instance for your app.
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.useEmulator(host, port);Allows you to point a com.firebase.ui.auth.AuthUI instance to an emulator at a specific host and port.
| Param | Type | Description |
|---|---|---|
host |
string |
The host of the emulator. |
port |
number |
The port of the emulator. |
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.show(config)
.then((result: IIdpResponse) => {
console.log(result.user);
console.log(result.hasCredentialForLinking);
console.log(result.providerType);
})
.catch((error) => {
console.error('show error:', error);
});Presents auth UI with a list of federated identity providers (IDPs) that a user can choose from to sign in or sign up with. If the user chooses to sign in with a federated IDP, the sign-in flow will be completed using the IDP's sign-in SDK and the returned IDP credential will be linked to the current user. This method returns a Promise that resolves with an IIdpResponse object.
| Param | Type | Description |
|---|---|---|
config |
Config | The config parameter specifies auth options such as federated identity providers list to use for user auth and more. |
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.delete()
.then(() => {
console.log('delete complete');
})
.catch((e) => {
console.error('delete error:', e);
});Asynchronously deletes the current user's account.
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.signOut()
.then(() => {
console.log('signOut complete');
})
.catch((e) => {
console.error('signOut error:', e);
});Asynchronously signs out the current user.
The Config object specifies the auth flow options such as the available identity providers, email link, the UI theme and other options.
export interface Config {
providers: IProvider[];
anonymousUsersAutoUpgrade?: boolean;
emailLink?: string;
resetPasswordSettings?: IActionCodeSettings;
theme?: number; // Android only
lockOrientation?: boolean;
tosAndPrivacyPolicy?: {
tos: string;
privacyPolicy: string;
};
alwaysShowSignInMethodScreen?: boolean;
}When the show method of the UI object resolves successfully, it returns the IIdpResponse object which has the following members.
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.show(config)
.then((result: IIdpResponse) => {
responseAndroid: com.firebase.ui.auth.IdpResponse = result.android;
})
.catch((error) => {
console.error('show error:', error);
});A read-only property that returns the IdpResponse instance for Android.
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.show(config)
.then((result: IIdpResponse) => {
responseIOS: com.firebase.ui.auth.IdpResponse = result.ios;
})
.catch((error) => {
console.error('show error:', error);
});A read-only property that returns the IdpResponse instance for iOS.
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.show(config)
.then((result: IIdpResponse) => {
isNewUser: boolean = result.isNewUser;
})
.catch((error) => {
console.error('show error:', error);
});Returns true if the user has just signed up for the first time, otherwise false.
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.show(config)
.then((result: IIdpResponse) => {
hasCredentialForLinking: boolean = result.hasCredentialForLinking;
})
.catch((error) => {
console.error('show error:', error);
});Returns true if any of the federated identity providers (IDPs) has credentials for the user to link Firebase account with, otherwise false.
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.show(config)
.then((result: IIdpResponse) => {
email: string = result.email;
})
.catch((error) => {
console.error('show error:', error);
});Returns the emails the user used to sign in.
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.show(config)
.then((result: IIdpResponse) => {
idpSecret: boolean = result.idpSecret;
})
.catch((error) => {
console.error('show error:', error);
});(Twitter only)Returns the token secret received as a result of logging in with Twitter.
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.show(config)
.then((result: IIdpResponse) => {
idpToken: boolean = result.idpToken;
})
.catch((error) => {
console.error('show error:', error);
});Gets the token received as a result of logging in with the specified IDP.
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.show(config)
.then((result: IIdpResponse) => {
phoneNumber: string = result.phoneNumber;
})
.catch((error) => {
console.error('show error:', error);
});Gets the phone number used to sign in.
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.show(config)
.then((result: IIdpResponse) => {
providerType: string = result.providerType;
})
.catch((error) => {
console.error('show error:', error);
});Gets the type of provider. e.g. {@link GoogleAuthProvider#PROVIDER_ID}.
import { firebase } from '@nativescript/firebase-core';
firebase()
.ui()
.show(config)
.then((result: IIdpResponse) => {
user: User = result.user;
})
.catch((error) => {
console.error('show error:', error);
});Returns the user data object.
This object represents the user data provided by a federated identity provider (IDP).
userAndroid: com.firebase.ui.auth.data.model.User = user.android;A read-only property that returns the User instance for Android.
userIOS: FIRUser = user.ios;A read-only property that returns the FIRUser instance for iOS.
name: string = user.name;A read-only property that returns the user's display name.
email: string = user.email;A read-only property that returns the email of the user.
phoneNumber: string = user.phoneNumber;A read-only property that returns the phone number of the user.
photoUri: string = user.photoUri;A read-only property that returns the user's profile photo URL.
providerId: string = user.providerId;A read-only property that returns a string that uniquely identifies the identity provider providing the current user's data.
Apache License Version 2.0