FirebaseAuthenticationUi

Firebase Authentication UI is a Angular 6.x.x module. Get fast a Responsive User Interface ready for Firebase Authentication.

• Sign In Page
• Sign Up Page
• Sign Out Method
• AuthGuard to protect page

Before to install

You have to install AngularFire2 depedencies

npm install firebase @angular/fire --save 

Installation

npm install firebase-authentication-ui --save

Get Started

Configuration

In you app.module.ts file add following imports

import { AngularFireModule } from '@angular/fire';
import { AngularFireAuth } from '@angular/fire/auth';
import { FirebaseAuthenticationUiModule } from 'dist/firebase-authentication-ui';


@NgModule({
  declarations: [
      ...
  ],
  imports: [
      ...,
    AngularFireModule.initializeApp( {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: ""
    }),
    FirebaseAuthenticationUiModule.forRoot({
        signInLink:'signin',        //SignIn Link
        signUpLink:'signup',        //SignUp Link
        signOutLink:'',             //SignOut Link (Leave blank not use for the moment)
        defaultSignInRedirect:'',   //Link to redirect after SignIn
        authenticationOptions:
        {
            GoogleProvider:true,    //Active Google OAuth2 Authentication
            FacebookProvider:false, //Active Facebook OAuth2 Authentication
            TwitterProvider:false,  //Active Twitter OAuth2 Authentication
            GithubProvider:false,   //Active GitHub OAuth2 Authentication
            PhoneProvider:false,    //Active Phone Authentication
            EmailProvider:false     //Active Email/Password Authentication
        }
    })
  ],
  providers: [AngularFireAuth],
  ...
})

In your angular.json file

"assets": 
[
    ...
    {
    "glob": "**/*",
    "input": "node_modules/firebase-authentication-ui/assets",
    "output": "./assets/fireauthui"
    }
],

Component

Then you can use following component

• SignIn Component

<fireauthui-signin></fireauthui-signin>

Display the sign in form

• SignUp Component

<fireauthui-signup></fireauthui-signup>

Display the sign up form

Auth Guard

We create a service to help you to protect your component.

AuthGuard Service Documentation