- Which SDK does this apply to? (Ex: auth-node)
Angular 5
-
Which version of the platform are you facing this error on? (Ex: Node 6.4)
Angular 5 -
Was this code working before? Have you made any changes in the dashboard recently?
It has never worked -
Please capture and attach the stacktrace, it helps a lot!
Error message from the console is listed below -
Please share the code that is causing the error.
See below -
Can you share a minimum reproducible?
Yes -
Please capture and attach a HAR from the browser if this is an Authentication Bug / Issue.
Not sure what that is -
If this is a Management API Client bug, some libraries allow you to capture a HAR.
After user logs in, I continue to get this error message:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘access_token’
Error: Cannot match any routes. URL Segment: ‘access_token’
at ApplyRedirects.push…/node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1326)
at CatchSubscriber.selector (router.js:1307)
at CatchSubscriber.push…/node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error
The error goes on and on. But, I always get this error message. I set up the Callback URL to be something other then the home page.
But it always goes back to the Home page.
Below is the home page:
http://localhost:4200/
Below is the callback page I want to use:
http://localhost:4200/#/portal-home
But it never works. Note, I even added this URL to the list of the callback URLs in the Application.
Any ideas what is wrong?
Below is the code for reference (note for space when I cut-n-paste the code it added #32 everywhere. I can email code to someone if that will make it easier):
Any help is much appreciated.
Thanks.
Variable Code File:
src\app\auth\auth0-variables.ts
interface AuthConfig {
clientID: string;
domain: string;
callbackURL: string;
callbackURLDevelopment: string;
}
export const AUTH_CONFIG: AuthConfig = {
clientID: ‘d7ghOqaAbwvdT5D5pe7gebJs2p9OvAuH’,
domain: ‘genphygrp.auth0.com’,
callbackURL: ‘http://test.genesisdocs.org/’,
callbackURLDevelopment: ‘http://localhost:4200/#/portal-home’
// callbackURL: ‘http://genonline.centralus.cloudapp.azure.com/callback’
};
Auth Service Code file:
import { Injectable } from ‘@angular/core’;
import { AUTH_CONFIG } from ‘./auth0-variables’;
import { environment } from ‘…/…/environments/environment’;
import { Router } from ‘@angular/router’;
import { Globals } from ‘…/globals’;
import * as auth0 from ‘auth0-js’;
(window as any).global = window;
@Injectable()
export class AuthService {
userProfile: any;
requestedScopes: string = ‘openid profile read:employment-ads edit:employment-ads’;
profile: any;
public genRole: string;
public nickName: string;
public siteName: string;
auth0 = new auth0.WebAuth({
clientID: AUTH_CONFIG.clientID,
domain: AUTH_CONFIG.domain,
responseType: ‘token id_token’,
audience: https://${AUTH_CONFIG.domain}/userinfo,
redirectUri: environment.production === true ? AUTH_CONFIG.callbackURL : AUTH_CONFIG.callbackURLDevelopment,
// redirectUri: AUTH_CONFIG.callbackURL,
scope: this.requestedScopes
});
constructor(
public router: Router,
public globals: Globals
) {
console.log('Angular Production Mode = ’ + environment.production);
}
public login(): void {
this.auth0.authorize();
}
public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
console.log(‘In handleAuthentication in auth.service.ts’);
if (authResult && authResult.accessToken && authResult.idToken) {
this.setSession(authResult);
this.getProfile((err2, profile) => {
this.profile = profile;
console.log(‘this.profile.name=’);
console.log(this.profile.name);
console.log(‘this.profile.nickname=’);
console.log(this.profile.nickname);
console.log(‘this.profile[https://gpg.com]=’);
console.log(this.profile[‘https://gpg.com’]);
this.globals.userLogin = this.profile.name;
console.log(‘this.globals.userLogin=’);
console.log(this.globals.userLogin);
});
this.router.navigate([‘/home’]);
} else if (err) {
this.router.navigate([‘/home’]);
console.log(err);
alert(Error: ${err.error}. Check the console for further details.);
}
});
}
public userRoles(scopes: Array<string>): boolean {
const grantedScopes = JSON.parse(localStorage.getItem(‘scopes’)).split(’ ');
return scopes.every(scope => grantedScopes.includes(scope));
}
public getProfile(cb): void {
const accessToken = localStorage.getItem(‘access_token’);
if (!accessToken) {
throw new Error(‘Access token must exist to fetch profile’);
}
const self = this;
this.auth0.client.userInfo(accessToken, (err, profile) => {
if (profile) {
self.userProfile = profile;
console.log(‘profile from auth.service.ts’);
console.log(profile);
console.log(self.userProfile.name);
console.log(self.userProfile.nickname);
console.log(self.userProfile[‘https://gpg.com’]);
this.genRole = self.userProfile[‘https://gpg.com’];
console.log('this.genRole = ’ + this.genRole);
this.nickName = self.userProfile.nickname;
console.log('this.nickName = ’ + this.nickName);
this.siteName = self.userProfile[‘https://sitename.com’] || this.nickName;
console.log('this.siteName = ’ + this.siteName);
}
cb(err, profile);
});
}
private setSession(authResult): void {
// Set the time that the access token will expire at
const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
// If there is a value on the scope param from the authResult,
// use it to set scopes in the session for the user. Otherwise
// use the scopes as requested. If no scopes were requested,
// set it to nothing
const scopes = authResult.scope || this.requestedScopes || ‘’;
console.log(‘authResult.scope from auth.service.ts’);
console.log(authResult.scope);
localStorage.setItem(‘access_token’, authResult.accessToken);
localStorage.setItem(‘id_token’, authResult.idToken);
localStorage.setItem(‘expires_at’, expiresAt);
localStorage.setItem(‘scopes’, JSON.stringify(scopes));
}
public logout(): void {
// Remove tokens and expiry time from localStorage
localStorage.removeItem(‘access_token’);
localStorage.removeItem(‘id_token’);
localStorage.removeItem(‘expires_at’);
localStorage.removeItem(‘scopes’);
// Go back to the home route
this.router.navigate([‘/’]);
}
public isAuthenticated(): boolean {
// Check whether the current time is past the
// access token’s expiry time
const expiresAt = JSON.parse(localStorage.getItem(‘expires_at’) || ‘{}’);
return new Date().getTime() < expiresAt;
}
public userHasScopes(scopes: Array<string>): boolean {
const grantedScopes = JSON.parse(localStorage.getItem(‘scopes’)).split(’ ');
return scopes.every(scope => grantedScopes.includes(scope));
}
}