Reputation: 615
Logging out users using auth0 logout action works fine on desktop but does not work on mobile (iphone, safari). I see a quick page refresh but the user remains logged in. How can this be debbuged?
The flow is as follows:
1. Client side trigger
const handleLogoutUser = async () => {
logOutUser()
}
2. Hitting the Auth0 logout URI
export const logOutUser = (tokenExpired: boolean = false, authError: boolean = false) => {
const returnToBase = window.location.origin // Your app's base URL
const customParam = 'loggedOut=true' // Custom parameter
// Conditionally add the tokenExpired or other custom parameters
const params = [customParam]
if (tokenExpired) {
params.push('tokenExpired=true')
}
if (authError) {
params.push('authError=true')
}
const returnTo = encodeURIComponent(`${returnToBase}?${params.join('&')}`)
window.location.href = `${AUTH_ZERO_DOMAIN}/v2/logout?client_id=${AUTH_ZERO_CLIENT_ID}&returnTo=${returnTo}&forceLogout=true`
return true
}
3. Upon redirect, useEffect
is trigged to help clear the rest of the session in the BE, FE and resetting state.
useEffect(() => {
if (query?.loggedOut === 'true' && isLoggedIn) {
handleClearSession()
}
if (query?.tokenExpired === 'true') {
handleClearSession()
}
if (query?.authError === 'true') {
handleClearSession()
}
}, [query, isLoggedIn])
4. Finishing the logout
const handleClearSession = async () => {
setAuthZeroAccessToken(null)
setIsLoggedIn(false)
localStorage.removeItem(AUTH_ZERO_TOKEN_LOCAL_STORAGE_KEY)
// Remove 'loggedOut' from the URL
const updatedQuery = { ...query }
// Delete queries
delete updatedQuery.loggedOut
delete updatedQuery.tokenExpired
delete updatedQuery.authError
const clearSession = await clearSessionMultipleRuns()
if (clearSession) {
await mutate('/action/account/getAccount', {})
await mutate('/action/cart/getCart', {})
handleShallowRouteReplace(router, updatedQuery)
}
}
Upvotes: 0
Views: 23