Bug: (Authentication Issue on Vercel Deployment)

[koblihh]

Prerequisites

• I have searched the repository’s issues and Kinde community to ensure my issue isn’t a duplicate
• I have checked the latest version of the library to replicate my issue
• I have read the contributing guidelines
• I agree to the terms within the code of conduct

Describe the issue

I was advised by Oli on Discord to post this issue here regarding auth problem I'm experiencing on Vercel deployment. Link to Discord thread. I noticed a similar issue reported here: #54 .

Problem Summary:

• User visits /some/protected
• ProtectedRoute component checks isAuthenticated (false)
• Redirects to /auth/login
• LoginRoute component triggers Kinde login
• User authenticates through Kinde
• onRedirectCallback is called, redirecting user back to original protected route
• ProtectedRoute still sees isAuthenticated as false and redirects to /auth/login

Expected Behavior:

After successful Kinde login, user should be redirected back to /some/protected and recognised as authenticated, allowing access to protected routes

Troubleshooting Done:

• Verified environment variables on Vercel (VITE_KINDE_CLIENT_ID, VITE_KINDE_DOMAIN, VITE_KINDE_REDIRECT_URL).
• Confirmed https://foobar.vercel.app is in Kinde's "Allowed callback URLs" and "Allowed logout redirect URLs" (without trailing slash).

Library URL

https://github.com/kinde-oss/kinde-auth-react

Library version

4.0.4

Operating system(s)

macOS

Operating system version(s)

13.3

Further environment details

• Frontend: React (Vite), TypeScript, @kinde-oss/kinde-auth-react (v. 4.0.4)
• Deployment: Vercel

Reproducible test case URL

No response

Additional information

Relevant Logs:

Here are some key logs from the deployed application's console:

Navigated to https://foobar.vercel.app/some/protected
ProtectedRoute: isLoading=true, isAuthenticated=false
ProtectedRoute: isLoading=false, isAuthenticated=false
ProtectedRoute: Not authenticated, redirecting to /auth/login...
ProtectedRoute: from=/some/protected
Navigated to https://foobar.kinde.com/oauth2/auth?redirect_uri=https%3A%2F%2Ffoobar.vercel.app&...
Navigated to https://foobar.kinde.com/auth/...
Navigated to https://foobar.kinde.com/oauth2/auth...
Navigated to https://foobar.vercel.app/some/protected
provider.tsx: redirectTo=/some/protected
ProtectedRoute: isLoading=true, isAuthenticated=false
ProtectedRoute: isLoading=false, isAuthenticated=false
ProtectedRoute: Not authenticated, redirecting to /auth/login...
// ... (these logs repeat in a loop)

Additional Information:

I've found a couple of threads on this Discord where other users seem to be experiencing similar issues:

• Link to thread 1
• Link to thread 2
• Link to thread 3

Reproducible Demo:

I've got a minimal, reproducible demo that isolates the issue. I can share the Git repository and deployed Vercel URL with you via DM if needed. Please let me know if you'd like to take a look.