javascript - ¿Cómo implementar la autenticación de SPA de React con Keycloak y el flujo PKCE?

Esta es mi primera vez trabajando con Keycloak. He preparado una instancia de Keycloak en mi máquina local en la que puedo crear reinos, clientes, etc.

Encontré ejemplos de uso de React + Keycloak, pero ninguno de ellos utilizaba el flujo PKCE.

No sé cómo configurar Keycloak y React. Solo sé que la aplicación cliente debe poder generar un verificador de código y un desafío de código.

Estoy buscando un ejemplo sencillo de cómo implementar la autorización usando React y Keycloak que siga el flujo de Código de Autorización con PKCE de OAuth 2.0 o consejos sobre qué hacer del lado de React y qué del lado de Keycloak para implementar OAuth 2.0.

Lo que quiero hacer:

1. Configurando una instancia de Keycloak (lista)
2. Registro de un cliente público en Keycloack (listo)
3. Implementación de un escenario de inicio de sesión simple en la web (el escenario sigue el flujo de Código de Autorización con PKCE de OAuth 2.0)

Respuesta #1

(Antigua interfaz de Keycloak)

Ve a tu Reino, y luego al cliente y selecciona tu cliente:

• Establece Tipo de acceso a público
• Habilitado Flujo Estándar Habilitado
• Agrega los URI de redireccionamiento válidos y Orígenes web correspondientes
• Ve a Configuración Avanzada y en el campo Método de Desafío de Código de la Clave de Prueba para Intercambio de Código selecciona S256, y luego haz clic en Guardar.

(Nueva interfaz de Keycloak)

Selecciona tu Reino, y luego ve al cliente y haz clic en tu cliente:

• Establecer Autenticación del cliente en OFF
• En Flujo de autenticación selecciona Flujo estándar
• Agrega los URI de redireccionamiento válidos y Orígenes web correspondientes
• Haga clic en el botón Guardar
• Ve a la pestaña Avanzado
• Ve a la sección Configuración Avanzada y en el campo Método de Desafío de Código para Intercambio de Clave de Prueba selecciona S256, y luego haz clic en Guardar.

En el adaptador de tu aplicación React agrega "enable-pkce": true.

De la documentación de Keycloak:

El adaptador KeycloakInstalled es compatible con el mecanismo PKCE [RFC 7636] para proporcionar protección adicional durante los intercambios de código por token en el protocolo OIDC. PKCE se puede habilitar con la configuración "enable-pkce": true en la configuración del adaptador. Se recomienda encarecidamente habilitar PKCE para evitar ataques de inyección de código y de repetición de código.