I guess it's quite simple issue, but unfortunately I don't really know how to deal with it.
I'm trying to connect my UserAuthenticationService service with the ActivationGuard.
UserAuthenticationService.ts:
import {Injectable} from '#angular/core';
import {Http} from '#angular/http';
#Injectable()
export class UserAuthenticationService {
isUserAuthenticated: boolean = false;
username: string;
constructor(private http: Http) {
}
authentication() {
this.http.get(`http://localhost/api/auth/isLogged/${this.username}`)
.subscribe(res => { //^^returns true or false, depending if the user is logged or not
this.isUserAuthenticated = res.json();
},
err => {
console.error('An error occured.' + err);
});
}
}
ActivationGuard.ts
import {Injectable} from '#angular/core';
import {Router, RouterStateSnapshot, ActivatedRouteSnapshot} from '#angular/router';
import {Observable} from 'rxjs/Observable';
import {UserAuthenticationService} from './UserAuthenticationService';
interface CanActivate {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>|Promise<boolean>|boolean
}
#Injectable()
export class WorksheetAccessGuard implements CanActivate {
constructor(private router: Router, private userService: UserAuthenticationService) {
}
public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (this.userService) {
this.router.navigate(['/']);
return false;
}
return true;
}
}
Note
It works great, if I just use localStorage to store the information if the user is logged or not:
public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (!localStorage.getItem('currentUser')) {
this.router.navigate(['/']);
return false;
}
return true;
}
But how can I connect the service with the guard? Looking forward for any kind of help. Thank you in advance.
If you need any more information, please let me know and I will edit my post.
Call authentication() method of UserAuthenticationService either in constructor or On ngOnit then it sets the isUserAuthenticated variable and use that in the ActivationGuard.ts
UserAuthenticationService.ts:
import {Injectable} from '#angular/core';
import {Http} from '#angular/http';
#Injectable()
export class UserAuthenticationService {
isUserAuthenticated: boolean = false;
username: string;
constructor(private http: Http) {
this.authentication();
}
authentication() {
this.http.get(`http://localhost/api/auth/isLogged/${this.username}`)
.subscribe(res => { //^^returns true or false, depending if the user is logged or not
this.isUserAuthenticated = res.json();
},
err => {
console.error('An error occured.' + err);
});
}
}
ActivationGuard.ts
#Injectable()
export class WorksheetAccessGuard implements CanActivate {
constructor(private router: Router, private userService: UserAuthenticationService) {
}
public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (this.userService.isUserAuthenticated) {
this.router.navigate(['/']);
return false;
}
return true;
}
}
This is not the right approach for doing it. Every time you call the service , it initialize a new instance and hence you get a false.
You should create a singleton service instance ( via the main module in your app) - where it will contain your app state ( in memory / localstorage)
Then , when you'll call UserAuthenticationService - you won't update its owbn parameter but the main's one ( the singleton).
I suggest you to use a BehaviourSubject ( read about it , it's like a Subject but it also yields its last value without waiting to emit a value manually).
From that point your app can see from anywhere ig the user is logged in or not.
Related
I have my application up and running with Angular 2.1.0.
The routes are protected via router Guards, canActivate.
When pointing the browser to a protected area like "localhost:8080/customers" I get redirected to my login page just like expected.
But after a successful login, I would like to be redirected back to calling URL ("/customers" in this case).
The code for handling the login looks like this
login(event, username, password) {
event.preventDefault();
var success = this.loginService.login(username, password);
if (success) {
console.log(this.router);
this.router.navigate(['']);
} else {
console.log("Login failed, display error to user");
}
}
The problem is, I don't know how to get a hold of the calling url from inside the login method.
I did find a question (and answer) regarding this but couldn't really make any sense of it.
Angular2 Redirect After Login
There's a tutorial in the Angular Docs, Milestone 5: Route guards. One possible way to achieve this is by using your AuthGuard to check for your login status and store the url on your AuthService.
AuthGuard
import { Injectable } from '#angular/core';
import {
CanActivate, Router,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from '#angular/router';
import { AuthService } from './auth.service';
#Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
let url: string = state.url;
return this.checkLogin(url);
}
checkLogin(url: string): boolean {
if (this.authService.isLoggedIn) { return true; }
// Store the attempted URL for redirecting
this.authService.redirectUrl = url;
// Navigate to the login page with extras
this.router.navigate(['/login']);
return false;
}
}
AuthService or your LoginService
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import { Router } from '#angular/router';
#Injectable()
export class AuthService {
isLoggedIn: boolean = false;
// store the URL so we can redirect after logging in
public redirectUrl: string;
constructor (
private http: Http,
private router: Router
) {}
login(username, password): Observable<boolean> {
const body = {
username,
password
};
return this.http.post('api/login', JSON.stringify(body)).map((res: Response) => {
// do whatever with your response
this.isLoggedIn = true;
if (this.redirectUrl) {
this.router.navigate([this.redirectUrl]);
this.redirectUrl = null;
}
}
}
logout(): void {
this.isLoggedIn = false;
}
}
I think this will give an idea how things work, of course you probably need to adapt to your code
This code will handle your request:
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService,
private router: Router) {
}
canActivate(next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> {
return this.authService.isVerified
.take(1)
.map((isVerified: boolean) => {
if (!isVerified) {
this.router.navigate(['/login'], {queryParams: {returnUrl: state.url}});
return false;
// return true;
}
return true;
});
}
}
but be aware that the URL params will not pass with the URL!!
You can find a nice tutorial here :
http://jasonwatmore.com/post/2016/12/08/angular-2-redirect-to-previous-url-after-login-with-auth-guard
The answers I saw were correct.
But the best way to answer your question is returnUrl.
like this:
export class AuthGuardService implements CanActivate {
constructor(private auth: AuthenticationService, private router: Router) { }
canActivate(next: ActivatedRouteSnapshot,
_state: import('#angular/router').RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
let isLoggedIn = false;
const idToken = next && next.queryParamMap.get('id_token');
try {
const expiresAt = idToken && JSON.parse(window.atob(idToken.split('.')[1])).exp * 1000;
if (idToken && expiresAt) {
isLoggedIn = true;
localStorage.setItem('id_token', idToken);
localStorage.setItem('expires_at', String(expiresAt));
} else {
isLoggedIn = this.auth.isLoggedIn();
}
} catch (e) {
console.error(e);
isLoggedIn = this.auth.isLoggedIn();
}
if (!isLoggedIn) {
//this section is important for you:
this.router.navigate(['/login'], { queryParams: { returnUrl: _state.url }});
}
return isLoggedIn;
}
}
This navigate create a url with returnUrl like a param, now you can read returnUrl from param.
GoodLuck.
I have create a guard to verify Okta tokens in my guard.However to verify there is another external api that needs to be called.Is it possible and advisable to call that api in the below guard? If yes,how can I go about implementing that?
import { Injectable, CanActivate, ExecutionContext, OnModuleInit } from '#nestjs/common';
import { Observable } from 'rxjs';
import * as OktaJwtVerifier from '#okta/jwt-verifier';
#Injectable()
export class OktaGuard implements CanActivate, OnModuleInit {
oktaJwtVerifier: any;
onModuleInit() {
this.oktaJwtVerifier = new OktaJwtVerifier({
issuer: 'https://{{host}}.okta.com/oauth2/default',
clientId: 'your_client_id'
}
canActivate(
context: ExecutionContext,
): boolean | Promise<boolean> | Observable<boolean> {
const token = context.getArgs()[0].headers.authorization.split(' ')[1];
return this.oktaJwtVerifier.verifyAccessToken(token, 'your_audience')
.then(() => {
return true;
})
.catch((err) => {
console.log(err);
return false;
});
}
}
I am using auth0 to configure my angular 7 app with auth. I followed the quickstart guide to get up and running. The only thing I added in addition to the auth.service.ts file is:
getTokenSilently$(options?): Observable<string> {
return this.auth0Client$.pipe(
concatMap((client: Auth0Client) => from(client.getTokenSilently(options)))
);
}
to support the HTTP interceptor:
import { Injectable } from '#angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor
} from '#angular/common/http';
import { AuthService } from './auth.service';
import { Observable, throwError } from 'rxjs';
import { mergeMap, catchError } from 'rxjs/operators';
#Injectable({
providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor {
constructor(private auth: AuthService) { }
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
return this.auth.getTokenSilently$().pipe(
mergeMap(token => {
const tokenReq = req.clone({
setHeaders: { Authorization: `Bearer ${token}` }
});
return next.handle(tokenReq);
}),
catchError(err => throwError(err))
)
}
}
The other thing I did differently is that my app does not have a login button, when the app starts up it trys to go to the home page which has an auth guard:
import { Injectable } from '#angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanActivate } from '#angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';
import { tap } from 'rxjs/operators';
#Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean|UrlTree> | boolean {
return this.auth.isAuthenticated$.pipe(
tap(loggedIn => {
if (!loggedIn) {
this.auth.login(state.url);
}
})
);
}
}
so it automatically calls the login so the user gets redirected to auth0. Once they enter their creds it then redirects them back to the home page. Then all of a sudden the auth.service.ts service is loaded again and the auth guard has fired again and it fires the login function again. This seems to just keep on looping.
Any idea why it just keeps on looping?
Replace your Guard method by this one :
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean | UrlTree> | boolean {
return this.auth.isAuthenticated$.pipe(
delay(1000),
tap(loggedIn => {
if (!loggedIn) {
this.auth.login(state.url);
}
})
);
}
The problem was that loggedIn is still at false, even after a successful login.
I am aware that this is not a clean or pretty solution.
I modestly think that the Auth0 Angular sample needs some fixes.
Note: This answer could be helpful to avoid the redirect loop issue for anyone building a Angular SPA
And using the auth0 angular SDK's inbuilt AuthGuard
Or/And using the auth0 provided login page with callback URL
Or facing auth.isAuthenticated$ is always false issue
Try setting the 'Application Type' to 'Single Page Application' in auth0 application properties page
This Auth guard not working with API response. When I run the code it always returns true. but I want to run guard base on api response. is their way to achieving that?
import {Injectable} from '#angular/core';
import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, Route} from '#angular/router';
import {
HttpClient,
HttpHeaders
} from '#angular/common/http';
import {Observable} from 'rxjs';
#Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router, private http: HttpClient) {
}
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
const sendData = {};
sendData['id'] = sessionStorage.getItem('id');
console.log(JSON.stringify(sendData));
const headers = new HttpHeaders()
.set('Content-Type', 'application/json')
.set('token', sessionStorage.getItem('auth') ? sessionStorage.getItem('auth') : 'test');
this.http.post('http://127.0.0.1:5000/auth',
JSON.stringify(sendData), {
headers
})
.subscribe(
(val: any) => {
},
response => {
this.router.navigate(['/login']);
},
() => {
console.log('The POST observable is now completed.');
});
return true;
}
}
Check this. You have returned true at the end of the canActivate authguard. This way it will always return true. Instead you should have it in the subscribe method of the http post request based on your condition. Something like this..
this.http.post('http://127.0.0.1:5000/auth',
JSON.stringify(sendData), {
headers
}).pipe(map(response => {
//suppose we get isAuthenticated bit in response. Your response obj may vary but logic shall be same
if (response.isAuthenticated) {
return true;
}
else {
return false;
}
}));
Thanks.
I'm struggling with connecting the ActivationGuard with an UserAuthenticationService, which is returning from server if the given user is logged or not. The main problem here imo is the fact, it's coming from an asynchro request.
I've got some code, made with help from one kind user on Stack. It's made with observables.
But the problem here is that I'm getting following error, when entering the protected components:
zone.js:388 Unhandled Promise rejection: Cannot read property 'do' of undefined;
My files:
ActivationGuard.ts
import {Injectable} from '#angular/core';
import {Router, CanActivate, RouterStateSnapshot, ActivatedRouteSnapshot} from '#angular/router';
import {Observable} from 'rxjs/Observable';
import {UserAuthenticationService} from './UserAuthenticationService';
#Injectable()
export class ActivationGuard implements CanActivate {
constructor(private router: Router, private userService: UserAuthenticationService) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
return this.userService.isUserAuthenticated
.do(success => {
if (!success) {
this.router.navigate(['/']);
}
});
}
}
UserAuthenticationService.ts
import {Injectable, OnInit} from '#angular/core';
import {Http} from '#angular/http';
import {Observable} from "rxjs/Observable";
#Injectable()
export class UserAuthenticationService implements OnInit {
public isUserAuthenticated: Observable<boolean>;
username: string = 'admin';
constructor(private http: Http) {}
ngOnInit(){
this.isUserAuthenticated = this.http.get(`http://localhost/api/auth/isLogged/${this.username}`)
.map(res => res.json())
.share();
}
}
Looking forward for any kind of help. If you have any questions let me know. Thank you.