auth0/auth0-vue

SDK redirects to "/" even though appState.target is set on loginWithRedirect()

mmgolden opened this issue · 4 comments

mmgolden commented

Describe the problem

After signing up, users land on the callback URL (/callback). After landing on the callback page, I want users that have signed up to be redirected to onboarding (/onboarding). If they sign into their account, I want them to be redirected to their dashboard (/dashboard). I followed the instructions in the FAQs and added appState.target to loginWithRedirect() but it always goes to "/" no matter what.

What was the expected behavior?

I expect that users should be redirected to /onboarding after signing up.

Reproduction

import { createAuth0 } from "@auth0/auth0-vue";

const auth0 = createAuth0({
  domain: process.env.VUE_APP_AUTH0_DOMAIN,
  clientId: process.env.VUE_APP_AUTH0_CLIENT_ID,
  authorizationParams: {
    audience: process.env.VUE_APP_AUTH0_AUDIENCE,
    redirect_uri: process.env.VUE_APP_AUTH0_CALLBACK_URL
  }
});

<script setup>
import { onMounted } from "vue";
import { useAuth0 } from "@auth0/auth0-vue";

const { loginWithRedirect } = useAuth0();

onMounted(async () => {
      try {
           await loginWithRedirect({
                appState: {
                  target: "/onboarding" // This does nothing
                },
                authorizationParams: {
                  screen_hint: "signup"
                }
              });
      } catch (error) {
         // ...
      }
});
</script>

Environment

  • Version of auth0-vue used: 2.1.0
  • Version of vue used: 3.2.45
  • Which browsers have you tested in? Chrome Version 110.0.5481.177
frederikprijck commented

Thanks for reaching out.

Can you please share a reproduction? I just tried this in our sample application and it works as expected.

So would be useful to get a reproduction and exact steps to reproduce the behavior you are seeing.

mmgolden commented

Thanks for reaching out.

Can you please share a reproduction? I just tried this in our sample application and it works as expected.

So would be useful to get a reproduction and exact steps to reproduce the behavior you are seeing.

@frederikprijck Thanks for the quick response! Here is a basic reproduction.

Steps to reproduce:

  1. Go to /signup
  2. Redirected to the universal login
  3. Sign up for a new account using the universal login
  4. Redirected to /callback
  5. Redirected to /dashboard instead of /onboarding
frederikprijck commented

I forked your codesandbox, filled in my auth0 credentials and added a <router-view></router-view>. When I then go to /signup, I eventualy end up at onboarding.

This is the flow I am seeing:

  • User goes to /signup
  • Signup at Auth0
  • Redirected to /callback
  • Url shows /
  • Redirected to /onboarding

We might want to look into avoiding the url to show / in between /callback and /onboarding. However, I can't reproduce the behavior you are seeing, could you try in my forked sample?

mmgolden commented

@frederikprijck Thank you for looking into this! I figured out what is happening. If you go to /signin and click the "sign up" link, you still have the same state from the signin page. This takes you to the dashboard instead of onboarding. If I go to /signup, it does work. I will probably need to add an action to track if they are signing up and send them to onboarding. You can close this issue.

  • 👍1