Error: accessToken parameter is not valid (React example Profile implementation)

[jctobey]

Hello!

I really like the Auth0 service so far, I’ve found implementing Auth0 to be pretty painless until I ran into this issue!

• Which SDK does this apply to? auth0.js version 9.8.2
• Which verison of the SDK you are using? Using Node to run Auth0 in a react app
• Which version of the platform are you facing this error on? I’m using Node v10.14.1
• Was this code working before? Have you made any changes in the dashboard recently? I have reviewed the code in the react github docs (GitHub - auth0-samples/auth0-react-samples: Auth0 Integration Samples for React Applications) and gone through the ‘User Profile’ react tutorial provided on the auth0 web site. I have not made any dashboard changes recently.

I implemented auth0 in my application, the Authentication is working properly until I try to view the ‘profile’ page that is supplied in this documentation: https://github.com/auth0-samples/auth0-react-samples/blob/master/02-User-Profile/src/Profile/Profile.js

I get the error ‘Error: accesstoken parameter is not valid’ thrown from this code in the Auth component:

   getUserInfo(cb) {
    this.auth0.client.userInfo(this.accessToken, (err, profile) => {
      if (profile) {
        this.userProfile = profile;
      }
      cb(err, profile);
    });
  }      

This is the code for profile, taken from the example code in the React SDK User Profile set-up.

> import React, { Component } from "react";
> import { Panel, ControlLabel, Glyphicon } from "react-bootstrap";
// import "./Profile.css";

class Profile extends Component {
  componentWillMount() {
    this.setState({ profile: {} });
    const { userProfile, getUserInfo } = this.props.auth;
    if (!userProfile) {
      getUserInfo((err, profile) => {
        this.setState({ profile });
      });
    } else {
      this.setState({ profile: userProfile });
    }
  }
  render() {
    const { profile } = this.state;
    return (
      <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>
    );
  }
}

export default Profile;

I wanted to note that I seem to be using ‘auth0.js’ instead of ‘lock.js’ in my index file, which according to some of the documentation is outdated? Could this be related to the parameter error thrown above? This is the script code in my index file.

<script
 type="text/javascript"
 src="node_modules/auth0-js/build/auth0.js"
 ></script>

[jctobey]

Closing this, because I switched to implementing auth0 lock over auth0 js. Also, passing a function in the callback seemed to resolve the issue described in my post:

this.props.auth.lock.getUserInfo(oldToken, function(err, profile) {
        console.log(profile);
        newProfile = profile;
      });
      this.setState({ profile: newProfile });
    } else {
      this.setState({ profile: userProfile });
    }
  }

[James.Morrison]

I’m glad you were able to find a resolution to your issue. Please keep us posted on if you have any additional questions in the future!