How implement React SPA authentication with Keycloak and PKCE flow?

Question

This is my first time working with Keycloak. I have prepared a Keycloak instance in my local machine in which I can create realm's, clients etc.

I found React + Keycloak examples of use, but none of them used PKCE flow.

I don't know how to configure Keycloak and React. I only know that the client application must be able to generate a code verifier and a code challenge.

I am looking for a simple example of implementing authorization using react and Keycloak which should follow the OAuth 2.0 Authorization Code Grant with PKCE Flow or tips on what to do on the React side and what on the Keycloak side to implement OAuth 2.0.

What I want to do:

1. Setting up a Keycloack instance (ready)
2. Registration of a public client in Keycloack (ready)
3. Implementation of a simple login scenario in web (the scenario follow OAuth 2.0 Authorization Code Grant with PKCE Flow)

Answer 1

Go to your Realm, and then to client and select your client:

• Set Access Type to public
• Enabled Standard Flow Enabled
• Add the appropriate Redirect Uris
• Go to Advanced Settings and in the field Proof Key for Code Exchange Code Challenge Method and select S256.

On the adaptor of your React application add "enable-pkce": true.

From the keycloak documentation:

The KeycloakInstalled adapter supports the PKCE [RFC 7636] mechanism to provide additional protection during code to token exchanges in the OIDC protocol. PKCE can be enabled with the "enable-pkce": true setting in the adapter configuration. Enabling PKCE is highly recommended, to avoid code injection and code replay attacks.