I am using @auth0/auth0-spa-js in a React project. I copied and pasted the code from the tutorial and I am getting an invalid state error (I changed some location vars to window.location). I was using the Auth0Provider previously, so the connection should be good.
My code:
async loadLogin() {
createAuth0Client({
domain: "domain",
clientId: "id",
authorizationParams: {
redirect_uri: window.location.origin
}
}).then(async (auth0Client) => {
// Assumes a button with id "login" in the DOM
const loginButton = document.getElementById("login");
loginButton?.addEventListener("click", (e) => {
e.preventDefault();
auth0Client.loginWithRedirect();
});
if (window.location.search.includes("state=") &&
(window.location.search.includes("code=") ||
window.location.search.includes("error="))) {
await auth0Client.handleRedirectCallback();
window.history.replaceState({}, document.title, "/");
}
// Assumes a button with id "logout" in the DOM
const logoutButton = document.getElementById("logout");
logoutButton?.addEventListener("click", (e) => {
e.preventDefault();
auth0Client.logout();
});
//const isAuthenticated = await auth0Client.isAuthenticated();
//const userProfile = await auth0Client.getUser();
//// Assumes an element with id "profile" in the DOM
//const profileElement = document.getElementById("profile");
//if (isAuthenticated) {
//profileElement?.style.display = "block";
//profileElement?.innerHTML = `
//<p>${userProfile.name}</p>
//<img src="${userProfile.picture}" />
//`;
//} else {
//profileElement.style.display = "none";
//}
});
}
The error:
ERROR
Invalid state
d@http://localhost:3001/static/js/bundle.js:8056:5
handleRedirectCallback@http://localhost:3001/static/js/bundle.js:8809:19
./src/services/todd.ts/loadLogin/<@http://localhost:3001/static/js/bundle.js:5092:27