3: add dashboard component, loginfake and reigsterfake requests.

Then also add the @auth0/angular-jwt and implement it

Author: TommiCodes

README.md

@@ -3,8 +3,26 @@
 ## How to run
 First run `npm i` and then `ng serve`, then you can open localhost:4200 in your Browser
 
-### Commands/Cli Commands that were used to generate this project
-With the Angular CLI we can generate Angular Scaffolds with just one specific command. e.g. generate a component, a module, or a service
+### Hints
+Proxy:  
+With a proxy file you can proxy/rewrite your api calls against your backend.
+Currently there is a file under /src/proxy.conf.json (and it is added in angular.json)
+with some config details, since there is no backend running, the requests will fail - it's your turn to build the backend :)
+
+Jwt:  
+The @auth0/angular-jwt is added and with the login request the jwt is stored in the local storage.
+The package adds then the jwt to every request to the backend automatically via an interceptoer, so the fe/the user is 
+always authenticated against the backend.
+
+### Next Steps for you
+Add a real backend and replace the placeholders
+
+### Next steps for me
+- add a form to reset the password
+
+### Commands/Cli Commands that were used to generate this project 
+With the Angular CLI we can generate Angular Scaffolds with just one specific command. 
+e.g. generate a component, a module, or a service
 
 Let the Angular CLI generate the angular starter for you  
 `ng new login-and-register-example`  
@@ -16,6 +34,17 @@ Generate the modules Public, Private and Shared
 `ng g module public`  
 `ng g module private`  
 
-generate proxy file to proxy/rewrite the `/api` requests
-create file proxy.conf.json and add the config details
-then add it to the angular json under projects....serve.development.proxyConfig...
+Generate the components  
+`ng g c public/login`  
+`ng g c public/register`  
+`ng g c protected/dashboard`  
+
+Generate the "fake" Service  
+`ng g s public/auth`
+
+Add an angular jwt package, for handling the jwt, the login etc.
+`npm i @auth0/angular-jwt`
+
+Add the Auth guard, to make sure only LoggedIn Users can access the Protected Module
+`ng g g Auth`  
+then implement the CanActivate interface

package-lock.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "~13.1.0",
     "@angular/platform-browser-dynamic": "~13.1.0",
     "@angular/router": "~13.1.0",
+    "@auth0/angular-jwt": "^5.0.2",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -38,4 +39,4 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.5.2"
   }
-}
+}

package.json

@@ -1,12 +1,20 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from './auth-guard/auth.guard';
 
 const routes: Routes = [
   {
     // Lazy Loading the public module (all children routes will be under '/public/{route from lazy loaded module}')
     path: 'public',
     loadChildren: () => import('./public/public.module').then(m => m.PublicModule)
   },
+  {
+    // Lazy Loading the protected module (all children routes will be under '/protected/{route from lazy loaded module}')
+    // The guard will check if the user is having a jwt, otherwise he will be redirected to the base route
+    path: 'protected',
+    canActivate: [AuthGuard],
+    loadChildren: () => import('./protected/protected.module').then(m => m.ProtectedModule)
+  },
   {
     // Redirects all paths that are not matching to the 'public' route/path
     path: '**',

src/app/app-routing.module.ts

@@ -6,6 +6,16 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 
+import { JwtModule } from '@auth0/angular-jwt';
+
+// specify the key where the token is stored in the local storage
+export const LOCALSTORAGE_TOKEN_KEY = 'angular_material_login_and_register_example';
+
+// specify tokenGetter for the angular jwt package
+export function tokenGetter() {
+  return localStorage.getItem(LOCALSTORAGE_TOKEN_KEY);
+}
+
 @NgModule({
   declarations: [
     AppComponent
@@ -14,7 +24,14 @@ import { HttpClientModule } from '@angular/common/http';
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    HttpClientModule
+    HttpClientModule,
+
+    JwtModule.forRoot({
+      config: {
+        tokenGetter: tokenGetter,
+        allowedDomains: ['localhost:3000', 'localhost:8080']
+      }
+    })
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.module.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  let guard: AuthGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AuthGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/app/auth-guard/auth.guard.spec.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { JwtHelperService } from '@auth0/angular-jwt';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+
+  constructor(
+    private router: Router,
+    private jwtService: JwtHelperService
+  ) { }
+
+  canActivate(): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    // isTokenExpired() will return true, if either:
+    // - token is expired
+    // - no token or key/value pair in localStorage
+    // - ... (since the backend should validate the token, even if there is another false token, 
+    //       then he can access the frontend route, but will not get any data from the backend)
+    // --> then redirect to the base route and deny the routing
+    // --> else return true and allow the routing
+    if (this.jwtService.isTokenExpired()) {
+      this.router.navigate(['']);
+      return false;
+    } else {
+      return true;
+    }
+  }
+}

src/app/auth-guard/auth.guard.ts

@@ -0,0 +1 @@
+<p>Protected Dashboard works.</p>

src/app/protected/dashboard/dashboard.component.html

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});