ngx-auth-firebaseui - Open Source Library for Angular Web Apps to integrate a material user interface for firebase authentication.

Angular UI component for firebase authentication. This library is an angular module (including angular components and services) that allows to authenticate your users with your firebase project. NgxAuthFirebseUI is compatible with angular material and angular flexLayout.

If you prefer to develop with bootstrap rather than with material design, please check this project @firebaseui/ng-bootstrap

Built by and for developers ❤️

Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here

If you like this project, support ngx-auth-firebaseui by starring ⭐ and sharing it 📢

ngx-auth-firebaseui vs firebaseui-web

Features	ngx-auth-firebaseui	firebaseui
Sign Up	✔️	✔️
Sign In	✔️	✔️
Sign In Anonymously	✔️	✔️
Sign In with Google	✔️	✔️
Sign In with Facebook	✔️	✔️
Sign In with Twitter	✔️	✔️
Sign In with Github	✔️	✔️
Sign In with Microsoft	✔️	✔️
Sign In with Yahoo	✔️	✔️
Sign In with Phone`number`	❌	✔️
Sign out	✔️	❌
Sign in/up progress indicator	✔️	❌
Password Strength indicator	✔️	❌
Forgot/Reset Password	✔️	❌
Password Strength Meter	✔️	❌
Delete account	✔️	❌
Login Authentication Guard	✔️	❌
User Profile	✔️	❌
Check whether user's email is verified	✔️	❌
Edit user's display name (incl. validation)	✔️	❌
Edit user's email (incl. validation)	✔️	❌
Edit user's phone `number` (incl. validation)	✔️	❌
Configure your favorite auth provider in runtime	✔️	❌
Sync user'auth with Firestore read more	✔️	❌
Angular v2-8 friendly	✔️	❌
Internationalization (i18n)	✔️	✔️
Ionic/cordova support	🔜 @firebaseui/ionic-auth	❌
Real time form validation	✔️	❌
Easy to integrate	✔️	❌
Support Server Side Rendering	✔️	❌
Support SPA without further config	✔️	❌
Support Safari private browsing	✔️	⁉️
AWESOME	✔️	⁉️

Why to use ngx-auth-firebaseui ?

💝 it uses a responsive and accessible web design UX/UI from google material concepts and components (supporting desktop and mobile view).
💄 pick up your own theme! change the primary, accent and warn colors whenever you need (e.g to support light and dark themes)
🚢 super easy to use with an angular based project (project that is created with the angular-cli)
🔜 optional configuration
♻️ configure your authentication providers in runtime
♻️ reusable components for every project that needs an authentication with a firebase project/app.
🛃 built in feedback mechanism in form of a snackbar when an error or any important event occurred.
🆘 ability to sign out or even to delete totally the account
👻 your client does not want to create an account in your project? Let him to sign in anonymously!
👥 user profile component to display user's data using via ngx-auth-firebaseui-user
⚡ update user profile as feature
🔥 Sync user's authentication with FIRESTORE AUTOMATICALLY
💪 Forgot Password feature! Go and let your users to recover their passwords easily
🎉 Supports SSR - Server Side Rendering

Library's components

<ngx-auth-firebaseui> used for the authentication process
<ngx-auth-firebaseui-providers> used to display only buttons for providers like google, facebook, twitter, github, microsoft and yahoo
<ngx-auth-firebaseui-user> used to display/edit the data of the current authenticated user in form of a material card
<ngx-auth-firebaseui-avatar> used to display/edit the data of the current authenticated user in the toolbar

Supported Providers:

anonymously
email and password (traditional)
google
facebook
twitter
github
Microsoft
Yahoo
phone number 🔜

Supported Processes and Actions:

sign up
sign in
sign in Anonymously | with google, facebook, twitter, github, microsoft, yahoo
sign out
validation of password's strength while creating a new account using @angular-material-extensions/password-strength
forgot/reset password
sending email verifications
delete user's account
edit user's profile like email, name, (profile picture 🔜) and phone number
firestore auto sync 🔥
do not allow users to create new accounts before checking the terms of services and private policy - for mor info check this here

angular material theme
angular material icons
angular cdk - v8.x
angular material - v8.x
angular forms - v8.x
angular animations - v8.x
angular flex-layout v8.0.0-beta.26
@angular/fire - v5.2.x
firebase - v6.x

the full tutorial guide can be found here

Demo | Features | Examples

take a look at live example with firestore's synchronization here

Screenshots - Browser

sign in

v8

ngx-auth-firebaseui sign in

in combination with ngx-auth-firebaseui-user

ngx-auth-firebaseui sign in

v7

ngx-auth-firebaseui sign in

Sign up - registration

before

ngx-auth-firebaseui sign up

after

ngx-auth-firebaseui sign up

demo outlook

ngx-auth-firebaseui sign up

