# Problems with Auth0 loginWithRedirect() - stuck on callback after login | Vue.js

**URL:** <https://community.auth0.com/t/problems-with-auth0-loginwithredirect-stuck-on-callback-after-login-vue-js/116083>\
**Category:** Get Help\
**Tags:** login-experience, new-universal-login-experience\
**Created:** [September 13, 2023, 7:31am UTC](https://community.auth0.com/t/problems-with-auth0-loginwithredirect-stuck-on-callback-after-login-vue-js/116083 "2023-09-13T07:31:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![chrisen](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@chrisen](https://community.auth0.com/u/chrisen)\
**Post date:** [September 13, 2023, 7:31am UTC](https://community.auth0.com/t/problems-with-auth0-loginwithredirect-stuck-on-callback-after-login-vue-js/116083/1 "2023-09-13T07:31:58Z")

</div>

I got a problem with my vue application with Auth0.

I implemented auth0 inside my vue3 application according to the provided manual:[Vue.js Authentication By Example: Composition API](https://developer.auth0.com/resources/guides/spa/vue/basic-authentication)

I used as well the appState.

```auto
<template>
  <div>
    <q-btn
      label="Login"
      @click="login()"
    />
  </div>
</template>

<script>
import { useAuth0 } from "@auth0/auth0-vue";
export default {
  setup() {
    const { loginWithRedirect } = useAuth0();

    return {
      login: () => {
        loginWithRedirect({
          appState: { target: "/app/test" },
        });
      },
    };
  },
};
</script>

```

I am redirected to the authentication page (auth0) and can successfully login and be redirected to my callback page.

The problem is - that’s it. I don’t get redirected to “/app/test” or “/”.

According to the manual - I should be redirected to “/” if I don’t have the appState set. I tried both - I always get stuck on the callback page.

No errors or whatever - user is also successfully logged in.

I know - I could cheat with a redirect on the callback page with router.push(), but that’s not what I want - I want to pass some url parameters from the login page.

Can anyone help me?

---

<div class="post-metadata">

**Author:** ![chrisen](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@chrisen](https://community.auth0.com/u/chrisen)\
**Post date:** [September 14, 2023, 4:36am UTC](https://community.auth0.com/t/problems-with-auth0-loginwithredirect-stuck-on-callback-after-login-vue-js/116083/2 "2023-09-14T04:36:31Z")

</div>

Found the solution - it happened to be a problem with quasar and auth0-vue

For anybody who’s interested, check out the issue on GitHub

> <https://github.com/auth0/auth0-vue/issues/255>
>
> \### Checklist
> 
> \- \[\] The issue can be reproduced in the \[auth0-vue sample app\](h…ttps://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login) (or N/A).
> \- \[X\] I have looked into the \[Readme\](https://github.com/auth0/auth0-vue#readme), \[Examples\](https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md), and \[FAQ\](https://github.com/auth0/auth0-vue/blob/main/FAQ.md) and have not found a suitable solution or answer.
> \- \[X\] I have looked into the \[API documentation\](https://auth0.github.io/auth0-vue/) and have not found a suitable solution or answer.
> \- \[X\] I have searched the \[issues\](https://github.com/auth0/auth0-vue/issues) and have not found a suitable solution or answer.
> \- \[X\] I have searched the \[Auth0 Community\](https://community.auth0.com) forums and have not found a suitable solution or answer.
> \- \[X\] I agree to the terms within the \[Auth0 Code of Conduct\](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md).
> 
> \### Description
> 
> I am migrating to the new auth0-vue library. So far it has been a smooth ride but I am struggling with the last step. I want to return my users to the page they were initially routed to after they are successfully authenticated. There are two ways a user is asked to authenticate. Either by visiting a protected route or through a button on a login page. 
> 
> The login page uses the \`loginWIthRedirect\` function: 
> 
> \`\`\`
> auth0.loginWithRedirect({
> authorizationParams: {
> connection: \<tenantId\>,
> redirect\_uri: window.location.origin + '/pub/callback',
> },
> appState: {
> target: '/default-route',
> },
> })
> \`\`\`
> 
> Protected routes use a route guard:
> 
> \`\`\`
> createAuthGuard({
> app,
> redirectLoginOptions: {
> authorizationParams: {
> connection: \<tenantId\>,
> redirect\_uri: window.location.origin + '/pub/callback',
> },
> },
> })
> \`\`\`
> 
> The callback route is not protected and only displays a loading page without any logic. From what I read in the documentation and examples I would expect my callback route to be called. Afterwards, the state is extracted and the user is routed to the intended page.
> 
> The router is configured with the following routes:
> 
> \`\`\`
> const routes: RouteRecordRaw\[\] = \[
> {
> path: '/',
> name: availableRoutes.app\_base,
> component: () =\> import('layouts/MainLayout.vue'),
> redirect: { name: defaultRoute },
> children: \[
> {
> path: '',
> name: defaultRoute,
> props: true,
> component: () =\> import('pages/PersonalDashboardPage.vue'),
> },
> ...
> \],
> },
> {
> path: '/pub/',
> component: () =\> import('layouts/PublicLayout.vue'),
> children: \[
> {
> path: 'login',
> name: availableRoutes.login,
> props: true,
> component: () =\> import('pages/public/LoginPage.vue'),
> },
> \],
> },
> {
> path: '/pub/',
> component: () =\> import('layouts/FakeMainLayout.vue'),
> children: \[
> {
> path: 'callback',
> name: availableRoutes.callback,
> props: true,
> component: () =\> import('pages/public/LoginCallbackPage.vue'),
> },
> \],
> },
> {
> path: '/:catchAll(.\*)\*',
> redirect: { name: defaultRoute },
> },
> \];
> \`\`\`
> 
> \### Reproduction
> 
> Step 1: Configure the library as stated above
> Step 2: Visit the protected route or click the login button
> Step 3: Provide credentials
> Step 4: The callback page is displayed
> Step 5: No redirect to the intended page
> 
> I can observe that the URL is changed to \`window.location.origin\` without the \`code\` and \`state\` parameters. However, the site is not refreshed.
> 
> \### Additional context
> 
> I am using the Quasar framework (v2.12.5).
> 
> I ensured that the router was initialized before auth0. The route guard is created with the correct Vue instance.
> 
> \### auth0-vue version
> 
> 2.3.1
> 
> \### Vue version
> 
> 3.3.4
> 
> \### Which browsers have you tested in?
> 
> Chrome, Edge, Firefox

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [September 28, 2023, 4:37am UTC](https://community.auth0.com/t/problems-with-auth0-loginwithredirect-stuck-on-callback-after-login-vue-js/116083/3 "2023-09-28T04:37:18Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.