CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-routerauth0
Tyler Jones
Tyler Jones

Reputation: 135

Why wont my Auth0 find my callback route in react?

Auth0 redirects to http://localhost:3000/callback#/acccess-token=dxy

I'm getting a blank screen in my react app.

Heres my main app.js

render((
    <HashRouter>
        <Main />        
    </HashRouter>
), $('#app')[0]);

My main contains my routes.js component.

class Routes extends Component {
    constructor(props, context) {
        super(props, context);

        this.state = { mainData: this.props.mainData };

        this.handleAuthentication = this.handleAuthentication.bind(this)
    }

    componentWillReceiveProps(newProps) {
        this.setState((previousState) => update(previousState, {
            mainData: { $set: newProps.mainData },
        }));
    }

    handleAuthentication(nextState, replace) {
        if (/access_token|id_token|error/.test(nextState.location.hash)) {
            this.props.auth.handleAuthentication();
        }
    }

    render() {
        return (
            <div>
          

                <Switch>

                  <Route path='/callback' render={props => {

                    this.handleAuthentication(props);

                    return <Callback {...props} />
                }} />
 
                    <Route exact path='/' render={props => (
                        <Dashboard changeAppBar={this.props.changeAppBar} userProfile={this.state.mainData.userProfile} windowHeight={this.props.wh} windowWidth={this.props.ww} />)}
                    />

                    <Route path='/settings' render={props => (
                        <Settings changeAppBar={this.props.changeAppBar} userProfile={this.state.mainData.userProfile} />)}
                    />





                </Switch>


            </div>
        );
    }
}

export default Routes;

Heres my init of auth0

    this.auth0 = new auth0.WebAuth({
      clientID: 'oiEjW4Mf6Ju4BvRfHeuObQnMbghKs38g',
      domain: 'cryptok1ng.auth0.com',
      responseType: 'token id_token',
      redirectUri: 'http://localhost:3000/callback'
    })

Everything works fine until I get redirected from auth0 back to /callback. Simply doesn't find a screen /route and renders nothing.

Screenshot of the console. /callback breakpoint is never hit.

enter image description here

Thanks for any help I've been going through the docs and answers to no avail.

Upvotes: 6

Views: 668

Answers (1)

Ragavan Rajan
Ragavan Rajan

Reputation: 4397

I am assuming you In Auth0 front end client configuration> you have added the callback URi as http://localhost:3000/callback and saved it.

And also in your callback.html file you added some tags to show up something once the token is authenticated properly.

If everything is fine and you still get blank error. Please post your console screenshot to have a look.

Upvotes: 0

Related Questions