cookie context isolation breaks OAuth state validation when switching between mobile and desktop views in Authjs

[sakithajayasinghe]

Provider type

Keycloak

Environment

  System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 11.85 GB / 23.24 GB
    Container: Yes
    Shell: 5.0.17 - /usr/bin/bash
  Binaries:
    Node: 23.0.0 - /home/sakitha/.nvm/versions/node/v23.0.0/bin/node
    Yarn: 1.22.22 - /home/sakitha/.nvm/versions/node/v23.0.0/bin/yarn
    npm: 10.9.0 - /home/sakitha/.nvm/versions/node/v23.0.0/bin/npm
    pnpm: 10.18.2 - /usr/local/bin/pnpm
    bun: 1.2.2 - /home/sakitha/.bun/bin/bun
  Browsers:
    Brave Browser: 129.1.70.126
    Chrome: 129.0.6668.100
    Firefox: 136.0
    Firefox Developer Edition: 136.0
  npmPackages:
    next: 15.5.4 => 15.5.4 
    next-auth: ^5.0.0-beta.29 => 5.0.0-beta.29 
    react: 19.1.0 => 19.1.0 

Reproduction URL

https://github.com/sakithajayasinghe/authjs-cookie-issue

Describe the issue

Root Cause: Android Browser Cookie Partitioning

What's Happening:

1. Login on Mobile View:
   PKCE and state cookie created and stored.

2. Switch to Desktop View:
   Android browser creates a new cookie context.

3. OAuth Callback:
   PKCE and state cookie not available in desktop context.

4. JWT Decryption Fails:

   • InvalidCheck: pkceCodeVerifier value could not be parsed
   • InvalidCheck: state value could not be parsed

How to reproduce

Clone the repository.

[https://github.com/sakithajayasinghe/authjs-cookie-issue]

Getting Started

Create environment variables

cp .env.local .env

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Start Keycloak service

docker compose -f keycloak.docker-compose.yml up -d

Go to http://localhost:8080:

• Create realm
• Import the realm-export.json
• Create a user in keycloak.

Start your Android emulator:

avdmanager list avd

emulator -avd Medium_Phone_API_32

adb reverse tcp:3000 tcp:3000

adb reverse tcp:8080 tcp:8080

Open http://localhost:3000 with your Android emulator chrome browser.

1. Press Sign in with Keycloak button.
2. enter user name and password of the keycloak user already created.
3. Log in
4. After redirecting to the homepage change into desktop view.
5. See the terminal server logs.
6. in UI you can see "Server Error" page.
7. in server terminal logs you can see logs like attached image in this issue.

Expected behavior

This error makes mobile users confused.
i am analyzing next-auth code base to do a fix on this.still couldn't found.
As a workaround currently i have created a custom retry page and again refreshing auth session.