I'm an Angular newbie working on user authentication (IDE: VS Code) (using auth0 as authentication service). My problem is that when I try to use the function below, "get", "authenticated", and "boolean" all come up underlined in red, and I don't know what's going on. Basically, the function is supposed to check whether the parsed argument is true or not:
get authenticated(): boolean {
return JSON.parse(localStorage.getItem(this._authFlag) || '{}');
}
VS Code tells me it cannot find the names "get" and "authenticated", which I'm assuming is leading to the error of boolean needing to be a type and not a value. Any ideas on what I'm doing wrong? Here's the full component file:
import { Injectable } from '@angular/core';
//npm install --save @types/auth0-js (CLI cmd)
import * as auth0 from 'auth0-js';
import { environment } from '../../environments/environment';
import{
Observable,
BehaviorSubject,
bindNodeCallback,
of
} from 'rxjs';
import { Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthService {
auth0 = new auth0.WebAuth({
clientID: environment.auth0.clientID,
domain: environment.auth0.domain,
responseType: 'token id_token',
scope: 'openid profile email'
});
//Track whether or not to renew token
private _authFlag = 'isLoggedIn';
private _userProfileFlag = 'userProfile';
//Store authentication data & create stream for token
token$!: Observable<string>;
//Create stream for user profile data
userProfile$ = new BehaviorSubject<any>(null);
//Authentication Navigation
onAuthSuccessUrl = '/';
onAuthFailureUrl = '/';
logoutUrl = environment.auth0.logoutUrl;
//Create observable of Auth0, then parseHash() function to gather 'auth' results
parseHash$ = bindNodeCallback(this.auth0.parseHash.bind(this.auth0));
//Create observable of Auth0 checkSession() function to verify authorization server session and renew tokens
checkSession$ = bindNodeCallback(this.auth0.checkSession.bind(this.auth0));
constructor(private router: Router) {
const userProfile = localStorage.getItem(this._userProfileFlag);
if (userProfile) {
this.userProfile$.next(JSON.parse(userProfile));
}
}
login = () => this.auth0.authorize();
handleLoginCallback = () => {
if (window.location.hash && !this.authenticated) {
this.parseHash$().subscribe({
next: authResult => {
this._setAuth(authResult);
window.location.hash = '';
this.router.navigate([this.onAuthSuccessUrl]);
},
error: err => this._handleError(err)
});
}
};
//Save authentication data and update login status subject
private _setAuth = (authResult: any) => {
//Observable of token
this.token$ = of(authResult.accessToken);
const userProfile = authResult.idTokenPayload;
//Emit value for user data subject
this.userProfile$.next(userProfile);
//save 'userProfile' in 'localStorage'
localStorage.setItem(this._userProfileFlag, JSON.stringify(userProfile));
//Set flag in local storage stating that this app is logged in
localStorage.setItem(this._authFlag, JSON.stringify(true));
const renewAuth = () => {
if (this.authenticated) {
this.checkSession$({}).subscribe({
next: authResult => this._setAuth(authResult),
error: err => {
localStorage.removeItem(this._authFlag);
localStorage.removeItem(this._userProfileFlag);
this.router.navigate([this.onAuthFailureUrl]);
}
});
}
}
const logout = () => {
//Set authentication status flag in local storage to false
localStorage.setItem(this._authFlag, JSON.stringify(false));
//remove the userProfile data
localStorage.removeItem(this._userProfileFlag);
//refresh, then redirect to homepage
this.auth0.logout({
returnTo: this.logoutUrl,
clientID: environment.auth0.clientID
});
};
get authenticated(): boolean {
return JSON.parse(localStorage.getItem(this._authFlag) || '{}');
}
}
//Utility functions
private _handleError = (err: { error_description: any; }) => {
if (err.error_description) {
console.error(`Error: ${err.error_description}`);
} else {
console.error(`Error: ${JSON.stringify(err)}`);
}
};
}
Issue 1: authenticated getter placed in wrong place
From your code,
private _setAuth = (authResult: any) => {
...
get authenticated(): boolean {
return JSON.parse(localStorage.getItem(this._authFlag) || '{}');
}
}
Solution for Issue 1: Move out authenticated getter of _setAuth method.
private _setAuth = (authResult: any) => {
...
}
get authenticated(): boolean {
return JSON.parse(localStorage.getItem(this._authFlag) || '{}');
}
Issue 2: Duplicate variable name authenticated with getter authenticated.
You don't need to create variable while you have authenticated getter. Otherwise it is conflicted with variable name
Solution for Issue 2: Remove the variable declaration.
authenticated!: boolean;