Comment utiliser Keycloak avec React

Keycloak est une solution open-source de gestion des identités et des accès qui fournit des fonctionnalités telles que l’authentification unique (SSO) et l’autorisation OAuth2. Dans ce guide, nous expliquerons comment intégrer Keycloak avec une application React.

Prérequis

Avant de commencer, assurez-vous de disposer des éléments suivants :

• Keycloak installé et configuré sur un serveur.
• Un environnement de développement React configuré sur votre machine.

Installer l’adaptateur JavaScript Keycloak

Pour utiliser Keycloak avec React, nous devons installer l’adaptateur JavaScript Keycloak. Ouvrez votre terminal et naviguez vers le répertoire de votre projet React. Exécutez la commande suivante pour installer l’adaptateur :

npm install keycloak-js

Créer une configuration Keycloak

Dans votre projet React, créez un nouveau fichier appelé keycloak.js. Ce fichier contiendra les paramètres de configuration de Keycloak. Ajoutez le code suivant au fichier keycloak.js :

import Keycloak from 'keycloak-js'

const keycloakConfig = {
  url: 'https://your-keycloak-server/auth',
  realm: 'your-realm',
  clientId: 'your-client-id',
}

const keycloak = new Keycloak(keycloakConfig)

export default keycloak

Veillez à remplacer https://your-keycloak-server/auth, your-realm et your-client-id par les valeurs appropriées pour votre configuration Keycloak.

Initialiser Keycloak dans votre application React

Dans le fichier d’entrée de votre application React (par exemple, index.js), importez l’objet keycloak depuis le fichier keycloak.js et initialisez-le avant de rendre l’application. Ajoutez le code suivant à votre fichier d’entrée :

import React from 'react'
import ReactDOM from 'react-dom'
import keycloak from './keycloak'

keycloak.init({ onLoad: 'login-required' }).then((authenticated) => {
  if (authenticated) {
    ReactDOM.render(<App />, document.getElementById('root'))
  }
})

Sécuriser les routes avec Keycloak

Pour sécuriser des routes spécifiques dans votre application React, vous pouvez créer un composant d’ordre supérieur (HOC) qui enveloppe les composants protégés. Créez un nouveau fichier appelé SecureRoute.js et ajoutez le code suivant :

import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import keycloak from './keycloak'

const SecureRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      keycloak.authenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
)

export default SecureRoute

Ce composant SecureRoute vérifie si l’utilisateur est authentifié en utilisant keycloak.authenticated. S’il est authentifié, il affiche le composant protégé ; sinon, il redirige vers la page de connexion.

Utiliser les routes sécurisées dans votre application

Vous pouvez maintenant utiliser le composant SecureRoute pour sécuriser des routes spécifiques dans votre application. Par exemple :

import React from 'react'
import { BrowserRouter as Router, Switch } from 'react-router-dom'
import SecureRoute from './SecureRoute'
import HomePage from './HomePage'
import DashboardPage from './DashboardPage'

const App = () => (
  <Router>
    <Switch>
      <SecureRoute exact path="/" component={HomePage} />
      <SecureRoute path="/dashboard" component={DashboardPage} />
    </Switch>
  </Router>
)

export default App

Dans cet exemple, la page d’accueil (/) et la page du tableau de bord (/dashboard) sont des routes sécurisées accessibles uniquement aux utilisateurs authentifiés.

En suivant ces étapes, vous pouvez intégrer Keycloak avec votre application React et sécuriser des routes spécifiques. Keycloak fournit une solution puissante et sécurisée pour gérer l’authentification et l’autorisation des utilisateurs dans vos projets React.