Does a React SPA with @auth0/auth0-react automatically configure/handle Authorization Code Flow with PKCE?
I have some confusion around setting up Authorization Code Flow with PKCE in a React SPA that leverages @auth0/auth0-react (similar to the React sample app Auth0 provides). I am having trouble finding anything in the documentation about what configuration is needed for the app to use an Authorization Code Flow with PKCE strategy and to automatically rotate and refresh tokens properly. Is this something that needs to be implemented manually? Or that is handled automatically? Or is there some specific config that needs to be passed to make it happen. Critically, it would be extremely helpful if I could be pointed in the direction of the salient documentation I need to be looking at to make these sort of determinations for myself in the future. Thanks in advance!
Yes, the @auth0/auth0-react library automatically handles the Authorization Code Flow with PKCE (Proof Key for Code Exchange) in a React SPA. You don’t need to implement it manually. The library takes care of generating the PKCE code verifier and challenge, exchanging the authorization code for tokens, and handling token rotation and refresh automatically.
To configure the library for Authorization Code Flow with PKCE, you need to provide the necessary configuration parameters in the Auth0Provider component. These parameters include clientId, domain, and redirectUri. You can find the detailed documentation for the configuration and usage of @auth0/auth0-react in the official Auth0 documentation: https://auth0.com/docs/quickstart/spa/react
The documentation provides step-by-step instructions on how to set up the React SPA with @auth0/auth0-react and explains the concepts and features related to authentication and authorization using Auth0. It will help you understand the configuration options and make informed decisions for future implementations.
In addition, you do need to manually configure your React app to use refresh tokens as this is not enabled by default. If configured correctly, the SDK does handle storing, using and rotating refresh tokens (if enabled).