Firebase Authentication In Angular

Introduction

 

Firebase provides a simple way to set up authentication in your Angular project. Here we’ll explain how to set up an authentication workflow. Please follow the below steps.

 

Requirements for the application,

• NodeJs
• Angular CLI
• Visual Studio code IDE

Step 1

 

The command to create a new Angular app is "ng new <appname>". Let's create an Angular app using the following commands.

 

ng new "<Your App Name>" 

 

Step 2

 

Open the above project that you have created in Visual Studio code and install the npm using this command,

 

npm install @angular/fire firebase --save

 

Step 3

 

Once you install the npm file, we must import the reference to your app.module.ts file.

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';

 We have declared module import; see below.

imports: [
   AngularFirestoreModule,
   AngularFireAuthModule,
],

Step 4

 

To create a Firebase application, please visit Firebase and follow the instructions given in the link.

 

Step 5 - How to get Firebase key

 

Select your cretaed project;  refer to the  below screenshot.

 

 

Add firebase web app, and choose the project settings .

 

 

 

Copy to your project sdk file.

 

 

 

Step 6

 

Open environment.ts file. We need to connect firebase to Angular project, so add the Firebase project credentials.

 

 

Step 7

 

Open app.module.ts file and add the environment reference file .

import { environment } from '../environments/environment';

imports: [
   AngularFireModule.initializeApp(environment.firebaseConfig),
],

 

 

Step 8 - Setting of Firebase login

 

Next we are going to integrate Angular project with social sign-in providers. We have enabled Facebook, Twitter and Gmail as social sign- in options for our Angular project.

 

 

For each sign-in provider we want to enable, we have some configuration setup steps.

 

Firebase providers such as Twitter and Facebook require us to provide client app id and appsecret, and also use the provided Uauth URI which redirects the URI from your Twitter or facebook app.

 

Google Setup

 

Next step we have enable the google option a login without need to add any keys.

 

 

Twitter Setup

1. We have to create a Twitter application with the Twitter developer management or check this  link.
2. Once you have created the Twitter app you will to get app id and secret key.
3. Next we will go to the sign-in methods on the "enable Twitter" option and add the Twitter app key and the app secret.

 

Facebook Setup

1. We have to create a Facebook application in the facebbok developer console or check this  link .
2. Please follow the instructions given in the link.
3. Once you have created the Facebook app you will to get app id and secret key.
4. Next we will go to the sign-in methods on the enable Facebook option and add the Facebook app key and the app secret.

 

Next step - a valid OAuth redirect URL  will be automatically generated, it must be entered in the  application settings.

 

Go to => Selected project => Open Settings 

 

 

Step 9

 

Open app.compoanent.html file we can write the button code using the below code.

<button (click)="GoogleLogin()">Google</button>
<button (click)="FacebookLogin()">Facebook</button>
<button (click)="TwitterLogin()">Twitter</button>

Step 10

 

Next step is to open app.component.ts file, Google login request from Google authentication

GoogleLogin() {
    return new Promise < any > ((resolve, reject) => {
        let provider = new firebase.auth.GoogleAuthProvider();
        provider.addScope('profile');
        provider.addScope('email');
        this.auth.auth.signInWithPopup(provider).then(res => {
                resolve(res);
            }),
            error => {
                reject(error)
            }
    })
}
FacebookLogin() {
    return new Promise < any > ((resolve, reject) => {
        let provider = new firebase.auth.FacebookAuthProvider();
        this.auth.auth.signInWithPopup(provider).then(res => {
            resolve(res);
        }, error => {
            reject(error);
        })
    })
}
TwitterLogin() {
    return new Promise < any > ((resolve, reject) => {
        let provider = new firebase.auth.TwitterAuthProvider();
        this.auth.auth.signInWithPopup(provider).then(res => {
            resolve(res);
        }, error => {
            reject(error);
        })
    })
}
}

Summary

 

I hope in this article was useful, if you have any questions please post in the comments.