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