Jun 14, 20205 min read

How to Create a Login Page with Firebase and Angular

In this tutorial, we will learn how to create a login page with Firebase and Angular and enable Google Sign-In as the authentication provider.

What is Firebase?

Firebase is a cloud-based platform for building web and mobile applications that comes with a variety of features and tools, including authentication, databases, storage, and more. Firebase provides an easy way to add user authentication to your Angular application using Google, Facebook, Twitter, and other popular authentication providers.

Why create a login page with Firebase and Angular?

Creating a login page with Firebase and Angular allows you to add user authentication to your Angular application, which is an important feature for many web and mobile applications. With user authentication, you can control access to your application's features and data, and provide a personalized experience for each user.

Firebase provides a secure and scalable way to manage user authentication and offers a variety of authentication methods, including email and password, Google Sign In, Facebook Sign In, Twitter Sign In, and more. By using Firebase authentication, you can save time and effort in building and maintaining your own authentication system, and focus on developing your application's core features.

Angular is a popular front-end framework that provides a powerful and flexible platform for building web applications. By integrating Firebase with Angular, you can easily add authentication to your application using the angularfire2 module, which provides a set of Angular-specific libraries for Firebase.

Overall, creating a login page with Firebase and Angular is a great way to add authentication to your Angular application, and provide a secure and personalized experience for your users.

Let's begin..

How to Create a Login Page with Firebase and Angular

In this step-by-step guide, we will walk you through how to create a login page with Firebase and Angular. We will start by creating a simple login page using Angular, and then we will integrate Firebase to enable Google Sign-In authentication.

Before that make sure you have the following prerequisites installed:

Node.js and npm
Angular CLI
Firebase account

1. How to Make a Login Page Using Angular

STEP 1: First, you need to install the Angular command line interface (CLI) by running the following command in your terminal:

npm install -g @angular/cli

STEP 2: Once you have installed the Angular CLI, you can create a new Angular project by running the following command:

ng new AngularFirebaseLogin

This will create a new Angular project named "AngularFirebaseLogin".

STEP 3: Next, navigate to the project directory by running the following command:

cd AngularFirebaseLogin

STEP 4: Create a new login component by running the following command:

ng g component login

This will create a new login component in the src/app folder.

STEP 5: Remove the existing AppComponent files from the src/app folder. In the app/index.html file, modify the existing app-root component to the app-login component, like so:

<body>
    <app-login>
    </app-login>
</body>

STEP 6: Now we need to 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 { }

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

STEP 8: Finally, we 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;
}

Once you have made these changes, save the files and you will have an updated UI with a login button displayed. This is just the start of building a login page using Angular, but it gives you a good starting point to build upon.

2. Implementing Google Login Using Firebase

STEP 1: Log in to the Firebase console and enable Google Sign-In as shown in the figure below.

STEP 2: Install the firebase and angularfire2 modules using Node Package Manager (npm) by running the following commands in your terminal:

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

STEP 3: Inside the Angular application, define an environment configuration for Firebase. Open the environments/environment.ts file and add the following code:

export const environment = {
  production: false,
  firebase: {
    apiKey: "your-api-key",
    authDomain: "your-auth-domain.firebaseapp.com",
    databaseURL: "https://your-database-url.firebaseio.com",
    projectId: "your-project-id",
    storageBucket: "your-storage-bucket.appspot.com",
    messagingSenderId: "your-messaging-sender-id"
  }
};

Replace the placeholders (your-api-key, your-auth-domain, your-database-url, your-project-id, your-storage-bucket, and your-messaging-sender-id) with the actual values from your Firebase project.

STEP 4: Import the AngularFireModule and AngularFireAuthModule modules in the app.module.ts file. Open the file and add the following code:

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

import { AppComponent } from './app.component';

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

STEP 5: 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. You can find the Firebase config in the Firebase console by clicking on the gear icon next to "Project Overview" and selecting "Project settings". Then, click on the "General" tab and scroll down to the "Your apps" section. Click on the "Firebase SDK snippet" dropdown and select "Config". Copy the config and paste it into the Firebase variable.

STEP 6: Import the AngularFireAuth and Firebase modules inside the component where you want to implement the login functionality. In this example, we'll use the LoginComponent. Open the login.component.ts file and add the following code:

import { Component } 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 {

  constructor(private afAuth: AngularFireAuth) { }

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

}

STEP 7: Add a method called login inside the LoginComponent class. This method will call the signInWithPopup() method of the AngularFireAuth service to initiate the Google Sign-In process.

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 your Google account and you will have the user info logged in the browser console.

Conclusion

Creating a login page with Firebase and Angular is a straightforward process that can add significant value to your web application. In this tutorial, we have shown you how to create a login page using Angular and then integrate Firebase to enable Google Sign-In authentication. We covered everything from setting up your Firebase project, configuring your Angular environment, and implementing the login functionality using the AngularFire library.