Screenshots - Client Side Validation

ngx-auth-firebaseui sign up

Screenshots

row layout

Please note: when the view port is getting too small, the layout will be automatically change to column

ngx-auth-firebaseui sign up

column layout

ngx-auth-firebaseui sign up

Screenshots

user profile

when logged out

ngx-auth-firebaseui user profile component

when logged in

ngx-auth-firebaseui user profile component

in edit mode

ngx-auth-firebaseui edit user component

Screenshot - Mobile Browser

Sign in - mobile

ngx-auth-firebaseui on mobile

Screenshots - Reset Password

Before

ngx-auth-firebaseui on mobile

After

ngx-auth-firebaseui on mobile

Screenshot - i18n - multiple languages

Peer Dependencies - please make sure that peerDependencies are installed if you are not using the schematics

"peerDependencies": {
    "@angular/core": "^8.x",
    "@angular/animations": "^8.x",
    "@angular/cdk": "^8.x",
    "@angular/flex-layout": "^8.0.0-beta.26",
    "@angular/forms": "^8.x",
    "@angular/material": "^8.x",
    "@angular/fire": "5.2.x",
    "firebase": "6.x",
  }

NOTE:

If you are still running angular v5, please consider to user ngx-auth-firebaseui v0.x

v1.x should be used with angular v7 projects v3.x should be used with angular v8 projects

help!

Dependencies

Angular (requires Angular 2 or higher, developed with 8.x) - obviously
@angular-material-extensions/password-strength

the @angular-material-extensions/password-strength is used to indicate how secure is the provided password when registering a new firebase user e.g:

(1) Installation

1. Install via ng add. (Recommended)

If Angular Material Design is not setup, just run ng add @angular/material learn more

Now add the library via the angular schematics

ng add ngx-auth-firebaseui

✔️ peer dependencies will be automatically added the package.json and installed
✔️ ngx-auth-firebaseui 's module will be automatically imported to the root module (just replace PUT_YOUR_FIREBASE_API_KEY_HERE with your firebase api key)
✔️ ngx-auth-firebaseui 's assets will be automatically added the angular.json file

2. Install via npm. (Alternative)

Install above dependencies via npm.

Now install ngx-auth-firebaseui via:

npm install --save ngx-auth-firebaseui

npm i -s @angular/material @angular/cdk @angular/flex-layout @angular/forms @angular/animations

Firebase deps

npm i -s firebase @angular/fire

-> continue by following the instructions here

Once installed you need to import the main module:

import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgxAuthFirebaseUIModule .forRoot()):

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    // Specify the ngx-auth-firebaseui library as an import
    NgxAuthFirebaseUIModule.forRoot({
                    apiKey: 'your-firebase-apiKey',
                    authDomain: 'your-firebase-authDomain',
                    databaseURL: 'your-firebase-databaseURL',
                    projectId: 'your-firebase-projectId',
                    storageBucket: 'your-firebase-storageBucket',
                    messagingSenderId: 'your-firebase-messagingSenderId'
                }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Other modules in your application can simply import NgxAuthFirebaseUIModule:

import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgxAuthFirebaseUIModule, ...],
})
export class OtherModule {
}

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for ngx-auth-firebaseui:

map: {
  'ngx-auth-firebaseui': 'node_modules/ngx-auth-firebaseui/bundles/ngx-auth-firebaseui.umd.js',
}

