Firebase provides a very simple way to set up authentication in web and mobile apps. It is very easy to integrate with your application and can be configured to be used with various different social authentication providers such as Facebook, Google, Github, Twitter, etc. By integrating these authentication providers, users can use their existing social accounts to perform the login on your web or mobile application. It also allows users to register with email and password or phone number accounts. <\/p>\n
Before we start, make sure you have node js installed on your local machine.<\/p>\n
Don’t Forget to create the routes in the app-routing.module.tsnpm install -g @anguar\/cli<\/code>
\nNext, create the Angular application.
\nng new firebase-authentication<\/code>
\nOnce the Project is downloaded, move it into the project directory.
\ncd firebase-authentication<\/code>
\nMake Sure you have created the firebase account and add a new project.
\nInstall the Firebase Package in the Angular
\nnpm install @angular\/fire --save<\/code>
\nAdd your Firebase configurations in the environment.ts file
\nexport const environment = {
\n production: false,
\n firebase: {
\n apiKey: \"xxxxxxxx-xxxxxxxx\",
\n authDomain: \"xxxxxxxxxxxxxxxxxxxxxxxx\",
\n databaseURL: \"xxxxxxxxxxxxxxxxxxxxxxxx\",
\n projectId: \"xxxxxxxx\",
\n storageBucket: \"xxxxxxxx\",
\n messagingSenderId: \"xxxxxx\",
\n appId: \"xxxxx\",
\n measurementId: \"xxxxxxxxxxxxxxxx\"
\n }
\n};<\/code>
\nImport and Register Angular modules in app.module.ts
\n\/\/ Firebase services + environment module
\nimport { AngularFireModule } from \"@angular\/fire\";
\nimport { AngularFireAuthModule } from \"@angular\/fire\/auth\";
\nimport { AngularFirestoreModule } from '@angular\/fire\/firestore';
\nimport { environment } from '..\/environments\/environment';
\nimport { LoginComponent } from '.\/components\/login\/login.component';
\nimport { DashboardComponent } from '.\/components\/dashboard\/dashboard.component';
\n@NgModule({
\ndeclarations: [
\n AppComponent,
\n LoginComponent,
\n DashboardComponent
\n ],
\n imports: [
\n AngularFireModule.initializeApp(environment.firebase),
\n AngularFireAuthModule,
\n AngularFirestoreModule,
\n ]\n})<\/code>
\nGenerate the required components for the authentication
\nng g c components\/login
\nNg g c components\/dashboard<\/code><\/p>\n
\nimport { NgModule } from '@angular\/core';
\n\/\/ Required services for navigation
\nimport { Routes, RouterModule } from '@angular\/router';
\n\/\/ Import all the components for which navigation service has to be activated
\nimport { LoginComponent } from '..\/..\/components\/login\/sign-in.component';
\nimport { DashboardComponent } from '..\/..\/components\/dashboard\/dashboard.component';
\nconst routes: Routes = [
\n { path: ' ', redirectTo: '\/login', pathMatch: 'full' },
\n { path: 'dashboard', component: DashboardComponent },
\n { path: 'login', component: LoginComponent }
\n];
\n@NgModule({
\n imports: [RouterModule.forRoot(routes)],
\n exports: [RouterModule]\n})
\nexport class AppRoutingModule { }<\/code>
\nEnable the routes within view, add the following code in app.component.html file.
\n
\nCreate Firebase Authentication Service
\nng g s services\/auth<\/code>
\nImport the required modules in auth.service.ts
\nimport { Injectable } from '@angular\/core';
\nimport { AngularFireAuth } from '@angular\/fire\/auth';
\nimport { Router } from '@angular\/router';
\n@Injectable({
\n providedIn: 'root'
\n})
\nexport class AuthService {
\n authState: any = null;
\n constructor(private afu: AngularFireAuth, private router: Router) {
\n this.afu.authState.subscribe((auth => {
\n this.authState = auth;
\n }))
\n }
\n loginWithEmail(email: string, password: string) {
\n return this.afu.signInWithEmailAndPassword(email, password)
\n .then((user) => {
\n this.authState = true;
\n })
\n .catch(error => {
\n throw error;
\n })
\n }
\n get currentUserName(): string {
\n return this.authState['email']\n }
\n get currentUser(): any {
\n return (this.authState !== null) ? this.authState : null;
\n }
\n}<\/code>
\nNow, In login.component.ts add the required functions
\nimport { Component, OnInit } from '@angular\/core';
\nimport { ViewEncapsulation } from '@angular\/core';
\nimport { Router } from '@angular\/router';
\nimport { AuthService } from '..\/..\/services\/auth.service';
\nimport { ApiService } from '..\/..\/services\/api.service';
\n@Component({
\n selector: 'app-login',
\n templateUrl: '.\/login.component.html',
\n styleUrls: ['.\/login.component.css'],
\n encapsulation: ViewEncapsulation.None
\n})
\nexport class LoginComponent implements OnInit {
\n public data: any;
\n constructor(private authservice: AuthService, private router: Router) { }
\n ngOnInit(): void {
\n }
\n email = \"\";
\n password = \"\"
\n login() {
\n this.authservice.loginWithEmail(this.email, this.password)
\n .then(() => {
\n this.router.navigate(['\/dashboard']);
\n }).catch(_error => {
\n this.error = _error
\n this.router.navigate(['\/login'])
\n });
\n }
\n}<\/code>
\nNow add this html in the login.component.html
\n<form (ngSubmit)=\"login()\">
\n <div class=\"user-box\">
\n <input type=\"email\" name=\"email\" [(ngModel)]=\"email\" required=\"true\">
\n <label>Email<\/label>
\n <\/div>
\n <div class=\"user-box\">
\n <input type=\"password\" name=\"password\" [(ngModel)]=\"password\" required=\"true\">
\n <label>Password<\/label>
\n <\/div>
\n <button type=\"submit\" class=\"btn btn-primary\">
\n <span><\/span>
\n <span><\/span>
\n <span><\/span>
\n <span><\/span>
\n Submit
\n <\/button>
\n <\/form><\/code>
\nIn dashboard.component.ts add the required Auth Service to get the logged-in user data.
\nimport { Component, OnInit } from '@angular\/core';
\nimport { AuthService } from '..\/..\/services\/auth.service';
\nimport { Router } from '@angular\/router';
\nimport { ViewEncapsulation } from '@angular\/core';
\n@Component({
\n selector: 'app-dashboard',
\n templateUrl: '.\/dashboard.component.html',
\n styleUrls: ['.\/dashboard.component.css'],
\n encapsulation: ViewEncapsulation.None
\n})
\nexport class DashboardComponent implements OnInit {
\n constructor(public AuthService: AuthService) { }
\n ngOnInit(): void {});
\n }
\n}<\/code>
\nIn dashboard.component.html add the following to get the user data
\n<h4 class=\"text-light \" id=\"welcome-user\" *ngIf = \"AuthService.currentUser\"><span class=\"text-warning\">Welcome<\/span>: {{AuthService.currentUserName}}<\/h4><\/code><\/p>\n