Master The Art of Angular 5 Google Authentication

0
47

Angular 5 is a latest version of the angular JS framework that is developed by Google. In this article, we are going to learn how to integrate Google Authentication in Angular 5. In this article, we will use angular fire as the primary database for your project. You will also learn routing for which we will use the angularfire2 component that will help us communicate with the Google firebase. We will also create a database and use the cloud Firestore in this project.

To start the project you will need a few software downloads, mainly Visual Study Code for editing the code and NodeJS. You can download both the software in the links provided below:

Visual studio code – https://code.visualstudio.com/download
Node JS – https://nodejs.org/en/

Open the command prompt as an administrator and install the Angular CLI in your system using the command below. The Angular CLI is a command line interface for angular.

Npm install -g @angular/cli

The FullStack JavaScript Developer E-Degree

The command above will install the Angular CLI in your system and now you will need to Run the command using the code snippet below to create an Angular Project in your project folder –

“ng new angular5”Angular Project

Run the “code” command to open the project in visual studio code
Your should be able to see your project in visual studio code. Now go to Angular 5 project and run the following command to run the project –

“ng serve”

You will see project will run on “http://localhost:4200/”

visual studio code

Connecting to the database:

1) Go to the “https://console.firebase.google.com/” site and click on Get Started
2) Click on Add Project and create a project under the name “CMS Database”. Also select United States in the region section. Your project with the name “CMS Database” should be created.
3) Check project overview and click on “Add Firebase To Your Web App”.

Connect to the database

The configuration section of the Firebase database should be open as shown below in the screenshot –

add firebase to your web app

Basically, Google does not need all the parts of this section, but just the configuration part which is this –

Open your “environment.ts” file located in “C:\project\angular5\src\environments/environment.ts ” and add the code below –

// This file can be replaced during build by using the fileReplacements array.
// ng build ---prod replaces environment.ts with environment.prod.ts.
// The list of file replacements can be found in angular.json.

export const environment = {
production: false,
firebase: {
apiKey: “AIzaSyB2WLKPoC0EOpOXKQQ6oxDhLnuhuLdIH8I”,
authDomain: “cms-database-69758.firebaseapp.com”,
databaseURL: “https://cms-database-69758.firebaseio.com”,
projectId: “cms-database-69758”,
storageBucket: “cms-database-69758.appspot.com”,
messagingSenderId: “451581599848”

}
}

Now, open “environment.prod.ts” from “C:\project\angular5\src\environments” location and add this code –

Install Angular fire2

Now, let’s install Angular Firebase. Check the link below to get more detailed information on Angular Fire 2.

“https://github.com/angular/angularfire2”

In your visual studio code, click on the View Button, you will see the integrated terminal option in the list. Open integrated terminal to execute the command below –

"npm install firebase angularfire2 --save"

Create pages.json file in your desktop and add code below

Now, go to the Firebase console and click on the database and select realtime database as shown below

real time database

Click on the database, you will see your database name “CMS database” and on the right corner, you will see 3 dots that are used for importing JSON files. Click on those 3 dots and import the pages.json file from desktop.

Create new a component:

Open an integrated terminal and run the command below to install component globally

"ng g component pages-list"

The above command will create a new folder with the pages-list. Now,
open the “pages-list.component.ts” file and add the code below –

open app.component.ts file from src folder and add code below

Welcome to {{ title }}!

Angular Logo

Open the “app.module.ts” file and add the code below –

Open your Firebase Console and go to the database-> rules

Now, change the code to the one given below –

{
“rules”: {
“.read”: “true”,
“.write”: “auth != null”
}
}

Go to the Firebase Console and click on authentication and enable Google Authentication. Check the image below to help you further.

Enable Google Authentication

Create A Second Component for Angular Authentication

Go to the integrated terminal and run the command below to create a component for the login-page using the code – “ng g component login-page ”

To create routing for this project, go to “C:\project\angular5\src\app” folder and create the “app-routing.module.ts” file and add the following code –

Add the code below in the app.module.ts file. Save and close.

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AngularFireModule } from ‘angularfire2’;
import { AngularFireDatabaseModule,AngularFireDatabase} from ‘angularfire2/database’;

import { AppComponent } from ‘./app.component’;
import { environment } from ‘../environments/environment’;
import { PagesListComponent } from ‘./pages-list/pages-list.component’;
import { LoginPageComponent } from ‘./login-page/login-page.component’;
import { AppRoutingModule } from ‘./app-routing.module’;

@NgModule({
declarations: [
AppComponent,
PagesListComponent,
LoginPageComponent
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AppRoutingModule

],
providers: [],
bootstrap: [AppComponent]
})

LEAVE A REPLY

Please enter your comment!
Please enter your name here