How to pass additional information using auth0-js (to redirect the user after login)

Question

I would like to redirect the user to the current page where he was before the login workflow.

1. the user wants to go to /profile
2. the page is protected; the user is redirected to /login
3. log in workflow with auth0-js that redirect to /callback
4. I would like the callback page to redirect the user to the /profile page

Is there any possibilities to pass additional information to auth0-js (eg {from: '/profile'} )?

Here is my initialization of Auth0-js in my react app:

auth0 = new auth0.WebAuth({
        domain: 'xxx.auth0.com',
        clientID: 'xxx',
        redirectUri: 'http://localhost:3000/callback',
        audience: 'https://xxx.auth0.com/userinfo',
        responseType: 'token id_token',
        scope: 'openid profile offline_access'
    });

To log the user:

auth0.authorize();

I couldn't find way to do this without storing in the localStorage the information.

Answer 1

Disclosure: I work for Auth0.

Your application should not accept an arbitrary parameter in the callback and use it to redirect the user forward. I would recommend storing the information in localStorage and referencing it with a unique hash such as state .

For example

const state = getRandomBytes(32); // Assume that  this method will give you 32 bytes

localStorage[state] = { pathToGotoAfterAuth: '/somepath' };

auth0.authorize({
   state: state
});


// Then later
const authResult = auth0.parseHash();
const state = authResult.state;
const olderAppState = localStorage[state];
localStorage.remove(state);
redirect(olderAppState.pathToGotoAfterAuth);

Then upon callback, you'll receive this state and your application can then perform necessary actions using the stored version.

This has several advantages such as

• Being resilient to CSRF attacks.
• If you were to want to restore more data in future this is trivial.