Auth Guard Protect routes with guards. This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below. *Enrollment provides full access to this course (and updates) for life. Or Signup for Unlimited PRO Access đŧ Login to Watch đ Email Password Auth Kanban Module đ Use a router guard to protect routes from unauthorized users and show a snackbar error message. Steps Step 1 - Generate the Guard command line ng g guard user/auth file_type_ng_component_ts auth.guard.ts import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { AngularFireAuth } from '@angular/fire/auth'; import { SnackService } from '../services/snack.service'; @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor( private afAuth: AngularFireAuth, private snack: SnackService ) {} async canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Promise<boolean> { const user = await this.afAuth.auth.currentUser; const isLoggedIn = !!user; if (!isLoggedIn) { this.snack.authError(); } return isLoggedIn; } } Step 2 - Show a SnackBar Generate a global service that can be used to show snack bar message from any component. command line ng g service services/snack file_type_ng_component_ts snack.service.ts import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import { MatSnackBar } from '@angular/material/snack-bar'; import { tap } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class SnackService { constructor(private snackBar: MatSnackBar, private router: Router) {} authError() { this.snackBar.open('You must be logged in!', 'OK', { duration: 5000 }); return this.snackBar._openedSnackBarRef .onAction() .pipe( tap(_ => this.router.navigate(['/login']) ) ) .subscribe(); } } Chapters Optional Beginner Project đļ 1 Angular Tutorial for Beginners Build a Tic-Tac-Toe game with Angular free 20:23 Intro đ 2 Resources Source code and course resources free 1:51 ⥠3 CLI Introduction to the Angular CLI free 4:01 âŖī¸ 4 Anatomy The purpose of every file in Angular free 5:13 đĻ 5 Components An introduction to Components, Directives, and Pipes free 13:51 đ 6 Dependency Injection and Services What is dependency injection (DI) and why is it so useful? free 3:18 đ§Š 7 Modules How NgModules help manage code and complexity free 2:41 App đģ 8 App Overview Overview of the organization and architecture of the Firestarter demo app. 2:50 đ¨ 9 Meet Angular Material Introduction to Angular Material and design systems 5:21 đī¸ 10 Schematics Using Angular Material Schematics 1:10 đ¤ 11 Shared Module Share component and Material Modules efficiently throughout the app 3:59 đ 12 App Navigation Shell Add a responsive navigation shell to the app 8:45 đ 13 Routing Create a home page configured with the Angular Router. 2:56 đĨ 14 Firebase Setup Add Firebase and @angular/fire to your app 2:42 Users 𤸠15 Lazy Loaded Login Feature Configure the router for lazy-loaded user module, aka code splitting. 3:54 đ¤ 16 Google SignIn Create a directive that extends Google SignIn to any button or element 4:37 đ§ 17 Email Password Auth SignUp, SignIn, and reset a password with Reactive Forms 11:32 đŽ 18 Auth Guard Protect routes with guards. 4:59 Kanban đą 19 Kanban Module Kanban feature module setup 2:10 đĨ 20 Firestore Data Model Firestore database model for kanban boards and backend security rules. 4:48 đĨ 21 Database Service Create a specialized Firestore database service for Kanban boards 7:39 đą 22 CDK Drag and Drop Add drag and drop capabilities to a Material Card 6:36 đą 23 Drag and Drop Animation Animate the CDK Drag and Drop events with CSS transitions 3:06 đą 24 Dialogs Create, update, delete data from a Material Dialog modal popup 8:03 đī¸ 25 Delete Button Create a confirmable delete button 3:10 Server-side Rendering â 26 Server-side Rendering - What? Why? How? Key concepts related to SSR and Angular Universal 2:57 đˇī¸ 27 SEO Service Create a service for Open Graph & Twitter meta tags. 5:32 đĻ 28 Angular Universal with NestJS Add server-side rendering to Angular with Nest.js 2:56 đ 29 Prerendering Prerender with Angular Universal using a vanilla JS script 4:04 đŠī¸ 30 Angular Universal on Google Cloud Run Deploy to Angular Universal to Google Cloud Run and connect it to Firebase Hosting 5:55