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 client_id and client_secret.
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 authorization_code and code_verifier for access token. But for my case, I need the React frontend to send the authorization_code and 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 code_verifier and 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.