Signout does not logout user when session is being requested simultaneously

[snehalbaghel]

Environment

 System:
    OS: macOS 12.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.18 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
 Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v14.17.0/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
 Browsers:
    Chrome: 101.0.4951.64
    Edge: 101.0.1210.53
    Firefox: 100.0.2
    Safari: 15.4
  npmPackages:
    next: ^12.0.11-canary.4 => 12.1.6 
    next-auth: latest => 4.3.4 
    react: ^17.0.2 => 17.0.2 

Reproduction URL

https://next-auth-example.vercel.app

Describe the issue

Using signOut() with multiple tabs open I discovered that sometimes the user was not getting logged out. While the /session call initially returns an empty object subsequent calls would return the user's session again failing to log out the user. This was happening because on logout my application would redirect to a specific logout page where we check if the user is authenticated by calling /session that was authenticating the user again. This is reproducible on the official example as well if we reload one of the tabs after calling sign out from the other.

How to reproduce

I reproduced the issue with the official next-auth-example project. Steps to reproduce:

• Open the example project in two different tabs.
• Log in to the app.
• Sign out of the app then immediately switch to the other tab and reload the page.

Current behavior:

The signout endpoint responds with a 200 status however the session is not cleared and the user is still logged in.

Video:

Screen.Recording.2022-05-23.at.7.52.05.PM.mov

Expected behavior

The user should be logged out or the /signout API should respond with an error code.

[crrmacarse]

Up with this.

This seems to only happen on our prod when multiple requests are firing at once. The signOut doesn't work as intended and only refreshes the page(without logging out the user)

[ben-walcutt]

I had a similar issue with this while using the Keycloak provider. Next auth was clearing the session on the browser side, but not on the Keycloak server itself. The fix I implemented was to await the signOut function of next auth and use a callbackUrl to a signout page I created that calls the end session endpoint of Keycloak and redirects back to the website itself.

await signOut({ callbackUrl: "/api/auth/logout", });

And then pages/api/auth/logout.ts
export default (req, res) => { const url = process.env.REDIRECT_URL; res.redirect(url); }

[crrmacarse]

Hi @ben-walcutt ,

Not related to the issue but there is a better approach on your problem by adding it on next-auth's event(https://next-auth.js.org/configuration/events#signout)

// [...next-auth].ts
events: {
    async signOut() {
      // add here
    },
  },

It'll be called after triggering signOut

[shubham-bookdepot]

@snehalbaghel snehalbaghel Are you able to fix this issue? I am also facing the same.

[balazsorban44]

Next auth was clearing the session on the browser side, but not on the Keycloak server itself.

This is expected as NextAuth.js does not do federated logout currently (see  #3938), so essentially what signOut does is it is clearing the session cookie, logging the user out from the app, not your Identity Provider.

When you trigger two requests at the same time though, without some kind of a locking mechanism, the two invocations to the backend will resolve differently. I don't think we can fix this without introducing something like https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API. There is already a discussion around this in #3940

To reproduce this:

Sign out of the app then immediately switch to the other tab and reload the page.

I consider this an unrealistic situation/edge case so I'm inclined to close the issue. The recommended way to solve this would be using a currently experimental API, so I don't think we can rely on it yet, but we can revisit in the future.

[DanCymonz]

events: {
async signOut() {
// add here
},
},

can i ask add what here?

[crrmacarse]

can i ask add what here?

This pertains to @ben-walcutt issue when using external authentication. You can add a network request event there that un-authenticate the third party when logout is triggered

[aman-godara]

Solution:

1. hit GET /logout endpoint of the provider to destroy user's session
2. do signOut() to clear session cookies, only if step 1 was successful

for more details: https://stackoverflow.com/a/75484849/12581494

[ShawnCentra]

Not sure why but on production after the provider logs out the user from their service and redirects back to our web app - the session will not clear even if signOut from NextAuth is called on the client side.

NextAuth + Azure AD Provider

         <a
            href={`https://login.microsoftonline.com/${process.env.NEXT_PUBLIC_AZURE_AD_TENANT_ID}/oauth2/v2.0/logout?post_logout_redirect_uri=${process.env.NEXT_PUBLIC_NEXTAUTH_URL}/auth/signout`}
          >
            Log out
          </a>

// pages/auth/signout.js
import { signOut } from "next-auth/react";
import { useEffect } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
export default function index() {
  const router = useRouter();
  const { data: session, status } = useSession();

  useEffect(() => {
    if (status === "authenticated") {
      signOut({ redirect: false });
    } else if (status === "unauthenticated") {
      router.push("/");
    }
  }, [ status]);

  return <div></div>;
}

[iiiok]

Update your next.js package, besides updating the Next-Auth package.

[sergiuturus]

events: {
async signOut() {
// add here
},
},

can i ask add what here?

events: {
        async signOut({ token }) {
            const logOutUrl = new URL(`${process.env.NEXT_PUBLIC_KEYCLOAK_API_URL}/realms/${process.env.KEYCLOAK_CLIENT_ID}/protocol/openid-connect/logout`)
            logOutUrl.searchParams.set('id_token_hint', token.idToken);
            await fetch(logOutUrl);
        },
    }

[Jonas-AND]

Not sure why but on production after the provider logs out the user from their service and redirects back to our web app - the session will not clear even if signOut from NextAuth is called on the client side.

NextAuth + Azure AD Provider

         <a
            href={`https://login.microsoftonline.com/${process.env.NEXT_PUBLIC_AZURE_AD_TENANT_ID}/oauth2/v2.0/logout?post_logout_redirect_uri=${process.env.NEXT_PUBLIC_NEXTAUTH_URL}/auth/signout`}
          >
            Log out
          </a>

// pages/auth/signout.js
import { signOut } from "next-auth/react";
import { useEffect } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
export default function index() {
  const router = useRouter();
  const { data: session, status } = useSession();

  useEffect(() => {
    if (status === "authenticated") {
      signOut({ redirect: false });
    } else if (status === "unauthenticated") {
      router.push("/");
    }
  }, [ status]);

  return <div></div>;
}

I've got the same issue. Did you resolve it at the end?