I am using @auth0/auth0-spa-js library(the latest version 1.19.2).
My issue is that loginWithRedirect is not working, but loginWithPopup works properly.
I have the loginWithRedirect function in React Context API.
let auth0Client = null;
const initialAuthState = {
isAuthenticated: false,
isInitialised: false,
user: null,
info: null
};
const reducer = (state, action) => {
switch (action.type) {
case 'INITIALISE': {
const { isAuthenticated, user, info } = action.payload;
return {
...state,
isAuthenticated,
isInitialised: true,
user,
info
};
}
case 'LOGIN': {
const { user, info } = action.payload;
return {
...state,
isAuthenticated: true,
user,
info
};
}
default: {
return { ...state };
}
}
};
const AuthContext = createContext({
...initialAuthState,
method: 'Auth0',
loginWithRedirect: () => Promise.resolve(),
});
export const AuthProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialAuthState);
const onLoginSuccess = async ({ id_token, user, actionType }) => {
if (id_token) {
axios.defaults.headers.common.Authorization = `Bearer ${id_token}`;
axios.defaults.headers.common['Content-Type'] = 'application/json';
} else {
delete axios.defaults.headers.common.Authorization;
}
const data = JSON.stringify({
email: user.email,
name: user.name,
avatar: user.picture
});
const me = await axios.post(`${backendUrl}/check-user`, data, {
headers: { 'Content-Type': 'application/json' }
});
dispatch({
type: actionType || 'LOGIN',
payload: {
isAuthenticated: true,
user: {
id: user.sub,
avatar: user.picture,
email: user.email,
name: user.name,
},
info: me.data.user
}
});
};
const loginWithRedirect = async options => {
await auth0Client.loginWithRedirect(options);
await auth0Client.handleRedirectCallback();
// And then what should I do here?
const isAuthenticated = await auth0Client.isAuthenticated();
};
useEffect(() => {
const initialise = async () => {
try {
auth0Client = new Auth0Client({
redirect_uri: `${window.location.origin}/verification`,
cacheLocation: 'localstorage',
...auth0Config
});
await auth0Client.checkSession();
const isAuthenticated = await auth0Client.isAuthenticated();
if (isAuthenticated) {
const user = await auth0Client.getUser();
const claims = await auth0Client.getIdTokenClaims();
const id_token = claims.__raw;
await onLoginSuccess({ id_token, user, actionType: 'INITIALISE' });
} else {
dispatch({
type: 'INITIALISE',
payload: {
isAuthenticated,
user: null,
info: null
}
});
}
} catch (err) {
console.error(err);
dispatch({
type: 'INITIALISE',
payload: {
isAuthenticated: false,
user: null,
info: null
}
});
}
};
initialise();
}, []);
if (!state.isInitialised) {
return <SplashScreen />;
}
return (
<AuthContext.Provider
value={{
...state,
method: 'Auth0',
loginWithRedirect,
}}
>
{children}
</AuthContext.Provider>
);
};
export default AuthContext;
Actually, I just migrated loginWithPopup over to loginWithRedirect, and it seems like not working at all.
If I run the loginWithRedirect function in my login page, it does redirect to the Auth0 universal login, and then login with my email and password does redirect to my login page.
That’s all. Basically, it does redirect infinitely from my login page to Auth0 universal login page.
Thank you.