Angular Material User Interface for firebase authentication with ngx-auth-firebaseui



ngx-auth-firebaseui vs firebaseui

Let’s take a deep look to some of ngx-auth-firebaseui’s features

Registration — Sign Up

Sign in

Sign in with google, facebook, twitter or github (optional)

Sign in/up progress indicator

Password Strength indicator

Forgot/Reset Password

User Profile

  1. Check whether user’s email is verified
  2. Edit user’s display name (incl. validation)
  3. Edit user’s email (incl. validation)
  4. Edit user’s phone number (incl. validation)
  5. Delete account

Sync user’auth with Firestore — AWESOME FEATURE

  • with google
  • anonymously

Ready to go ? Then pick your favorite IDE or editor and open your angular project to integrate a beautiful material user interface for firebase’s authentication with ngx-auth-firebaseui

Peer dependencies

npm i -s @angular/material@6.3.0 @angular/cdk@6.3.0
npm i -s @angular/flex-layout@6.0.0-beta.16
  • @angular/animations — required by @angular/material’ s module to allow web animations
npm i -s @angular/animations@6.0.6
  • @angular/forms — needed for form controllers and input validations
npm i -s @angular/forms@6.0.6
  • angularfire2 — the official library for firebase and angular
  • firebase - required by the angularfire2’s package

Install ngx-auth-firebaseui

npm i -s ngx-auth-firebaseui
import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
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';
declarations: [
imports: [
BrowserAnimationsModule, // please do not forget this module
// Specify the ngx-auth-firebaseui library as an import
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 { }
import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';@NgModule({
declarations: [OtherComponent, ...],
imports: [NgxAuthFirebaseUIModule, ...],
export class OtherModule {
map: {
'ngx-auth-firebaseui': 'node_modules/ngx-auth-firebaseui/bundles/ngx-auth-firebaseui.umd.js',

Preparing some extra stuff

  • Integration of a material theme
  • Integration of the material design icons
  • Import ngx-auth-firebaseui’s assets (svg needed for the authentication providers)

Material Theme

  • First Option and the easiest one:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
  • Alternative — the more advanced way — material custom theme
@import '../node_modules/@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@import "ngx-auth-firebaseui_theme";
“styles”: [

Material Design Icons

  • First Option and the easiest one:
<link href="" rel="stylesheet">
  • Alternative
npm i -s material-design-icons
"styles": [

Import the assets of ngx-auth-firebaseui

With Angular CLI

  • open theangular.json file
  • add the following into the assets section
"glob": "**/*",
"input": "node_modules/ngx-auth- firebaseui/dist/assets/",
"output": "./assets/"
  • after that the required images will be copied to the assets dir and will be available for the app.
  • finally the assets section should be in a way similar to that -->
"assets": [
"glob": "**/*",
"input": "node_modules/ngx-auth-firebaseui/dist/assets/",
"output": "./assets/"

Without Angular CLI



<!-- You can now use the library component in app.component.html  --><ngx-auth-firebaseui (onSuccess)="printUser($event)"
<!-- or simply in the app.component.ts -->
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
class AppComponent {
printUser(event) {
printError(event) {


  • If you need to customize your ngx-auth-firebaseui component, please take a look at these examples or check the official readme
  • A demo is already online on host by firebase:
  • The official documentation can be found here
  • Found a bug or you have a new feature to request? Please do not hesitate! Contributions are always welcome


Other angular material extensions:




Set of open source extensions libraries built with and for angular material

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anthony Nahas

Founder of and Freelancer Software Developer sticking with the future and (#NodeJS #Angular #Google #Firebase #Ionic )