# Invalid state error in vue app **URL:** \ **Category:** Get Help\ **Tags:** typescript, redirect, vue\ **Created:** [June 23, 2020, 4:11pm UTC](https://community.auth0.com/t/invalid-state-error-in-vue-app/45155 "2020-06-23T16:11:04Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![crazyoptimist](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/crazyoptimist/32/22037_2.png) [@crazyoptimist](https://community.auth0.com/u/crazyoptimist)\ **Post date:** [June 23, 2020, 4:11pm UTC](https://community.auth0.com/t/invalid-state-error-in-vue-app/45155/1 "2020-06-23T16:11:04Z")
Hi Auth0 Community! Our app is being built with vue/vuex on typescript and dealing with heavy data from an external api. We do not have any separate login URL, just our first page is the redirect URL itself, and the first page is to call an external api to consume data to display on it. Below is the redirection handling part: ```javascript //action async handleRedirectCallback({commit, dispatch}){ //here we use auth0 service, which is also attached below this code block return auth0.handleRedirectCallback().then(async (token: string) => { commit("sessionCreate", token) return auth0.getUser(token).then((res: AxiosResponse) => { commit("setUser", res.data) commit("loaded", true) return Promise.resolve(res); }) }).catch((auth: boolean) =>{ window.console.log(`${auth}`) }) } //In auth0 service async handleRedirectCallback(){ let token; let isAuthenticated = false try { if ( window.location.search.includes("code=") && window.location.search.includes("state=") ) { const { appState } = await this.auth0Client.handleRedirectCallback(); options.onRedirectCallback(appState); } } catch (e) { return Promise.reject(e) //Here I got rejected! } finally { isAuthenticated = await this.isAuthenticated(); if(isAuthenticated){ token = await this.getTokenSilently(); } } if(token){ return Promise.resolve(token) } return Promise.reject(isAuthenticated) } ``` It shows `Error: Invalid State` at first loading of the redirect URL, and if I refresh the page, it works, everything works well besides this issue. The problem is that external api call is being failed due to the Invalid State error because we need to call the external api using the credentials from auth0. Any help would be appreciated. Thanks in advance! Edit: While continuing debugging, I found out that this promise is being rejected ☹ `auth0Client.handleRedirectCallback();` ---
**Author:** ![nirmal1](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/nirmal1/32/27446_2.png) [@nirmal1](https://community.auth0.com/u/nirmal1)\ **Post date:** [November 19, 2021, 7:29am UTC](https://community.auth0.com/t/invalid-state-error-in-vue-app/45155/2 "2021-11-19T07:29:54Z")
I am also getting the same error with same VueJs, Typescript project. This occurs abruptly. ---
**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\ **Post date:** [November 19, 2021, 8:35am UTC](https://community.auth0.com/t/invalid-state-error-in-vue-app/45155/3 "2021-11-19T08:35:33Z")
Hey there @nirmal1 ! Can I ask you to create another topic for that and provide us with more context to troubleshoot? Thank you! ---
**Author:** ![ARBS23](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/arbs23/32/49573_2.png) [@ARBS23](https://community.auth0.com/u/ARBS23)\ **Post date:** [August 3, 2023, 11:33am UTC](https://community.auth0.com/t/invalid-state-error-in-vue-app/45155/4 "2023-08-03T11:33:40Z")
Found a solution here: > > > \### Describe the problem > > When using passwordless login with magic link, a lin…k is sent via email and this link gets opened in a new tab, with its own session storage. Since auth0Client uses sessionStorage to store the appState, the appState is lost on login. In particular the targetUrl (set on appState) is lost, making redirection of the user to the desired page after login impossible. > > Note that this problem doesn't happen when \`passwordlessMethod\` is set to \`'code'\`, only when it is set to \`'link'\`, since using code the code gets entered in the same tab. > > \### What was the expected behavior? > > Restoring appState (and in particular being able to redirect to the proper page after login) should work properly when using magic link, just like it does with other methods. > > \### Reproduction > > \> Detail the steps taken to reproduce this error, and whether this issue can be reproduced consistently or if it is intermittent. > \> \*\*Note\*\*: If clear, reproducable steps or the smallest sample app demonstrating misbehavior cannot be provided, we may not be able to follow up on this bug report. > > \- Set up universal login with passwordless and \`passwordlessMethod='link'\`. > \- save appState and start login flow with \`loginWithRedirect({ appState: { targetUrl: to.fullPath } });\` > \- click the link in the email > \- watch it open in a new tab and fail to find appState and to redirect when \`handleRedirectCallback\` gets called > > And just to be sure: > \- get a new magic link > \- instead of clicking it, copy the link into the auth0 tab where you entered your email (which is still on the univeral login page) > \- watch it succeed because the sessionStorage is still there in that tab > > \### Environment > > \> Please provide the following: > > \- \*\*Version of \`auth0-spa-js\` used:\*\* > "@auth0/auth0-spa-js": "^1.13.1", > > \- \*\*Which browsers have you tested in?\*\* > chrome > > \- \*\*Which framework are you using, if applicable (Angular, React, etc):\*\* > Vue > > \- \*\*Other modules/plugins/libraries that might be involved:\*\*