Hi. We’re struggling to get our custom login page to work using the PKCE flow. It seems to be fine when using the Okta hosted version but wondered if it is possible with our own login page calling the Okta api instead?
If so, do you have any guides you recommend?
If you’re self hosting the login page, you can use the Okta Sign In Widget to do the heavy lifting for authentication and making the /authorize call and triggering the redirect. Our Widget reference doc has some information about the way you need to configure it for PKCE flow, which you can find here:
The widget will handle the code challenge and verifier creation and the code verifier will be kept in local storage, https://github.com/okta/okta-auth-js/blob/master/packages/okta-auth-js/lib/token.js#L592. Your redirect page could then use the getTokensFromURL method to get the ‘code’ and send it to the /token endpoint to exchange it for access and ID tokens (that method will get the code_verifier from local storage, https://github.com/okta/okta-auth-js/blob/master/packages/okta-auth-js/lib/token.js#L168).
Our JS framework SDKs, e.g. React, make this even simpler and handle the /token call for you. More docs here: https://github.com/okta/okta-oidc-js/tree/master/packages/okta-react#pkce-example
If you’re interested in using one of the SDKs, you can take a look at one of our sample applications which have been updated to use the PKCE flow: https://github.com/okta/samples-js-angular/tree/master/custom-login and https://github.com/okta/samples-js-react/tree/master/custom-login
1 Like
Excellent, thank you. We have it working now.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.