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

$3

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"
}
],
`

$3

Then you can use following component
- SignIn Component
`

`
Display the sign in form
- SignUp Component
`

``
Display the sign up form

$3

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

AuthGuard Service Documentation