(2) Configuration

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    // Specify the ngx-auth-firebaseui library as an import
    NgxAuthFirebaseUIModule.forRoot(
                {
                  apiKey: 'your-firebase-apiKey',
                  authDomain: 'your-firebase-authDomain',
                  databaseURL: 'your-firebase-databaseURL',
                  projectId: 'your-firebase-projectId',
                  storageBucket: 'your-firebase-storageBucket',
                  messagingSenderId: 'your-firebase-messagingSenderId'
                },
                 () => 'your_app_name_factory',
                {
                  enableFirestoreSync: true, // enable/disable autosync users with firestore
                  toastMessageOnAuthSuccess: false, // whether to open/show a snackbar message on auth success - default : true
                  toastMessageOnAuthError: false, // whether to open/show a snackbar message on auth error - default : true
                  authGuardFallbackURL: '/loggedout', // url for unauthenticated users - to use in combination with canActivate feature on a route
                  authGuardLoggedInURL: '/loggedin', // url for authenticated users - to use in combination with canActivate feature on a route
                }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

(3) Usage

Once the library is imported, you can use its components, directives and pipes in your Angular application:

`<ngx-auth-firebaseui></ngx-auth-firebaseui>`

<!-- You can now use the library component in app.component.html  -->

<ngx-auth-firebaseui (onSuccess)="printUser($event)"
                     (onError)="printError()">
</ngx-auth-firebaseui>

or

<!-- or simply in the app.component.ts -->
@Component({
    selector: 'app',
    template: `
        <ngx-auth-firebaseui (onSuccess)="printUser($event)" (onError)="printError()"></ngx-auth-firebaseui>`
})
class AppComponent {

    printUser(event) {
        console.log(event);
    }

    printError(event) {
        console.error(event);
    }
}

Result:

`<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers>`

<!-- You can now use the library component in app.component.html  -->
<ngx-auth-firebaseui-providers layout="column"></ngx-auth-firebaseui-providers>

`<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user>`

<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user>

Result:

`<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>`

<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>

API

`<ngx-auth-firebaseui></ngx-auth-firebaseui>`

option	bind	type	default	description
providers	`Input()`	``string`[]`	['all'] or [AuthProvider.All]	choose your favorite authentication provider: google
appearance	`Input()`	`MatFormFieldAppearance`	`standard`	the appearance of the mat-form-field #'legacy'
tabIndex	`Input()`	`number`	null;	`0`
registrationEnabled	`Input()`	`boolean`	`true`	whether the user is able to register a new account
resetPasswordEnabled	`Input()`	`boolean`	`true`	whether the user is able to reset his account password
guestEnabled	`Input()`	`boolean`	`true`	whether the user can sign in and continue as guest
tosUrl	`Input()`	`string`	-	the url of term of services
privacyPolicyUrl	`Input()`	`string`	-	the url of the private privacy
goBackURL	`Input()`	`string`	-	the url to redirect to after creating a new user and clicking the `go back` button - the button is only available when the input is provided
messageOnAuthSuccess	`Input()`	`string`	see the code ->	the message of the snackbar when the authentication process was successful
messageOnAuthError	`Input()`	`string`	see the code ->	the message of the snackbar when the authentication process has failed
onSuccess	`Output()`	`any`	-	this will be fired when an authentication process was success. The authenticated user is emitted!
onError	`Output()`	`any`	-	this event will be fired when an error occurred during the authentication process! An error message is emitted!
selectedTabChange	`Output()`	MatTabChangeEvent	-	output event is emitted when the active tab changes (signin, register and reset password tab)
enableLengthRule	`Input()`	`boolean`	`true`	whether to validate the length of the password
enableLowerCaseLetterRule	`Input()`	`boolean`	`true`	whether a lowercase letter is optional
enableUpperCaseLetterRule	`Input()`	`boolean`	`true`	whether a uppercase letter is optional
enableDigitRule	`Input()`	`boolean`	`true`	whether a digit char is optional
enableSpecialCharRule	`Input()`	`boolean`	true	whether a special char is optional
min	`Input()`	`number`	8	the minimum length of the password
max	`Input()`	`number`	30	the maximum length of the password
onStrengthChanged	`Output()`	`number`	-	emits the strength of the provided password in % e.g: 20%, 40%, 60%, 80% or 100%

if you prefer to customize the text of this component, check these inputs here that have been used for translations

PS: if either tosUrl or privacyPolicyUrl` are provided, the user will be asked to check and accepts tos and pp before registering a new account or sign in in anonymously

How to disable users to sign in and continue as guest, use the `guestEnabled` input

<ngx-auth-firebaseui [guestEnabled]="false"
                     (onSuccess)="printUser($event)"
                     (onError)="printError($event)">
</ngx-auth-firebaseui>

Result:

How to configure your input providers ? see the examples

e.g: in your component, import the AuthProvider enum to pick up your favorite provider:

import {OnInit} from '@angular/core';
import {AuthProvider} from 'ngx-auth-firebaseui';

export class ExampleComponent implements OnInit {

  providers = AuthProvider;

  ngOnInit() {
  }
}

in your template -->

  <ngx-auth-firebaseui
  [providers]="[providers.Google, providers.Facebook, providers.Twitter]"
  (onSuccess)="printUser($event)"
   (onError)="printError()"></ngx-auth-firebaseui>

or

  <ngx-auth-firebaseui
  [providers]="['google', 'facebook', 'twitter']"
  (onSuccess)="printUser($event)"
  (onError)="printError()">
</ngx-auth-firebaseui>

take a look at the full documentation here

`<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers>`

option	bind	type	default	description
layout	`Input()`	`string`	`row`	set the layout of the providers buttons options: 'column' or 'row'
theme	`Input()`	`string`	`default`	set the theme of the providers buttons options: '', 'classic', 'stroked', 'fab', 'mini-fab', 'raised',
onSuccess	`Output()`	`any`	-	this will be fired when an authentication process was success. The authenticated user is emitted!
onError	`Output()`	`any`	-	this event will be fired when an error occurred during the authentication process! An error message is emitted!

e.g: in template:

<ngx-auth-firebaseui-providers [theme]="themes.CLASSIC"></ngx-auth-firebaseui-providers>
<ngx-auth-firebaseui-providers [theme]="themes.STROKED"></ngx-auth-firebaseui-providers>
<ngx-auth-firebaseui-providers [theme]="themes.RAISED"></ngx-auth-firebaseui-providers>
<ngx-auth-firebaseui-providers [theme]="themes.FAB"></ngx-auth-firebaseui-providers>
<ngx-auth-firebaseui-providers [theme]="themes.MINI_FAB"></ngx-auth-firebaseui-providers>

in your component:

import {Component} from '@angular/core';
import {AuthProvider, Theme} from 'ngx-auth-firebaseui';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

  themes = Theme;
}

`<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user>`

option	bind	type	default	description
editMode	`Input()`	`boolean`	false	whether the use is in edit mode
canLogout	`Input()`	`boolean`	true	whether to render the logout button
canDeleteAccount	`Input()`	`boolean`	true	whether to render the delete account button
appearance	`Input()`	`MatFormFieldAppearance`	-	the style of the mat-input-form
onSignOut	`Output()`	void	-	this will be fired when the user signs out
onAccountDeleted	`Output()`	void	-	this will be fired when the user deletes his account

`<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>`

option	bind	type	default	description
canLogout	`Input()`	`boolean`	true	whether to render the logout button
links	`Input()`	`LinkMenuItem[]`	-	additional routes and links to add to the component
onSignOut	`Output()`	void	-	this will be fired when the user signs out

EXTRA TIP: Login Authentication Guard

If you want to prevent a route to be accessed from non authorized users, you can use a built in LoggedInGuard angular router guard.

enter the fallback url in the NgxAuthFirebaseUIConfig under authGuardFallbackURL
enter the logged in url in the NgxAuthFirebaseUIConfig under authGuardLoggedInURL

import {NgxAuthFirebaseUIModule} from 'ngx-auth-firebaseui';


NgxAuthFirebaseUIModule.forRoot(firebaseKey, firebaseAppNameFactory,
    {
      authGuardFallbackURL: 'examples/logged-out',
      authGuardLoggedInURL: 'examples/logged-in',
    }),

if the user is logged in, he will be redirected to examples/logged-in route (per example), otherwise he will be redirected to the examples/logged-out route

import the LoggedInGuard in your router module

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

import {LoggedInGuard} from 'ngx-auth-firebaseui';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'secured',
    loadChildren: 'app/secured/secured.module#SecuredModule',
    canActivate: [LoggedInGuard]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Other Angular Libraries

@firebaseui/ng-bootstrap
ngx-linkifyjs
@angular-material-extensions/password-strength
@angular-material-extensions/google-maps-autocomplete
@angular-material-extensions/pages
@angular-material-extensions/link-preview
@angular-material-extensions/contacts
@angular-material-extensions/faq
@angular-material-extensions/jumbotron
angular-material-extensions/freelancer-theme
@angular-material-extensions/combination-generator

Support

Drop an email to: Anthony Nahas
or open an appropriate issue
let us chat on Gitter

Built by and for developers ❤️ we will help you 👊

This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm

Files

README.MD

Latest commit

History

README.MD

File metadata and controls

ngx-auth-firebaseui - Open Source Library for Angular Web Apps to integrate a material user interface for firebase authentication.

Built by and for developers ❤️

Table of Contents

ngx-auth-firebaseui vs firebaseui-web

Why to use ngx-auth-firebaseui ?

Library's components

Supported Providers:

Supported Processes and Actions:

Demo | Features | Examples

Screenshots - Browser

before

after

demo outlook

Screenshots - Client Side Validation

Screenshots

row layout

column layout

Screenshots

when logged out

when logged in

in edit mode

Screenshot - Mobile Browser

Screenshots - Reset Password

Screenshot - i18n - multiple languages

Peer Dependencies - please make sure that peerDependencies are installed if you are not using the schematics

NOTE:

Dependencies

(1) Installation

1. Install via ng add. (Recommended)

2. Install via npm. (Alternative)

SystemJS

(2) Configuration

(3) Usage

<ngx-auth-firebaseui></ngx-auth-firebaseui>

Result:

<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers>

<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user>

Result:

<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>

API

<ngx-auth-firebaseui></ngx-auth-firebaseui>

How to disable users to sign in and continue as guest, use the guestEnabled input

How to configure your input providers ? see the examples

<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers>

<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user>

<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>

EXTRA TIP: Login Authentication Guard

Other Angular Libraries

Support

License

`<ngx-auth-firebaseui></ngx-auth-firebaseui>`

`<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers>`

`<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user>`

`<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>`

`<ngx-auth-firebaseui></ngx-auth-firebaseui>`

How to disable users to sign in and continue as guest, use the `guestEnabled` input

`<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers>`

`<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user>`

`<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>`