K
Kinde•2w ago
Bini

Authentication Issue on Vercel Deployment

Hi Kinde team, I'm having trouble with Kinde auth in my Vite + React + TS app when deployed to Vercel. Everything works fine on my local env, but the auth flow breaks after deploying. 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 Environment: * Frontend: React (Vite), TypeScript, @kinde-oss/kinde-auth-react (v. 4.0.4) * Deployment: Vercel 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).
3 Replies
Bini
BiniOP•2w ago
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)
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.
Oli - Kinde
Oli - Kinde•2w ago
Hey @Bini, I cannot thank you enough for spending the time to write the extensive information here on how to reproduce your issue. My teammate is actively working on a new version of the React SDK and I know he will want to make sure the new version covers your issue. So, may I suggest you post a GitHub issue on the React SDK GitHub repo with all the information you posted above (and anything else you think is relevant), as my expert React teammate will review all GitHub issues when he is back online early in the new year. Thanks again Bini for this extensive information.
GitHub
GitHub - kinde-oss/kinde-auth-react: Kinde React SDK for frontend a...
Kinde React SDK for frontend authentication flows. Contribute to kinde-oss/kinde-auth-react development by creating an account on GitHub.
Bini
BiniOP•2w ago
Hi Oli, thank you for your prompt reply. I've posted this issue on React SDK GitHub repo: Link to GitHub issue. Please let me know if your team needs any further information from my side. Happy holidays!

Did you find this page helpful?