Clerk :: Multiple User Sign Ins Not Working

[raulgupta]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/raulgupta/atelier/issues/1

Publishable key

pk_test_cHJpbWUtZ3JpenpseS03MC5jbGVyay5hY2NvdW50cy5kZXYk

Description

🐛 Bug Report: OAuth Authentication Session Persistence Issue

Issue Description

When a user logs in using GitHub or Gmail OAuth and subsequently logs out, their credentials remain stored in the browser. As a result, they are automatically logged back into the same account when attempting to sign in again. This prevents users from being able to switch between different GitHub or Gmail accounts on the same device.

Environment

• Framework: Next.js
• Authentication Provider: Clerk
• Clerk Package Version: @clerk/nextjs (from package.json)
• OAuth Providers: GitHub, Google
• Browser: All browsers (Chrome, Firefox, Safari)

Reproduction Steps

1. User signs in with GitHub or Gmail account A
2. User navigates to profile and signs out
3. User attempts to sign in again with a different account B
4. Instead of being prompted to choose an account, they are automatically signed back in with account A

Code Analysis

Current Authentication Flow

Sign-In Implementation (components/blocks/login-form.tsx)

const signInWithGoogle = async () => {
  if (!isLoaded) return;
  setIsGoogleLoading(true);
  try {
    await signIn.authenticateWithRedirect({
      strategy: "oauth_google",
      redirectUrl: "/sso-callback",
      redirectUrlComplete: "/dashboard"
    });
  } catch (error) {
    console.error("Google auth error:", error);
    setIsGoogleLoading(false);
  }
};

Sign-Out Implementation (components/blocks/nav-user.tsx)

const { signOut, session } = useClerk();
const router = useRouter();

const handleSignOut = async () => {
  // Log the entire session object to verify its structure
  console.log("Current session before sign out:", session);
  
  // Get the current session ID and use it specifically
  await signOut({
    sessionId: session?.id,
    redirectUrl: "/login"
  });
};

SSO Callback (app/sso-callback/page.tsx)

import { AuthenticateWithRedirectCallback } from "@clerk/nextjs";

export default function SSOCallbackPage() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <AuthenticateWithRedirectCallback />
    </div>
  );
}

Attempted Solutions

1. Specific Session Sign-Out:

   • Modified the sign-out function to use the specific session ID
   • Added console logging to verify the session object
   • This did not resolve the issue

2. Considered but not implemented:

   • Adding prompt: "select_account" parameter to Google sign-in
   • Using a different authentication approach with SignInButton component

Root Cause Analysis

The issue appears to be related to how OAuth providers (GitHub and Google) handle authentication state in the browser. Even though Clerk is properly signing out the user from its session, the OAuth providers may be maintaining their own state through cookies or local storage.

Specifically:

1. Google OAuth maintains authentication state in browser cookies
2. When redirected to Google's authentication page after sign-out, it automatically uses the previously authenticated account
3. The prompt: "select_account" parameter for Google OAuth is not being passed through to force account selection

Recommendations

1. Modify Google OAuth Authentication:

   await signIn.authenticateWithRedirect({
     strategy: "oauth_google",
     redirectUrl: "/sso-callback",
     redirectUrlComplete: "/dashboard",
     additionalData: {
       prompt: "select_account"  // Force Google to show account picker
     }
   });

2. Enhance Sign-Out Process:

   const handleSignOut = async () => {
     await signOut({
       sessionId: ["all"],  // Sign out of ALL sessions
       redirectUrl: "/login"
     });
     
     // Clear browser storage to help remove OAuth state
     window.sessionStorage.clear();
     // Consider adding a warning about cookies
   };

3. Consider Alternative Authentication Flow:

   • Implement a custom authentication flow using Clerk's SignInButton component
   • This component may handle the OAuth flow differently and potentially avoid the issue

4. Contact Clerk Support:

   • This appears to be a known issue with multi-account OAuth authentication
   • Clerk may have additional recommendations or upcoming fixes

Additional Notes

• The issue affects users with multiple GitHub or Gmail accounts
• This is a common issue with OAuth providers and not specific to Clerk
• A temporary workaround for users is to clear their browser cookies or use incognito mode

Severity

Medium - Functionality is impaired for users with multiple OAuth accounts, but does not prevent overall system usage.

Assigned To

Authentication Team

Environment

Dev Environment