Ben Shekhtman
Ben Shekhtman

Reputation: 615

Next JS with Okta/ Auth0 logout redirect works on desktop but not on mobile

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

Answers (0)

Related Questions