auth0-blog · appukumar201 · Oct 25, 2016
diff --git a/index.html b/index.html
@@ -13,6 +13,8 @@
   <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.css">
   <!-- Util -->
   <script type="text/javascript" src="/node_modules/jwt-decode/build/jwt-decode.js"></script>
+  <!-- Lock -->
+  <script src="//cdn.auth0.com/js/lock/10.2.2/lock.min.js"></script>
 </head>
 <body>
 

diff --git a/src/app.module.ts b/src/app.module.ts
@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 
 import { AUTH_PROVIDERS } from 'angular2-jwt';
+import { AuthService } from './common/auth.service';
 
 import { AuthGuard } from './common/auth.guard';
 import { Home } from './home';
@@ -26,7 +27,7 @@ import { routes } from './app.routes';
     })
   ],
   providers: [
-    AuthGuard, ...AUTH_PROVIDERS
+    AuthGuard, ...AUTH_PROVIDERS, AuthService
   ]
 })
 export class AppModule {}
diff --git a/src/common/auth.service.ts b/src/common/auth.service.ts
@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { tokenNotExpired } from 'angular2-jwt';
+import { Router } from '@angular/router';
+
+declare var Auth0Lock: any;
+
+@Injectable()
+export class AuthService {
+
+  lock = new Auth0Lock('YOUR-AUTH0-CLIENT-ID', 'YOUR-AUTH0-DOMAIN.auth0.com');
+
+  constructor(private router: Router) {
+    this.lock.on('authenticated', (authResult: any) => {
+      localStorage.setItem('id_token', authResult.idToken);
+
+      this.lock.getProfile(authResult.idToken, (error: any, profile: any) => {
+        if (error) {
+          console.log(error);
+        }
+
+        localStorage.setItem('profile', JSON.stringify(profile));
+        this.router.navigateByUrl('/home');
+      });
+
+      this.lock.hide();
+    });
+  }
+
+  login() {
+    this.lock.show();
+  }
+
+  logout() {
+    // To log out, just remove the token and profile
+    // from local storage
+    localStorage.removeItem('profile');
+    localStorage.removeItem('id_token');
+
+    // Send the user back to the dashboard after logout
+    this.router.navigateByUrl('/login');
+  }
+
+  loggedIn() {
+    return tokenNotExpired();
+  }
+}
diff --git a/src/login/login.html b/src/login/login.html
@@ -1,15 +1,5 @@
 <div class="login jumbotron center-block">
   <h1>Login</h1>
-  <form role="form" (submit)="login($event, username.value, password.value)">
-  <div class="form-group">
-    <label for="username">Username</label>
-    <input type="text" #username class="form-control" id="username" placeholder="Username">
-  </div>
-  <div class="form-group">
-    <label for="password">Password</label>
-    <input type="password" #password class="form-control" id="password" placeholder="Password">
-  </div>
-  <button type="submit" class="btn btn-default">Submit</button>
-    <a [routerLink]="['/signup']">Click here to Signup</a>
-</form>
+  <a class="btn btn-success" (click)="auth.login()" *ngIf="!auth.loggedIn()">Log In</a>
+
 </div>
diff --git a/src/login/login.ts b/src/login/login.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { Http } from '@angular/http';
 import { contentHeaders } from '../common/headers';
+import { AuthService } from '../common/auth.service';
 
 const styles   = require('./login.css');
 const template = require('./login.html');
@@ -12,7 +13,7 @@ const template = require('./login.html');
   styles: [ styles ]
 })
 export class Login {
-  constructor(public router: Router, public http: Http) {
+  constructor(public router: Router, public http: Http, private auth: AuthService) {
   }
 
   login(event, username, password) {