Redirect not working as expected after login (Vue SPA)

General
#1

I’m building a Vue3 SPA with auth0 and for some reason I can’t get the redirect to work correctly.

I’ve tried both of these:

  1. Specifying the redirect_uri as a parameter for createAuth0Client like so:
client = await createAuth0Client({
    redirect_uri: "http://localhost:8080/about",
    ...options
  })
  1. Specifying the redirect_uri in the immediate function tied to the login button, like so:
login() {
      this.$auth.loginWithRedirect({
        redirect_uri: 'http://localhost:8080/callback'
      });
},

Both fail to redirect the user to /about and instead land them on the homepage /. /about is definitely in the allowed URIs and there are no errors in the console after logging in.

To make things even weirder, right after login the URL bar of the browser says something like this for just a second:

http://localhost:8080/about?code=blahblahblah

but then quickly redirects to http://localhost:8080. So it seems it know that it should send the user to /about but is failing to.

Why might this be?

#2

As an idea, could this be related to http:// vs https://?

I don’t have an https domain to test yet, but perhaps someone can comment.

#3

Hi @ilmoi

Use the network tab of developer tools to figure out what is going on here. It looks like you redirect to your callback (the amount page) then that page exchanges the code for a token, then redirects to your home page. But the network tab will show exactly what happens here.

John

#4

Hey @john.gateley - that’s smart.

I gave it a go and what I’m seeing is:

  1. POST, 302, https://ilmoi.eu.auth0.com/u/login?state=xyz

  2. GET, 302, https://accounts.google.com/o/oauth2/auth?response_type=code&redirect_uri=https%3A%2F%2Flogin.eu.auth0.com%2Flogin%2Fcallback&scope=xyz&state=xyz&client_id=xyz

  3. GET, 302, https://ilmoi.eu.auth0.com/login/callback?state=xyz&code=xyz&scope=xyz&authuser=0&prompt=none

  4. GET, 200, http://localhost:8080/overview?code=xyz&state=xyz%3D%3D

  5. GET, 200, http://localhost:8080/js/app.js and http://localhost:8080/js/chunk-vendors.js, which I believe load whenever I refresh the page, regardless of auth0

So it seems (4) is the correct page (I am indeed trying to redirect to overview)? But why then after (4) I get the homepage loading?

#5

Hi @ilmoi

I can’t help much with that - that is now outside of Auth0. Your SDK may be doing this, or something in your code is doing the redirect.

It is normal for the callback URL to redirect to another URL after the code is exchanged.

John

#6

So the auth0 part is working correctly?

No probs, I’ll post a solution here when I figure it out.

1 Like
#7

Thanks a lot for that!

#8

Posted a solution here. Duplicating below.

For anyone else re-using Lucas’s code above (thanks a ton @lstyles, your repo is literally the only example I found online for vue3), if you’re having trouble with redirects working correctly you need to add this line:

state.error = null;

after this line:

const {appState} = await client.handleRedirectCallback()

in Lucas’s index.js file.

I spent more time than I’ll ever acknowledge learning this:)

1 Like
#9

Thanks a ton for sharing it with the rest of community!

#10