Auth0 Home Blog Docs

For some reason I cannot get the profile information or Id in my app.js folder even though I can in my auth.js file

#1

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);