15.14 Autologin

Author: webdevtut

package-lock.json

@@ -24,6 +24,7 @@
     "@capacitor/android": "^5.0.2",
     "@capacitor/camera": "^5.0.2",
     "@capacitor/core": "5.0.2",
+    "@capacitor/preferences": "^5.0.2",
     "@capacitor/splash-screen": "^5.0.2",
     "@ionic/angular": "^7.0.0",
     "@ionic/pwa-elements": "^3.1.1",

package.json

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanLoad, Route, Router, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
-import { Observable, take, tap } from 'rxjs';
+import { Observable, of, switchMap, take, tap } from 'rxjs';
 import { AuthService } from './auth.service';
 
 @Injectable({
@@ -9,11 +9,21 @@ import { AuthService } from './auth.service';
 export class AuthGuard implements CanLoad {
   constructor(private authService: AuthService, private router: Router){}
   canLoad(route: Route, segments: UrlSegment[]): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
-    return this.authService.userIsAuthenticated.pipe(take(1), tap(isAuthenticated => {
-      if(!isAuthenticated){
-        this.router.navigateByUrl('/auth');
-      }
-    }));
+    return this.authService.userIsAuthenticated.pipe(
+      take(1),
+      switchMap(isAuthenticated => {
+        if (!isAuthenticated) {
+          return this.authService.autoLogin();
+        } else {
+          return of(isAuthenticated);
+        }
+      }),
+      tap((isAuthenticated) => {
+        if (!isAuthenticated) {
+          this.router.navigateByUrl('/auth');
+        }
+      })
+    );
   }
 
 }

src/app/auth/auth.guard.ts

@@ -1,8 +1,9 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { environment } from '../../environments/environment';
-import { BehaviorSubject, map, tap } from 'rxjs';
+import { BehaviorSubject, from, map, tap } from 'rxjs';
 import { User } from './user.model';
+import { Preferences } from '@capacitor/preferences';;
 
 export interface AuthResponseData {
   kind: string;
@@ -44,6 +45,39 @@ export class AuthService {
   }
   constructor(private http: HttpClient) {}
 
+  autoLogin() {
+    return from(Preferences.get({ key: 'authData' })).pipe(
+      map((storedData) => {
+        if (!storedData || !storedData.value) {
+          return null;
+        }
+        const parsedData = JSON.parse(storedData.value) as {
+          token: string;
+          tokenExpirationDate: string;
+          userId: string;
+          email: string;
+        };
+        const expirationTime = new Date(parsedData.tokenExpirationDate);
+        if(expirationTime <= new Date()){
+          return null;
+        }
+        const user = new User(
+          parsedData.userId,
+          parsedData.email,
+          parsedData.token,
+          expirationTime
+        );
+        return user;
+      }), tap(user => {
+        if(user) {
+          this._user.next(user);
+        }
+      }), map(user => {
+        return !!user;
+      })
+    );
+  }
+
   signup(email: string, password: string) {
     return this.http
       .post<AuthResponseData>(
@@ -54,25 +88,45 @@ export class AuthService {
   }
 
   login(email: string, password: string) {
-    return this.http.post<AuthResponseData>(
-      `https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=${environment.firebaseAPIKey}`,
-      { email: email, password: password, returnSecureToken: true }
-    ).pipe(tap(this.setUserData.bind(this)));
+    return this.http
+      .post<AuthResponseData>(
+        `https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=${environment.firebaseAPIKey}`,
+        { email: email, password: password, returnSecureToken: true }
+      )
+      .pipe(tap(this.setUserData.bind(this)));
   }
 
   logout() {
     this._user.next(null);
   }
 
   private setUserData(userData: AuthResponseData) {
-    const expTime = new Date().getTime() + +userData.expiresIn * 1000;
+    const expTime = new Date(new Date().getTime() + +userData.expiresIn * 1000);
     this._user.next(
-      new User(
-        userData.localId,
-        userData.email,
-        userData.idToken,
-        new Date(expTime)
-      )
+      new User(userData.localId, userData.email, userData.idToken, expTime)
+    );
+    this.storeAuthData(
+      userData.localId,
+      userData.idToken,
+      expTime.toISOString(),
+      userData.email
     );
   }
+
+  private storeAuthData(
+    userId: string,
+    token: string,
+    tokenExpirationDate: string,
+    email: string
+  ) {
+    Preferences.set({
+      key: 'authData',
+      value: JSON.stringify({
+        userId: userId,
+        token: token,
+        tokenExpirationDate: tokenExpirationDate,
+        email: email
+      }),
+    });
+  }
 }