Hello, I am trying to implement Authorization Code Flow with PKCE for a web application with BFF (Backend For Frontend) using Okta React SDK.
The SDK works well for Single Page Application (SPA) but the design I need to implement is supposed to use BFF (.NET Core) and I need to use standard Web Application with
My idea is that upon user’s “sign in” button click, the React frontend will call the
LoginWithRedirect component which redirects the user to the Okta hosted widget. The user will complete authentication and will be redirected to /callback endpoint on the React frontend. This is where
LoginCallback component picks up normally for SPA applications and exchanges the
code_verifier for access token. But for my case, I need the React frontend to send the
code_verifier to the BFF which will attach the application
client_secret and exchange these for the
access_token. The React frontend will be returned a session with the BFF. The session will be associated with the
access_token on BFF. The
access_token will be attached to each call to resource servers by the BFF. All user request for data will flow through the BFF.
My only idea is that I can override the
LoginCallback component with my own implementation, but it does not feel right. First, I would have to extract the
authorization_code and send these to the BFF, then I would await a session to be returned from BFF and finally manually set
authState.isAuthenticated to true. I do not think this is a very unique problem, but I was not able to find it documented anywhere.
I will be very grateful for any direction that will move me further.