CODEWITHSUNDEEP
reactjsauth0
Hasnaa3
Hasnaa3

Reputation: 1

Auth0 is not passing user props with react.js class components

I have multiple routes in my app and I have added Auth0 in Header.js (a child of App.js) to be able to keep the user logged-in amongst all the routes. I was also able to get Auth0 user prop object (name, email, and picture) to create accounts for the users in my database. Now in another child component of App.js (Feed.js), I'm trying to use the email from Auth0 props as a query parameter to send a GET request to the database, but each time I do so I either receive an error (user is not found) or undefined. Feed.js code looks like this:

import React, { Component } from 'react'
import axios from "axios";
import { withAuth0 ,auth0} from '@auth0/auth0-react';

class Feed extends Component {
constructor(props){
  super(props);
  this.state={
   userdata:[]
  }

}
getdata = async() => {
  await axios
    .get(`http://localhost:1177/getuser?email=this.props.auth0.user.email`)
    .then((res) => {
      this.setState({
        userdata: res.data,
      });
    });
};

  render() {
    this.getdata();
    return (
      <div>
        <img src={this.state.userdata.pp} alt={this.state.userdata.username} />
        <h1>{this.state.userdata.username}</h1>
        <h1>{this.state.userdata.email}</h1>
      </div>
    )
  }
}

export default withAuth0(Feed)

So any ideas on how to make this work?

Upvotes: 0

Views: 169

Answers (1)

orsisi
orsisi

Reputation: 199

You might have an error because the expression used in the template literal is not correctly typed between a dollar sign and curly braces in the GET request.

Try this:

`http://localhost:1177/getuser?email=${this.props.auth0.user.email}`;

Upvotes: 1

Related Questions