Search code examples
javascriptvue.jsauth0

Auth0 and Vue.js. Redirect to previous page


I am using auth0 to handle the Login in my Vue.js app.

I wrote an AuthService, where I handle all the auth0 stuff. In the constructor, I create a new auth0 object. Then I set the redirectUrl (https://auth0.com/docs/libraries/lock/v11/configuration#redirecturl-string-) to a default location, where I would like to get redirected:

import auth0 from 'auth0-js';

class AuthService {
  constructor() {
    this.auth0 = new auth0.WebAuth({
      domain: process.env.AUTH0_DOMAIN,
      clientID: process.env.AUTH0_CLIENTID,
      audience: process.env.AUTH0_AUDIENCE,
      responseType: process.env.AUTH0_RESPONSE_TYPE,
      scope: process.env.AUTH0_SCOPE,
      redirectUrl: 'http://localhost:8080/examplepage'
    });
}

So the login works, but I don't get redirected to my defined location, It stays at http://localhost:8080. I expected the redirect automatically after the successfull login. What's wrong?


Solution

  • I believe you need to change redirectUrl: to redirectUri:

    Also if you have not already, in your Auth0 account, you need to add the Url to your Allowed Callback URLs https://auth0.com/docs/quickstart/spa/vanillajs/01-login#configure-callback-urls

    There seems to be an inconsistency in their naming convention, or perhaps for some reason it is purposeful. The docs you address are for "Lock for Web" and it does have "redirectUrl" but in the "auth0.WebAuth" parameters it uses redirectUri https://github.com/auth0/auth0.js and https://auth0.com/docs/users/guides/redirect-users-after-login