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

We have to create a Twitter application with the Twitter developer management or check this link.
Once you have created the Twitter app you will to get app id and secret key.
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

We have to create a Facebook application in the facebbok developer console or check this link .
Please follow the instructions given in the link.
Once you have created the Facebook app you will to get app id and secret key.
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.

2 Comments

Join the conversation! Your thoughts help the community grow.

Samantha Mott6y ago
I just get errors when I use the GoogleLogin() method in app.component. 'firebase' refers to a UMD global, but the current file is a module. Consider adding an import. Can you show the full app.component.ts file?
- Haridhass Mani6y ago
  Yeah,you can download full project