Hi everyone, I’m currently working on a restaurant-focused website that features Texas Roadhouse menu details, reviews, and user-submitted content. I recently decided to add a secure login system using Okta for user authentication. The idea is to let users sign in to access saved menus and favorite restaurant items. However, I’ve been running into several issues while trying to integrate Okta’s authentication flow with my custom login form.
I started by following the Okta documentation for integrating with a standard Node.js/Express backend and React frontend. The Okta app is set up correctly in my developer dashboard, and I’ve configured the client ID, issuer, and redirect URI in the app. The sign-in widget renders properly, but after successful login, my redirect back to the site fails. Instead of landing on the intended dashboard page (/user-dashboard), users are redirected to a blank screen or an error page saying “Invalid redirect URI.” I’ve double-checked that the URI matches exactly what’s in my Okta settings.
Another issue I’m facing is token verification. When I try to decode the returned ID token using the Okta JWT verifier, I sometimes get the error “JWT audience does not match the expected audience.” I’ve made sure the audience field matches my API identifier, but it still throws the error inconsistently. What’s strange is that it works perfectly in local development but fails intermittently on the live production version hosted on my server. Could this be a domain mismatch or caching issue?
I also noticed that session persistence isn’t working as expected. After logging in, users are authenticated, but if they refresh the page, the session data disappears and they’re logged out. I’ve implemented token storage in localStorage as suggested, but it seems like the session cookie or refresh token isn’t being maintained correctly across page reloads. This might be related to SameSite cookie policies or domain settings, but I’m not entirely sure how to adjust those within Okta’s configuration.
In addition, I’ve been trying to use the Okta API to fetch user profiles after authentication, but I’m running into CORS issues when calling /api/v1/users/me. I set up the proper CORS rules in my Okta app, but the browser still blocks the request with “CORS policy: No ‘Access-Control-Allow-Origin’ header.” I’m not sure if I need to use a proxy on my backend or if there’s an Okta setting I missed.
Has anyone else faced these problems when integrating Okta into a custom website (especially with Node.js and React)? I’d love to know the correct way to handle redirects, audience validation, and session management in a production environment. I’m sure I’m missing a small configuration detail somewhere, but after hours of debugging, I’m hitting a wall. Any advice or working examples would be hugely appreciated!