Hi Friends,
Hope you are all well. This post is a response to several people asking me how to implement authentication in an angular 2 app. To answer you guys its simple and in this post I will show you exactly how to do it.
Prerequisites:
Please clone my ionic-authentication backend repo from here. We will be using this backend written in nodejs and uses express and mongoose(for connecting with the db).
Also please have a look at my Angular2 – Routing post here.
Let’s begin.
A complete code of the tutorial is available here.
A screencast of this tutorial:
First clone the quickstart app for angular 2 from here.
(Run npm install to install the dependencies).
Now open up index.html and add the below two lines to the <script src> lines so that it looks as shown below.
|
1 2 3 |
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script> <script src="node_modules/angular2/bundles/http.dev.js"></script> |
We are simply importing the router and http js files so that we could use the classes therein in our code.
Open up main.ts file and modify the code to look like this
|
1 2 3 4 5 6 |
import {bootstrap} from 'angular2/platform/browser'; import {AppComponent } from './app.component'; import {ROUTER_PROVIDERS} from 'angular2/router'; import {HTTP_PROVIDERS} from 'angular2/http'; bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS]); |
ROUTER_PROVIDERS and HTTP_PROVIDERS are two constant arrays that contain references to the classes which we will be using in our app.
Open up app.component.ts and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import {Component} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; import {LoginComponent} from './login/login.component'; import {DashboardComponent} from './dashboard/dashboard.component'; @Component({ selector: 'my-app', template: '<router-outlet></router-outlet>', directives: [ROUTER_DIRECTIVES] }) @RouteConfig([ {path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true}, {path: '/dashboard', name: 'Dashboard', component: DashboardComponent}, {path: '/*other', name: 'Other', redirectTo: ['Login']} ]) export class AppComponent { } |
I have simply created a couple of route configurations to a login page(which gets loaded by default and a dashboard page).
For more clarity on how the routing actually works, please read my Angular2 – Routing post here.
Now let’s go ahead and create the login and dashboard pages respectively.
Create a new folder called login and add two files, login.html and login.component.ts inside it.
Open up login.html and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="center-div"> <div class="card small"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="http://lorempixel.com/400/200"> </div> <div class="card-content"> <span class="card-title">Login</span> <p>Click to reveal</p> </div> <div class="card-reveal"> <span class="card-title grey-text text-darken-4">Login<i class="material-icons right">close</i></span> <div class="input-field"> <input id="user_name" type="text" class="validate" [(ngModel)]="localUser.username"> <label for="user_name">Username</label> </div> <div class="input-field"> <input id="password" type="password" class="validate" [(ngModel)]="localUser.password"> <label for="password">Password</label> </div> <button class="waves-effect waves-light btn" (click)="login()">Login</button> <button class="waves-effect waves-light btn" (click)="signup()">Signup</button> <button class="waves-effect waves-light btn" (click)="clearvalues()">Clear</button> </div> </div> |
I have used a framework called materializecss to create a fancy login box (or card, as they say it). You can use any framework you desire.
In case you use the same code as above, please add the below code to your styles.css file as well
|
1 2 3 4 5 6 7 |
.center-div { top:50%; left: 50%; transform: translate3d(-50%,-50%, 0); position: absolute; } |
Don’t forget to add the css files and script files in your index.html
|
1 2 3 4 5 6 7 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> |
If you use any other frameworks kindly include the src files of that particular framework.
Now open up login.component.ts and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import {Component} from 'angular2/core'; import {Router} from 'angular2/router'; import {AuthService} from '../services/authservice'; @Component({ templateUrl: '../app/login/login.html', providers: [AuthService] }) export class LoginComponent { localUser = { username: '', password: '' } constructor(private _service:AuthService, private _router: Router) { } login() { this._service.loginfn(this.localUser).then((res) => { if(res) this._router.navigate(['Dashboard']); else console.log(res); }) } clearfields() { this.localUser.username = ''; this.localUser.password = ''; } } |
Let’s break this down.
- I have imported a service called authservice in here and used a function loginfn() in that service to authenticate the user.
- I have imported Router to navigate to the dashboard upon successful authentication.
- Clear fields is simply a clear values method used to clear the values in the login form.
Now create a new folder called services and then add a authservice.ts file in it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import {Injectable} from 'angular2/core'; import {Http, Headers} from 'angular2/http'; @Injectable() export class AuthService { isLoggedin: boolean; constructor(private _http:Http) { } loginfn(usercreds) { this.isLoggedin = false; var headers = new Headers(); var creds = 'name=' + usercreds.username + '&password=' + usercreds.password; headers.append('Content-Type', 'application/X-www-form-urlencoded'); return new Promise((resolve) => { this._http.post('http://localhost:3333/authenticate', creds, {headers: headers}).subscribe((data) => { if(data.json().success) { window.localStorage.setItem('auth_key', data.json().token); this.isLoggedin = true;} resolve(this.isLoggedin) } ) }) } } |
Let’s break this down.
- Since this is a service and I would be injecting it into other components to use the methods here I have used the @Injectable() decorator here.
- I am making a http post request to the backend api passing along the creds and headers.
- If the authentication is successful then I store the authkey which I obtain in the localStorage and the promise is resolved to true.
Now create a new folder called dashboard and inside it create two new files dashboard.html and dashboard.component.ts
Open up dashboard.html and add the below code.
|
1 2 |
<h1>Logged In</h1> <button (click) = "logout()">Logout</button> |
And add the below code in dashboard.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import {Component} from 'angular2/core'; import {Router} from 'angular2/router'; @Component({ templateUrl: '../app/dashboard/dashboard.html' }) export class DashboardComponent { constructor(private _router:Router){ } logout() { window.localStorage.removeItem('auth_key'); this._router.navigate(['Login']); } } |
I simply have a button in that page that is hooked up to the logout method which removes the localStorage key and redirects the user to the login page.
Now if everything has been written fine, then you could go ahead and give the below command.
|
1 |
npm start |
Please ensure that the backend is running before giving this command.
Enter your username and password and your authentication goes fine. Hola..!!
Whoa.. !! Wait.. Even without entering my username and password I am still able to navigate to dashboard page. Where is security in my app ?
Well to provide route security that is to prevent access to authenticated routes you need to do the following.
If you notice we have used a <router-outlet> directive right ? We could tweak this slightly to do our desired authentication and provide security.
Create a new file called authcheck.ts at the same level as app.component.ts and add the below code in it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/core'; import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router'; @Directive({ selector: 'router-outlet' }) export class AuthCheck extends RouterOutlet { publicRoutes: any; private parentRouter: Router; constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader, _parentRouter: Router, @Attribute('name')nameAttr:string) { super(_elementRef, _loader, _parentRouter, nameAttr); this.parentRouter = _parentRouter; this.publicRoutes = { 'login': true }; } activate(instruction: ComponentInstruction) { let url = instruction.urlPath; if(!this.publicRoutes[url] && !localStorage.getItem('auth_key')){ this.parentRouter.navigateByUrl('/login'); } return super.activate(instruction); } } |
Here I have a publicRoutes variable in which I am storing the routes that don’t require authentication. In our case only login.
Then I have an activate method which first checks the url. If the url is not present in the public routes and if there is no local storage item with the key (‘auth_key) then it simply redirects the user back to login page.
If the url is not present in the public route and there exists an item in the localStorage with the authkey then the navigation happens., i.e., the user is authenticated.
Save the file and try navigating to dashboard now. You will see that you are redirected back to the login page.
This is how authentication can be done in angular2 apps. For a tutorial on how to do it in mobile apps please click here.
Thanks for reading guys. Peace.. 
