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

Published in

@angular-material-extensions

8 min readJun 26, 2018

ngx-auth-firebaseui

Open source UI library to allow user’s authentication with any firebase project built with and for the angular community.

Motivation

Last year, I started to develop some projects using the MEAN stack (MongoDB, Express, Angular and NodeJS) and someday I noticed that the development of those apps takes a little much time! So I came across firebase to move from MEAN stack to serverless stack apps! Firebase is really awesome! You can implement an authentication feature within minutes, upload files without to care about security issue.. and more!

For these reasons, I started to develop angular apps powered by firebase! A common task for every project was “User’s authentication”. So I searched for an appropriate solution and I found the firebaseui-web which is developed and maintained by google/the firebase team. It’s a simple library that provides an user interface for firebase’s authentication. However, the integration of firebaseui in an angular project was not the way like I expected! I’ve couldn’t simply import a module into my project to use it. Some people have developed a wrapper for that but unfortunately this solved few problems and generated others!

Furthermore, firebaseui didn’t support angular universal and server side rendering. That was a good opportunity for me to go ahead and open my first issue on github here #213. For some reasons, they ignored and rejected the issue by replying:

“Server side rendering is not supported and not on our current roadmap.”

At that moment, I realized that either removing firebaseui from my project or implement another one from scratch could solve and save my angular universal app to be rendered on the server side with NodeJS.

Indeed, that was really the motivation behind developing an alternative library to that, the ngx-auth-firebaseui, supporting server side rendering and even more features!

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

For this feature, I developed ngx-material-password-strength to indicate how secure is the provided password. This project has been moved from ngx-material-password-strength to @angular-material-extensions/password-strength

Forgot/Reset Password

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

This project rely on some external libraries:

Please skip the appropriate section, if you have the peer dependencies already installed

@angular/cdk and @angular/material — frontend framework for angular

npm i -s @angular/material@6.3.0 @angular/cdk@6.3.0

@angular/flex-layout — to make the UI responsive using flex layout pattern

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

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, // please do not forget this module    // 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',
}

Preparing some extra stuff

In order ngx-auth-firebaseui to be rendered correctly, we need to do these additonal steps:

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:

Open the styles.css file and add the following line to import a default material theme provided by the @angular/material package

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

If you are not using the Angular CLI, you can include a prebuilt theme via a <link> element in your index.html. e.g:

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

Alternative — the more advanced way — material custom theme

In the src directory, create a new scss file e.g: “ngx-auth-firebaseui_theme”

and paste the following content:

@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!
@include mat-core();

// 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.
@include angular-material-theme($candy-app-theme);

After that, import this file into your style.css file (recommended):

@import "ngx-auth-firebaseui_theme";

or just add the path of ngx-auth-firebaseui_theme.scss in your angular.json file:

“styles”: [
 “src/styles.scss”,
 “src/ngx-auth-firebaseui_theme.scss”
],

Material Design Icons

First Option and the easiest one:

open the index.html file and add the following link to import the icons:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Alternative

Install of the official npm module of the material design icons

npm i -s material-design-icons

and import them into your angular.json file

"styles": [
        "styles.css",
        "../node_modules/material-design-icons/iconfont/material-icons.css"
      ],

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": [
        "assets",
        "favicon.ico",
        {
          "glob": "**/*",
          "input": "node_modules/ngx-auth-firebaseui/dist/assets/",
          "output": "./assets/"
        }
      ]

Without Angular CLI

copy the assets directory into the root of your project, so that your app can get the required images for the UI. This is an example of requesting an image from the library Request URL:http://localhost:4200/assets/google.svg. Please make sur that the images will be hosted in the right place

Now we are ready to go !

Usage

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

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

in your template:

<!-- You can now use the library component in app.component.html  --><ngx-auth-firebaseui (onSuccess)="printUser($event)"
                     (onError)="printError()">
</ngx-auth-firebaseui>

in your component:

<!-- or simply in the app.component.ts -->
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
class AppComponent {    printUser(event) {
        console.log(event);
    }    printError(event) {
        console.error(event);
    }
}

Extras

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: https://ngx-auth-firebaseui.firebaseapp.com/
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

Summary

Previously, I told you how I came across firebase and why I developed ngx-auth-firebaseui. Then we compared my library with firebaseui and took a deep look to its features. Afterwards, we setup together all what we need to run ngx-auth-firebaseui like angular material and the other peer dependencies, material theme, material design icons and the assets. Finally, we installed and integrated the library in our angular project.

If you liked this project, please support ngx-auth-firebaseui by starring it here on github and sharing it with your friends.

Other angular material extensions:

Author

Anthony Nahas, founder of nahaus.de and fullstack software developer experienced in: #Angular #NodeJS #SSR #MongoDB #Android #Google #Firebase #Docker #Dagger2 #Cordova #Ionic #WEB #APP #PWA

Github: https://github.com/AnthonyNahas

Twitter: https://twitter.com/ngAnthonyy

Web: https://anahas.de

My Property Management SaaS: https://nahaus.de