Not able to access an id property from props in React - node.js

Question

I'm trying to build a React app where users can save specific things under their ID.
I'm using nodeJS with React and auth0 for authentication.
I'm trying to access a property on the this.props.auth object and find if that property exists in my db so if there's a match something can be saved under the user's ID.
However I'm not able to access this.props.auth.id as shown in the code below but I can access this.props.auth
Any pointers?
.
.
.
Auth.js
import history from '../../history';
import auth0 from 'auth0-js';
import { AUTH0_CONFIG } from '../../auth0';
import API from "../../utils/API"
export default class Auth {
accessToken;
idToken;
expiresAt;
userProfile;
userImage;
name;
id;
auth0 = new auth0.WebAuth({
domain: AUTH0_CONFIG.domain,
clientID: AUTH0_CONFIG.clientId,
redirectUri: AUTH0_CONFIG.callbackUrl,
responseType: 'token id_token',
scope: 'openid profile'
})
constructor() {
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
this.handleAuthentication = this.handleAuthentication.bind(this);
this.isAuthenticated = this.isAuthenticated.bind(this);
this.getAccessToken = this.getAccessToken.bind(this);
this.getIdToken = this.getIdToken.bind(this);
this.renewSession = this.renewSession.bind(this);
this.userInfo = this.userInfo.bind(this)
}
login() {
this.auth0.authorize();
}
handleAuthentication() {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
this.setSession(authResult);
API.saveUser(authResult.idTokenPayload);
history.replace('/')
} else if (err) {
history.replace('/');
console.log(err);
alert(`Error: ${err.error}. Check the console for further details.`);
}
});
}
getAccessToken() {
return this.accessToken;
}
getIdToken() {
return this.idToken;
}
userInfo() {
return this.userProfile
}
setSession(authResult) {
// Set isLoggedIn flag in localStorage
localStorage.setItem('isLoggedIn', 'true');
console.log(authResult);
let expiresAt = (authResult.expiresIn * 1000) + new Date().getTime();
this.accessToken = authResult.accessToken
this.idToken = authResult.idToken;
this.expiresAt = expiresAt;
this.userImage = authResult.idTokenPayload.picture;
this.name = authResult.idTokenPayload.name.split(' ', 1);
this.id = authResult.idTokenPayload.nickname;
// navigate to the home route
history.replace('/');
}
renewSession() {
this.auth0.checkSession({}, (err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
this.setSession(authResult)
console.log('authresult', authResult);
} else if (err) {
this.logout();
console.log(err);
alert(`Could not get a new token (${err.error}: ${err.error_description}).`);
}
});
}
logout() {
// Remove tokens and expiry time
this.accessToken = null;
this.idToken = null;
this.expiresAt = 0;
// Remove isLoggedIn flag from localStorage
localStorage.removeItem('isLoggedIn');
// navigate to the home route
history.replace('/');
}
isAuthenticated() {
// Check whether the current time is past the
// access token's expiry time
let expiresAt = this.expiresAt;
return new Date().getTime() < expiresAt;
}
}
Home.js
class Home extends Component {
constructor(props) {
super(props)
console.log(this.props); // can access this
console.log(this.props.auth.id); // this shows undefined
this.state = {
news: [],
summary:[],
summaryUrl: '',
userID: '',
user: '', //
pageLoading: true,
gistLoading: true
}
// console.log(this.state);
}
goTo(route) {
// console.log(history, route);
this.props.history.replace(`/${route}`)
}
login() {
this.props.auth.login();
}
logout() {
this.props.auth.logout();
}
// API call to display trending news
componentDidMount() {
API.getArticles()
.then(res => {
this.setState({
news: res.data,
pageLoading: false,
// user: this.props.auth.id
})
// console.log(this.state);
});
API.getSavedUsers()
.then((res) => {
console.log();
res.data.forEach((el) => {
console.log(this.props.auth.id); // shows undefined
if(el.name === this.props.auth.id){
this.setState({
userID: el.authID
})
} else {
console.log('notfound');
}
})
console.log(this.state);
})
const { renewSession } = this.props.auth;
if (localStorage.getItem('isLoggedIn') === 'true') {
renewSession();
}
}

Answer 1

I may be wrong but from the snapshot the data-type of auth property is Auth which is an object but if you look at it, match, location etc are all shown as {…} that symbolises its an object and hence we fetch the properties using dot. I would suggest parsing the auth first and then accessing the inner properties as follows:
const auth = JSON.parse(this.props.auth);
console.log(auth.id);
Could you try this for once.