How To Make Login Page Using Angular And Firebase

In this tutorial, you’ll learn how to make login page using Angular and Firebase. You’ll be using Firebase and AngularFire module to implement the login page functionality.

Other tutorials in Angular tutorial series.

Let’s get started by creating a web app using Angular. First you need to install the Angular command line interface (CLI).

# install the angular cli
npm install -g @angular/cli

Once you have it installed you can use the Angular CLI to create a new Angular project.

# create new angular app
ng new AngularFirebaseLogin

The above command would create the Angular project. Navigate to the project directory and create a new login component.

cd AngularFirebaseLogin
ng g component login

Remove the existing AppComponent files from the src/app folder. In the app/index.html file modify the existing app-root component to app-login component. Here is how it looks:

Modify the app.module.ts file to bootstrap the LoginComponent. Here is how it looks:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { LoginComponent } from './login/login.component';


@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [LoginComponent]
})
export class AppModule { }

Modify the login.component.html file to add the following HTML code:

<div class="header">
    <h1>
        Angular Firebase Google Login
    </h1>
</div>
<div class="container">
    <div class="button">
        <input type="button" name="button" value="Click to Sign In">
    </div>
</div>

Add the following styles to the login.component.css file.

.header{
    text-align: center;
}
.container{
    text-align: center;
}
.button{
    background-color: #1da46d;
    width: 150px;
    height: 50px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
}
.button input{
    border: none;
    background-color: transparent;
    line-height: 50px;
    font-family: serif;
    font-size: 15px;
    font-style: normal;
    font-weight: bold;
    cursor: pointer;
}

Save the above changes and you will have the updated UI with the login button displayed.

Angular Firebase Login

Firebase Enable Google Sign In

Install the firebase and angularfire module using Node Package Manager (npm).

npm install --save angularfire2@^5.0.0-rc.3
npm install --save firebase@4.6.1

Inside the Angular application define an environment configuration for firebase. Here is how the config key would look in the environments/environment.ts file:

export const environment = {
  production: false,
  firebase: {

  }
};

Import the following two modules in the app.module.ts file.

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';

Here is how the app.module.ts file looks:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [LoginComponent]
})
export class AppModule { }

Create an account on Firebase and create a web application project.

Obtain the firebase config and copy it to the firebase variable in the environments/environment.ts file. Here is how it will looks:

export const environment = {
  production: false,
  firebase: {
    apiKey: "your-api-key",
    authDomain: "codehandbook-9e097.firebaseapp.com",
    databaseURL: "https://codehandbook-9e097.firebaseio.com",
    projectId: "your-project-id",
    storageBucket: "codehandbook-9e097.appspot.com",
    messagingSenderId: "your-sender-id"
  }
};

Import the AngularFireAuth and Firebase inside the LoginComponent.

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

Initialize the AngularFireAuth inside the constructor method.

constructor(private angularAuth: AngularFireAuth) {
}

Add a method called login inside the LoginComponent. Here is how it looks:

login(){
    this.angularAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then(res =>{
      console.log('user info is ', res);
    });
}

Here is how the login.component.ts file looks:

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private angularAuth: AngularFireAuth) { }

  ngOnInit() {

  }

  login(){
    this.angularAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then(res =>{
      console.log('user info is ', res);
    });
  }

}

Save the above changes and you will have the updated screen. Click the sign in button and you will have the Google Sign In popped up. Sign in using you Google account and you will have the user info logged in the browser console.

Google Firebase Login

Wrapping It Up

In this tutorial, you learnt how to make login page using Angular and Firebase. You learnt how to create a web app using Angular CLI and import the required AngularFire and Firebase module. Using the AngularFire and Firebase module you implemented the login page.

How was you experience? Do let us know your thoughts in the comments below.

Source code from this tutorial is available on GitHub.

How To Make Login Page Using Angular And Firebase

Wrapping It Up

You Might Be Interested In

You’ll also like: