React User Info on Callback

[victorjr692]

Hi guys, I’m using the react 02-user-profile sample here: https://github.com/auth0-samples/auth0-react-samples/tree/master/02-User-Profile

I’m just wondering if there’s a way to display the user info right after they login and the get called back to the react application. I can see in the sample code I’m able to get the userinfo but only if I change to a different route after the callback.

When I tried modifying the code like below in App.js and Auth.js so that the auth prop has the userProfile after handleAuthentication(), the userProfile does not get rendered to screen.

{ 
      isAuthenticated() && (
        <div className="container">
          <div className="profile-area">
            <h1>{userProfile.name}</h1>
            <Panel header="Profile">
              <img src={userProfile.picture} alt="profile" />
              <div>
                <ControlLabel><Glyphicon glyph="user" /> Nickname</ControlLabel>
                <h3>{userProfile.nickname}</h3>
              </div>
              <pre>{JSON.stringify(userProfile, null, 2)}</pre>
            </Panel>
          </div>
        </div>
      )
    }

This is my Auth.js authentication:

    userProfile = {};
    handleAuthentication() {
        this.auth0.parseHash((err, authResult) => {
          if (authResult && authResult.accessToken && authResult.idToken) {
            this.auth0.client.userInfo(authResult.accessToken, (err, profile) => {
              if (profile) {
                this.userProfile = profile;
              }
            });
            this.setSession(authResult);
            history.replace('/home');
          } else if (err) {
            history.replace('/home');
            console.log(err);
            alert(`Error: ${err.error}. Check the console for further details.`);
          }
        });
      }

[mmaddex]

As you mentioned, and your screenshot show, the userProfile prop is being populated with user data, you just need to have React re-render the App component.

I’m thinking you’ll need to modify App.js to either

1. Store the profile info it’s state, so that when you call setState() the component will re-render. You might look at Profile.js for some inspiration.
2. You might also be able to use React’s shouldComponentUpdate() hook to re-render when the userProfile prop has changed.

Let me know if either of these do the trick. Good luck!

[victorjr692]

Thanks for the reply mmaddes. So I went ahead and added this code to Home.js

    constructor(props) {
        super(props);
        this.state = {
          profile: {}
        }
      }

      componentWillMount() {
        const { userProfile, getProfile } = this.props.auth;
        if (!userProfile) {
          getProfile( (err, profile) => {
            this.setState({
              profile: profile
            })
          })
        } else {
          this.setState({ profile: userProfile });
        }
      }

…

    render() {
        const { profile } = this.state;
        return (
        { 
              isAuthenticated() && (
                <div className="container">
                  <div className="profile-area">
                    <h1>{profile.name}</h1>
                    <Panel header="Profile">
                      <img src={profile.picture} alt="profile" />
                      <div>
                        <ControlLabel><Glyphicon glyph="user" /> Nickname</ControlLabel>
                        <h3>{profile.nickname}</h3>
                      </div>
                      <pre>{JSON.stringify(profile, null, 2)}</pre>
                    </Panel>
                  </div>
                </div>
              )
            }
    )
    }

It worked with adding this code to Home.js but I originally wanted in App.js. But when I put it in App.js it isn’t able to get the access_token from localstorage. I wonder why it works in the children components but not the App.js component?