Post authentication redirect returning HTTP ERROR 500
I've followed Next.js quickstart guide and integrated Kinde into my Next.js app. However, when I create a new user with email and set password, it redirected me to
/api/auth/kinde_callback?code=<code> but it's always returning error 500. The same thing happens for social sign in, it didn't redirect me to the account selector/allow access page of that social sign in, but it returns error 500 as well. The error is also printed out in terminal.
3 Replies
It seems like you're encountering an issue with the state parameter in the OAuth2 flow, which is crucial for preventing CSRF attacks during the authentication process. The error message "Error: Authentication flow: Received: <token> | Expected: State not found" indicates that the state parameter returned in the callback URL does not match the one expected by your application, or it might be missing altogether.
This issue can occur if the state parameter is not correctly generated, stored, or validated upon receiving the callback from Kinde. Here are a few steps you can take to troubleshoot and resolve this issue:
Verify State Generation and Storage: Ensure that your application correctly generates a unique state parameter for each authentication request and stores it in a place where it can be validated later (e.g., session storage).
Check the Callback URL Handler: In your callback URL handler (e.g., /api/auth/kinde_callback), make sure you are correctly extracting the state parameter from the query parameters and validating it against the stored value.
Review the OAuth2 Flow Implementation: Double-check your implementation of the OAuth2 flow, particularly the parts handling the authorization request and the callback. Ensure that the state parameter is included in the authorization request and properly handled in the callback.
Inspect Redirects: If your application involves redirects before reaching the callback URL, ensure that the state parameter is preserved throughout the entire flow.
Check for Configuration Issues: Review your Kinde application configuration in the Kinde dashboard, particularly the "Allowed callback URLs" setting, to ensure it matches the callback URL in your application.
Let me know how you go with troubleshooting
I figured out the problem was that I'm running Next.js application inside Github Codespace, which forwarded localhost:3000 in the server to both 127.0.0.1:3000 and localhost:3000 on my machine. Codespace's default address is 127.0.0.1:3000 while my Kinde's configuration is still localhost:3000 which leads to callback url mismatch. Using 127.0.0.1:3000 solved the issue entirely. Thank you for responding!
Awesome to hear you figured out what was causing the issue.