Stockage de l'ID utilisateur dans l'application côté client pour les requêtes API

Question

J'ai une API REST Node-Express où je peux faire une requête GET à un contrôleur d'utilisateur - /users/:id - où :id est le numéro d'identification de l'utilisateur stocké dans la base de données. J'ai également une application React-Redux côté client qui fait un appel à l'API. Pour effectuer la requête, l'application cliente doit avoir accès à l'identifiant de l'utilisateur, mais je ne suis pas sûr de la meilleure façon de stocker l'identifiant de l'utilisateur du côté client.

Pour plus de clarté, mon API envoie au client un fichier Jeton JWT lors de la connexion, qui contient l'identifiant de l'utilisateur ; l'application client enregistre le jeton dans le fichier localStorage . Lorsque le client fait une demande, l'API vérifie que l'identifiant de l'utilisateur dans le jeton décodé correspond à l'identifiant contenu dans l'URL avant d'envoyer une réponse au client.

Je vois deux solutions possibles :

1. Décoder le jeton JWT sur le client et utiliser l'identifiant de l'utilisateur stocké dans le jeton pour effectuer l'appel à l'API. Je pense qu'il s'agit d'un risque potentiel pour la sécurité, car je pense que je devrais stocker le secret sur l'application cliente. De plus, toute personne possédant le jeton peut accéder aux informations de l'utilisateur.
2. L'API envoie l'identifiant de l'utilisateur lors de l'authentification, et le client le stocke dans le fichier localStorage . (Je ne pense pas que le stocker dans le magasin Redux fonctionnerait puisque l'utilisateur pourrait rafraîchir, effaçant l'état de l'identifiant utilisateur). J'ai l'impression que ce n'est pas la meilleure pratique, car je ne vois pas beaucoup d'autres applications côté client qui adoptent cette approche.

Laquelle des deux est la meilleure solution, ou existe-t-il une autre approche que je n'ai pas envisagée ?

Answer 1

Vous avez raison en ce qui concerne l'option 1. Ne jamais décoder le jeton côté client . Cela nécessiterait que le code côté client connaisse le "secret", ce qui l'exposerait à quiconque regarderait votre code Javascript.

L'option 2 est bonne, à condition que vous envoyiez toujours le jeton avec chaque demande à des fins de sécurité. Pour le stockage, oui, vous devez le stocker dans un cookie ou dans localStorage, sinon, comme vous le dites, il sera perdu lors de l'actualisation.

Pour obtenir l'ID dans le code côté client, demandez à votre code côté client de le lire à partir du cookie / du stockage local. Il existe des bibliothèques pour cela ; react-cookie lit les cookies, par exemple. Vous pouvez soit faire cela à chaque fois que vous avez besoin d'y accéder, soit le lire une fois lors du chargement initial de la page, puis le dispatcher dans le magasin Redux.

Answer 2

Dans votre /users/:id vous pouvez vérifier si un :id a été fourni et si ce n'est pas le cas, extraire l'identifiant de votre JWT sinon utiliser le jeton id qui a été transmise dans l'appel API.

Si cela n'est pas acceptable, vous pouvez utiliser l'option n°2 mais en utilisant sessionStorage au lieu de localStorage