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:
- Setting up a Keycloack instance (ready)
- Registration of a public client in Keycloack (ready)
- Implementation of a simple login scenario in web (the scenario follow OAuth 2.0 Authorization Code Grant with PKCE Flow)
Go to your Realm, and then to client and select your client:
- Set
Access Typetopublic - Enabled
Standard Flow Enabled - Add the appropriate Redirect Uris
- Go to
Advanced Settingsand in the fieldProof Key for Code Exchange Code Challenge Methodand selectS256.
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.