@nativescript/firebase-ui

Contents

• 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
  • Sign out a user
• API
  • UI object
    • android
    • ios
    • app
    • useEmulator()
    • show()
    • delete()
    • signOut()
  • Config interface
  • IIdpResponse object
    • android
    • ios
    • isNewUser
    • hasCredentialForLinking
    • email
    • idpSecret
    • idpToken
    • phoneNumber
    • providerType
    • user
  • User object
    • android
    • ios
    • name
    • email
    • phoneNumber
    • photoURI
    • providerId

Intro

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.

Set up your app for Firebase

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.

Add the FirebaseUI for Auth SDK to your app

To add the FirebaseUI SDK to your app follow these steps:

1. Install the npm install @nativescript/firebase-ui plugin by running the following command in the root directory of your project.

npm install @nativescript/firebase-ui

2. Add the SDK by importing the @nativescript/firebase-messaging module once in your app, ideally in the main file (e.g. app.ts or main.ts).

import '@nativescript/firebase-ui';

Enable sign-in methods in the Firebase console

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.

Invoke the FirebaseUI auth flow

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);
    });

Sign out a user

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);
    });

API

UI object

The UI object provides the API for the FirebaseUI for Auth library and has the following members.

android

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.

ios

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

uiIOS: FUIAuth = firebase().ui().ios;

A readonly property that returns the UI object for iOS.

app

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

app: FirebaseApp = firebase().ui().app;

A readonly property that returns the FirebaseApp instance for your app.

useEmulator()

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.

show()

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.

delete()

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.

signOut()

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.

Config interface

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;
}

IIdpResponse object

When the show method of the UI object resolves successfully, it returns the IIdpResponse object which has the following members.

android

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.

ios

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.

isNewUser

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.

hasCredentialForLinking

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.

email

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.

idpSecret

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.

idpToken

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.

phoneNumber

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.

providerType

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

user

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.

User object

This object represents the user data provided by a federated identity provider (IDP).

android

userAndroid: com.firebase.ui.auth.data.model.User = user.android;

A read-only property that returns the User instance for Android.

ios

userIOS: FIRUser = user.ios;

A read-only property that returns the FIRUser instance for iOS.

name

name: string = user.name;

A read-only property that returns the user's display name.

email

email: string = user.email;

A read-only property that returns the email of the user.

phoneNumber

phoneNumber: string = user.phoneNumber;

A read-only property that returns the phone number of the user.

photoUri

photoUri: string = user.photoUri;

A read-only property that returns the user's profile photo URL.

providerId

providerId: string = user.providerId;

A read-only property that returns a string that uniquely identifies the identity provider providing the current user's data.

License

Apache License Version 2.0