CODEWITHSUNDEEP
javascriptreactjsoauth-2.0keycloakopenid-connect
Mateusz
Mateusz

Reputation: 143

How implement React SPA authentication with Keycloak and PKCE flow?

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)

Upvotes: 6

Views: 5963

Answers (1)

dreamcrash
dreamcrash

Reputation: 51453

(Old Keycloak UI)

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

  • Set Access Type to public
  • Enabled Standard Flow Enabled
  • Add the appropriate Valid redirect URIs and Web origins
  • Go to Advanced Settings and in the field Proof Key for Code Exchange Code Challenge Method and select S256, and then click on Save.

enter image description here

(New Keycloak UI)

Select your Realm, and then go to client and click in your client:

  • Set Client authentication to OFF
  • In Authentication Flow select Standard flow
  • Add the appropriate Valid redirect URIs and Web origins
  • Click on the Save button
  • Go to Advanced tab
  • Go to the section Advanced Settings and in the field Proof Key for Code Exchange Code Challenge Method and select S256, and then click on Save.

enter image description here

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.

Upvotes: 7

Related Questions