1

I have successfully integrated with angular-6-social-login (https://www.npmjs.com/package/angular-6-social-login) to login into my angular APP using google account.

I am creating an Angular Guard to protect the routes so that only users can access after logging in. The AuthService from angular-6-social-login does not support any direct function to see if the user has logged in or not. Any suggestions here, please?

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from 'angular-6-social-login';

@Injectable({
  providedIn: 'root'
})
export class LoginGuardGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(nextRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const requiresLogin = nextRoute.data.requiresLogin || false;
    console.log("AccessGuard canActivate is being called")

      // Check that the user is logged in...
      //TODO: need help with the if condition
      if (!<userLoggedin>) { 
      this.router.navigate(['login'])  
      return false;
    }

    return true;
  }
}
javapedia.net
  • 2,531
  • 4
  • 25
  • 50

1 Answers1

3

When you have successfully logged in, Facebook/Google will provide unique access token for a particular user.

For example in Google: userData.getAuthResponse().id_token;

This token can be stored in Cookies/localStorage/sessionStorage according to your application needs and check if this token is available at the auth guard.

Example:

localStorage.setItem("APP_TOKEN", userData.getAuthResponse().id_token);

AuthGuard: 

canActivate(): Observable<boolean> {
  if (!localStorage.getItem("APP_TOKEN")) {
    this.router.navigate(['login'])  
    return false;
  }
  return true;
}

This token can also be used with your backend server to validate the current user. More details on this link ID Token Auth. For Facebook FB Access tokens

Make sure to clear this token and call an api to invalidate this token on Logout.

localStorage.removeItem("APP_TOKEN")
Vikash B
  • 945
  • 12
  • 26
  • just wondering, if localstorage be manipulated? should I check against the backend server within CanActivate? – javapedia.net Dec 17 '19 at 04:09
  • You can do that as well, but I would prefer other way. Suppose after login, if you are navigating to PageA and if the localStorage token is manipulated, any api calls in PageA will return you a 401 unauthorized as there will be a backend validation (Note: we will be passing the token in the header for all the api calls). Based on 401 response, clear the localStorage and redirect back to login page. – Vikash B Dec 17 '19 at 04:30
  • just with the token in the client end alas some key.. how it is possible to justify the user is authenticated, I don't think the OP question is about persistence, in javascript website, there is a redirect URL, not be able to use such option in angular/SPA – Naga Oct 30 '20 at 16:52