Why does the console.log comeback as undefined in my app.js file but works perfectly fine in auth.js file. I really need the token decoded so I can display the username.
Here is my auth.js file , I am also using a hosted page instead of lock.
import auth0 from ‘auth0-js’;
import jwtDecode from ‘jwt-decode’;
class Auth {
constructor() {
this.auth0 = new auth0.WebAuth({
domain: ‘test.eu.auth0.com’,
clientID: ‘njkkjgjhgjkgh’,
redirectUri: ‘http://localhost:3000/callback’,
audience: ‘https://test.eu.auth0.com/userinfo’,
responseType: ‘token id_token’,
scope: ‘openid profile email’
});
this.authFlag = 'isLoggedIn';
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
this.handleAuthentication = this.handleAuthentication.bind(this);
this.isAuthenticated = this.isAuthenticated.bind(this);
}
login() {
this.auth0.authorize();
}
getIdToken() {
return this.idToken;
}
handleAuthentication() {
return new Promise((resolve, reject) => {
this.auth0.parseHash((err, authResult) => {
if (err) return reject(err);
if (!authResult || !authResult.idToken) {
return reject(err);
}
this.setSession(authResult);
resolve();
});
})
}
setSession(authResult) {
this.idToken = authResult.idToken;
console.log(this.auth0);
console.log(jwtDecode(this.idToken));
// set the time that the id token will expire at
this.expiresAt = authResult.expiresIn * 1000 + new Date().getTime();
localStorage.setItem(this.authFlag, JSON.stringify(true));
}
logout() {
localStorage.setItem(this.authFlag, JSON.stringify(false));
this.auth0.logout({
returnTo: ‘http://localhost:3000’,
clientID: ‘jkfhjkfjkffhjkfhfjk’
});
}
silentAuth() {
if(this.isAuthenticated()) {
return new Promise((resolve, reject) => {
this.auth0.checkSession({}, (err, authResult) => {
if (err) {
localStorage.removeItem(this.authFlag);
return reject(err);
}
this.setSession(authResult);
resolve();
});
});
}
}
isAuthenticated() {
// Check whether the current time is past the token’s expiry time
//return new Date().getTime() < this.expiresAt;
return JSON.parse(localStorage.getItem(this.authFlag));
}
getProfile() {
if(this.isAuthenticated()) {
return this.idToken;
}
}
}
console.log(auth);
const auth = new Auth();
console.log(auth);
export default auth;
Here is my app.js file
import React, { Component } from ‘react’;
import {Route, withRouter} from ‘react-router-dom’;
import MainNav from ‘./components/MainNav’;
import Callback from ‘./components/Callback’;
import HomePage from ‘./components/HomePage’;
import CreateBook from ‘./components/CreateBook’;
import ‘./App.css’;
import auth from ‘./Auth’;
import jwtDecode from ‘jwt-decode’;
import CreatePage from ‘./components/CreatePage’;
if(auth.isAuthenticated) {
console.log(auth.getProfile());
console.log(auth.getIdToken());
}
class App extends Component {
async componentDidMount() {
if (this.props.location.pathname === ‘/callback’) return;
try {
await auth.silentAuth();
console.log(auth.getIdToken());
this.forceUpdate();
} catch (err) {
if (err.error === ‘login_required’) return;
console.log(err.error);
}
}
render() {
return (
);
}
}
export default withRouter(App);