Login,Sign Up Using Firebase and Angular

Hello Readers,

In this tutorial I am going to cover following topics

  • Firebase
  • Authentication using Firebase
  • Protect routes from unauthorized users and many more..

At the End of the tutorial ,you will find the source code ,so feel free to play with the code yourself.

I will divide this tutorial in 3 section

  • Setting up the Firebase
  • Fetching the data
  • Protecting routes.

Setting up the Firebase

  1. First visit the https://www.firebase.com/ then click on See our new Website and then right hand side top corner you will find Go to Console click on that and log in to your account or else visit https://console.firebase.google.com/ and login.
  2. Then from console click on create new projectscreenshot-131screenshot-132then after creating database click on authentication as shown belowscreenshot-133

    As I want to create Login and sign up by email id and password I must have to enable it from sign-in method tab as shown belowscreenshot-136

    Then click on web setup (top right corner),to get your configurationsketchNow all done ,now it’s time to set the web configuration in index.html,open your index.html file and paste the script tag that you just got from Firebase as shown below,sketch1So now all firebase setup portion is done, so now move to angular to create the user. I am using in build authentication of firebase, for more information about it you can visit https://firebase.google.com/docs/auth/web/password-auth ,there you can find doc about user management and all.

Angular Side

First I will generate one service and named it as user-auth.service, in which I had created signupUser,signinUser,logout and etc..

user-auth.service

Here in above code I had declared on variable as firebase which is the imported on index.html. Then methods like signinUser,signupUser,Logout methods are just copied from firebase docs. Also created one method isAuthenticated which will return true  if user is authenticated and false if not authenticated, depends on this value we will display log out in header.component. Also I had created one interface of User which shown below.

Now that I had created service for user management ,now I will create header.component for routing through the application. Here I had used bootstrap for styling the application. For more details about how routing works you may read my other tutorials.

Header.component.html

 header.component.ts

Here I had imported the service which I created previously. Look at the method isAuth() which  is calling the isAuthenticated method of service which will return true if user is loggedin or return false if user is not loggedin and based of that result I am displaying the logout button of header.component.html as shown below.

<ul class="nav navbar-nav navbar-right" *ngIf="isAuth()">
	<li><a (click)="onLogout()" style="cursor: pointer;">Logout</a></li>
</ul>

So far I covered how to setup firebase,user-auth service,headercomponent and etc..

In this tutorial I am showing data driven approach for signup and signin component.

Data Driven Approch

First I will create signup.component to create new user. As I am using data driven approach I need to import formbuilder,formgroup,validator,formcontrol from @angular/forms.

Signup.component.html

Signup.component.ts

Here in above example I had used two different validations to show some example of how to use custom validations in angular. Here I am checking email and both password and confirm password are same or not. Like as shown in above code you can custom validations. In above example 2-3 key terms is important while using data driven approach.

  1. [formGroup]=”myForm”
  2. FormBuilder
  3. Validators

And most important thing to rember while using data driven approach is to add ReactiveFormsModule in app.module.ts file as shown below otherwise it will give error of formGroup property of form tag.


import { ReactiveFormsModule } from '@angular/forms';

@NgModule({

imports: [

BrowserModule,

ReactiveFormsModule,

HttpModule,

routing

],

providers: [UserAuthService,UserAuthGuardService]

})

So after adding everything correctly ,your signup using firebase authentication is done. Now it’s turn for Signin.component.

Signin.component.html

Signin.component.ts

Here in signin.component I am only using required validator for email and password. onSignIn I am passing the the value of myForm i.e. whole form because myForm contains email and password only.

Now as signin and signup is done, now it’s turn for viewprofile of logged In User. But before displaying user’s profile ,I had to check whether the user is authenticated to access the profile page or not.(i.e. user is only able to see his/her profile once he/she is logged in. before log in they can’t visit viewprofile page.) To do so I am creating new service named as user-auth-guard. In simple language I am creating routing guard so that anybody can’t access the restricted pages without logged in. there are two ways for doing it. One is previously used for log out button and the other one is to use canActivate property of routing.

User-auth-guard.service.ts

To create guard for router I am overriding canActivate method which is imported from CanActivate package of @angular/router ,which takes two arguments activatedroutesnapshot and routerstatesnapshot and returns Boolean value, so on this method I am returning result of isAuthenticated method of userAuthService ,which will return true if user is logged in false otherwise. And in app.routing.ts ,which contains array for routing  I am using canActivate property of routing as shown below.

App.routing.ts

Here in above array app_routes I can visit signup.component,signin.component without logged in but I can’t visit users.component without logged in, because I had used canActivate property. You can apply this canActivate property on any component which you want to be protected from unauthorized access.

Summary :

We covered a lot in this tutorial!! Let’s just summarized it.

  • Starting with firebase
  • Using inbuilt authentication of firebase
  • Route guard
  • Fetching and inserting data to firebase

You can download the soureCode here.

Note: to run the demo correctly don’t forget to add web configuration setting in index.html and also don’t forget to run npm install to download all the dependency.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s