Invalid state error in vue app

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:

//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 :frowning:
auth0Client.handleRedirectCallback();

1 Like

I am also getting the same error with same VueJs, Typescript project. This occurs abruptly.

Hey there @nirmal1 !

Can I ask you to create another topic for that and provide us with more context to troubleshoot? Thank you!

Found a solution here: