Skip to content
Angular Material UI component for firebase authentication
TypeScript HTML JavaScript CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci fix(project): added all files again Sep 13, 2019
.github fix(project): added all files again Sep 13, 2019
.vscode fix(project): added all files again Sep 13, 2019
assets fix(project): added all files again Sep 13, 2019
config fix(project): added all files again Sep 13, 2019
demo fix(demo): updated firebase and other dependencies Oct 27, 2019
docs fix(project): added all files again Sep 13, 2019
src Towards fixing the phoneNumber field of User template... Nov 11, 2019
tools/gulp fix(project): added all files again Sep 13, 2019
tutorial/yourappname fix(project): added all files again Sep 13, 2019
.babelrc fix(project): added all files again Sep 13, 2019
.editorconfig fix(project): added all files again Sep 13, 2019
.gitignore fix(project): added all files again Sep 13, 2019
.npmignore fix(project): added all files again Sep 13, 2019
.nvmrc fix(project): added all files again Sep 13, 2019
.travis.yml fix(project): added all files again Sep 13, 2019
.yo-rc.json fix(project): added all files again Sep 13, 2019
CHANGELOG.md chore(release): bump version number to 3.4.2 Oct 10, 2019
FIRESTORE_SYNC.md fix(project): added all files again Sep 13, 2019
LICENSE fix(project): added all files again Sep 13, 2019
README.MD Fix components mismatched opening and closing tags Oct 9, 2019
bs-config.json fix(project): added all files again Sep 13, 2019
commitlint.config.js fix(project): added all files again Sep 13, 2019
gulpfile.js fix(project): added all files again Sep 13, 2019
karma.conf.js fix(project): added all files again Sep 13, 2019
ngx-auth-firebaseui-logo.png fix(project): added all files again Sep 13, 2019
package-lock.json fix(package): updated angular, firebase and other dependencies Oct 27, 2019
package.json fix(package): updated angular, firebase and other dependencies Oct 27, 2019
prettier.config.js fix(project): added all files again Sep 13, 2019
tsconfig.json fix(project): added all files again Sep 13, 2019
tslint.json fix(project): added all files again Sep 13, 2019
webpack.config.js fix(project): added all files again Sep 13, 2019

README.MD

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

npm version demo docs: typedoc codecov CircleCI branch Build Status Join the chat at https://gitter.im/ngx-auth-firebaseui/Lobby dependency Status devDependency Status npm Greenkeeper badge license GitHub forks GitHub stars GitHub followers Twitter URL Twitter Follow Awesome

ngx-auth-firebaseui-logo.png

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 📢

Table of Contents

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 Phonenumber ✔️
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 ✔️
Animations ✔️
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 ?

Library's components

  • <ngx-auth-firebaseui> used for the authentication process see more
  • <ngx-auth-firebaseui-register> standalone registration component to create new accounts see more
  • <ngx-auth-firebaseui-login> standalone login component to use already created accounts see more
  • <ngx-auth-firebaseui-providers> used to display only buttons for providers like google, facebook, twitter, github, microsoft and yahoo see more
  • <ngx-auth-firebaseui-user> used to display/edit the data of the current authenticated user in form of a material card see more
  • <ngx-auth-firebaseui-avatar> used to display/edit the data of the current authenticated user in the toolbar see more

Supported Providers:

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

Supported Processes and Actions:

Supported Angular Guards

  • LoggedInGuard used to protect angular routes from unauthenticated users (with fallback routes via NgxAuthFirebaseUIConfig)

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

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

| User Profile

when logged in

ngx-auth-firebaseui user profile component

in edit mode

ngx-auth-firebaseui edit user component

Screenshots - Reset Password

  • Before

ngx-auth-firebaseui on mobile

  • After

ngx-auth-firebaseui on mobile

Screenshot - i18n - multiple languages

ngx-auth-firebaseui on mobile


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

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 @angular/router

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
                  passwordMaxLength: 60, // `min/max` input parameters in components should be within this range.
                  passwordMinLength: 8, // Password length min/max in forms independently of each componenet min/max.
                  // Same as password but for the name
                  nameMaxLength: 50,
                  nameMinLength: 2,
                  // If set, sign-in/up form is not available until email has been verified.
                  // Plus protected routes are still protected even though user is connected.
                  guardProtectedRoutesUntilEmailIsVerified: true
                }),
  ],
  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> see the usage

<ngx-auth-firebaseui-login></ngx-auth-firebaseui-login> see the usage

<ngx-auth-firebaseui-register></ngx-auth-firebaseui-register> see the usage

<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers> see the usage

<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user> see the usage

<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar> see the usage

API

<ngx-auth-firebaseui></ngx-auth-firebaseui> see the api

<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-login> see the api

<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-register> see the api

<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers> see the api

<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user> see the api

<ngx-auth-firebaseui-user></ngx-auth-firebaseui-avatar> see the api

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.

  1. enter the fallback url in the NgxAuthFirebaseUIConfig under authGuardFallbackURL
  2. 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

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


Support

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


jetbrains logo

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


License

Copyright (c) 2019 Anthony Nahas. Licensed under the MIT License (MIT)

You can’t perform that action at this time.