nextauthjs / nextauthjs/next-auth

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

Open
#13,285 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug providers triage
Dominant language
TypeScript
Stars
28.4k
Forks
4k
PR merge metrics
No merged PRs in 30d

Description

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
Image Image
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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the failure with the linked repository using npm run dev, the Keycloak Docker Compose service, and the Android emulator steps in the issue. Start at the OAuth callback's PKCE and state cookie validation, then compare behavior before and after switching views; done means the Keycloak login completes without InvalidCheck errors in both contexts.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
authentication, mobile-dev, security
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.