nextauthjs / nextauthjs/next-auth
Redirect issue in combination with custom signin page and base path
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28.4k
- Forks
- 4k
- PR merge metrics
- No merged PRs in 30d
Description
Environment
System:
OS: Windows 10 10.0.22621
CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1270P
Memory: 11.36 GB / 31.44 GB
Binaries:
Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.42)
Internet Explorer: 11.0.22621.1
NPM-Packages
"next": "13.2.4"
"next-auth": "^4.20.1"
"react": "18.2.0",
Reproduction URL
https://github.com/mkollers/next-auth-custom-page-error
Describe the issue
We are using nextauth to authenticate with keycloak. Because keycloak is the only provider we are using, and we do not want to have a signin page that shows only one button, we created a custom signin page under the path /auth/signin.
In addition, we are hosting our application under the base path /work, because we need the root path for another application.
This combination leads to redirect issues in case of errors during oauth flow (I am enforcing an error by setting cookie duration to 10 seconds in the reproduction repository). The following can be seen in the network tab of the browser:
http://localhost:3000/work/me- Redirect to
/work/auth/signin?callbackUrl=%2Fwork%2Fme - ... some additional calls for getting session and provider data...
- Redirect to
http://localhost:3000/work/api/auth/signin/keycloak? - Redirect to our Keycloak (
redirect_uri=/work/api/auth/callback/keycloak) -> entering credentials - Redirect back to
http://localhost:3000/work/api/auth/callback/keycloak?state=...&session_state=...&code=... - Redirect to
http://localhost:3000/work/api/auth/error?error=OAuthCallback - Redirect to
http://localhost:3000/work/api/auth/signin?error=OAuthCallback - Redirect to
http://localhost:3000/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fwork%2Fapi%2Fauth%2Fcallback%2Fkeycloak&error=OAuthCallback
Everything works fine in case of not using a base path or not using a custom signin page.
How to reproduce
- Clone the example repository and configure the .env file. I think you can choose another provider instead of keycloak as well, but then you have to adjust the signin parameter in
/auth/signin.tsx. - Open a protected page like for example
http://localhost:3000/work/me. - Enter your credentials in the redirected provider screens
- You will be redirected to /api/auth/sign, which does not exist. You can see the whole redirect flow in the browser dev tools
Expected behavior
It should respect the base path in step 9 or already use the custom signin page in step 8.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction repository and its /auth/signin.tsx page, then trace the redirect sequence through /work/api/auth/signin, /work/api/auth/error, and the custom signin route. Reproduce the OAuth error with the documented short cookie duration and compare the final redirect with the expected base-path behavior. Done means the custom signin page and /work prefix are preserved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- api, authentication, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100