❀Nanometer Process Machine
    Have ideas to improve npm?Join in the discussion! Β»

    ngx-auth-firebaseui
    TypeScript icon, indicating that this package has built-in type declarations

    5.3.0Β β€’Β PublicΒ β€’Β Published

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

    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 Apple βœ”οΈ βœ”οΈ
    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 ?

    • πŸ’ it uses a responsive and accessible web design UX/UI from google material concepts and components (supporting desktop, tablet and mobile view) incl. smooth animations for a better UX.
    • πŸ’„ 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
    • support of i18n

    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
    • apple
    • facebook
    • twitter
    • github
    • Microsoft
    • Yahoo
    • phone number πŸ”œ

    Supported Processes and Actions:

    • sign up
    • sign in
    • sign in Anonymously | with google, apple, 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

    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": "^11.x",
        "@angular/animations": "^11.x",
        "@angular/cdk": "^11.x",
        "@angular/flex-layout": "^11.0.0-beta.33",
        "@angular/forms": "^11.x",
        "@angular/material": "^11.x",
        "@angular/fire": "6.x",
        "firebase": "8.x",
      }

    NOTE:

    v1.x should be used with angular v7 projects v3.x should be used with angular v8 projects v4.x should be used with angular v9/10 projects v5.x should be used with angular v11 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

    Install the dependencies @angular-material-extensions/password-strength via:

    npm install --save @angular-material-extensions/password-strength
    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,
                      enableEmailVerification: true, // default: true
                      useRawUserCredential: true, // If set to true outputs the UserCredential object instead of firebase.User after login and signup - Default: false
                    }),
      ],
      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-login></ngx-auth-firebaseui-login> see the api

    <ngx-auth-firebaseui-register></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-avatar></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 πŸ‘Š


    Youtube Videos

    https://www.youtube.com/watch?v=qP5zw7fjQgo&feature=emb_logo&ab_channel=Fireship https://www.youtube.com/watch?v=KpfJCEvpS9g&t=2s&ab_channel=JsWiz

    Sponsors

    jetbrains logo

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

    fireship.io logo

    Best angular and firebase stuff by Jeff Delaney on firebase.io

    check this out


    License

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

    Install

    npm i ngx-auth-firebaseui

    DownloadsWeekly Downloads

    848

    Version

    5.3.0

    License

    MIT

    Unpacked Size

    1.36 MB

    Total Files

    140

    Last publish

    Collaborators

    • avatar