Sécuriser son application React en 5 minutes

Implémentation facile et rapide de React OIDC

Photo by Philipp Katzenberger on Unsplash

De nos jours, la sécurisation d’application est une étape incontournable. Cette sécurisation se passe en deux étapes : L’autorisation et l’authentification. La première autorisera l’accès quand la seconde vous identifiera.

Cet article est un complément au dojo disponible le Github d’Axa, je vous conseille la lecture de l’introduction si vous avez besoin de vous rafraîchir la mémoire sur l’OAuth et l’Open ID Connect. Je ne ferai pas de rappel ici.

AxaGuilDEv/react-oidc

Récupération de l’application basique

On va tout d’abord récupérer l’application sur son poste local avec la commande habituelle :

git clone https://github.com/AxaGuilDEv/dojo-react-oidc-context.git

Ensuite on installe le tout et on lance le sample.

cd dojo-react-oidc-context/mocks/
npm install
cd ../exercice-sample/
npm install
npm start

Nous voici sur l’application

Application du Dojo

Voici nos base, ne reste que l’étape de sécurisation

Installation et Configuration

L’installation est très facile, nous avons besoin d’oidc-client et de react-oidc-context

npm install @axa-fr/react-oidc-context --save
npm install oidc-client --save

Pour ce qui est de la configuration, vous pouvez vous procurer une configuration de test sur la page de démo d’Identity Server (serveur d’authentification open source). Nous allons prendre la public ShortLived (Authorization code + PKCE).

client id: interactive.public.short
grant type: authorization code with PKCE and client credentials
access token lifetime: 75 seconds
allowed scopes: openid profile email api offline_access

En terme de configuration cela donne :

Configuration de React OIDC

Vous pouvez ajouter ce fichier de configuration où bon vous semble dans l’application, il sera requis par le provider.

Ajout du provider

Nous avons notre base et nos informations. Il ne reste plus qu’à ajouter le provider à notre application. Pour notre projet on va aller initier React OIDC au niveau du composant principal. Vous pourrez choisir aussi de le mettre un peu plus bas dans votre application. La règle étant de placer le provider au dessus des composants sécurisés.

Initialisation de React OIDC

Au niveau des propriétés du provider on notera que seule la configuration est obligatoire. Ici on indique en plus que le token sera stocké en mémoire (recommandé, par défaut il sera sinon dans le session storage).

Pour plus d’informations sur les propriétés disponibles je vous invite à lire la documentation à ce sujet. Vous retrouverez notamment la possibilité de désactiver le composant, la surcharge des composants de redirections ou du logger.

Ajout de la sécurisation

A ce stade, nous avons installé React OIDC. Mais ce n’est pas pour autant que nous avons sécurisé l’application. Il faut pour cela protéger des accès. Deux solutions s’offrent à vous. Soit tout le site est protégé, soit vous décidez d’avoir une partie publique et une partie privée. Nous allons choisir cette dernière pour notre exemple.

Sécurisation de la page d’administration

Une fois chose faite, essayer de naviguer sur l’onglet d’administration, vous serez automatiquement redirigé vers la page d’authentification d’Identity Server.

Protection de la page Admin

Récupération des infos

Nous voila maintenant avec le minimum syndical pour la récupération du token. Mais ce n’est pas encore suffisant. Une fois connecté, le token récupéré, qui va nous permettre de nous authentifier auprès d’une API, contient également un ensemble d’informations.

Ce qui est génial avec React OIDC c’est qu’il est très facile d’accéder à ces informations.

Récupération des informations

Nous n’utilisons ici que le nom et prénom, mais nous pouvons retrouver bon nombre d’information dans l’objet oidcUser.

Ensemble des informations de l’objet oidcUser de l’exercice

Login et Logout

Le plus souvent les pages avec accès limité sont cachées à l’utilisateur, et c’est uniquement lorsque ce dernier est connecté que nous lui proposerons alors les accès dont il dispose. Pour cela nous allons donc lui proposer une action : la connexion.

Login et logout directement accessible

Fetch avec le token

Nous y sommes presque !! À ce stade, localement nous avons tout ce qu’il faut pour l’application React. Cependant, quand nous cherchons à charger la page admin, nous avons un petit soucis :

L’API nous renvoie une 401

Nous allons donc devoir transmettre le token afin que ce dernier soit validé par le serveur. Pour cela nous allons utiliser le package fetch token

npm install @axa-fr/react-oidc-context-fetch --save

Le package expose un HOC qui prendra en paramètre le fetch et enrichira le composant avec le fetch portant le token.

Ajout du withAuthentication pour augmenter le fetch

Une fois chose faite, rien de plus à faire, l’appel porte bien le token. Ensuite c’est au serveur de faire le reste du travail.

Requête portant le token d’authentification.

Commentez, Contribuez

Maintenant que vous savez tout de ce petit composant qui nous facilite bien la vie, je vous invite à l’utiliser bien sûr, mais également à mettre une ⭐️ proposer, corriger, commenter notre composant sur Github.

Retrouvez mes articles sur les composants React :

Les containers depuis les Hooks

Une bonne recette pour tester les composants React

Comme d’habitude, si cet article vous a plus, un partage et des claps font toujours plaisir 🎉🍻