Posted onFeb 4, 2022 • Edited onMay 17, 2022 • Originally published atkezios.fr

React.js - Indicateur de "force" d'un mot de passe

#react #javascript #security #tutorial

Pour sécuriser les mots de passe, on demande souvent à l’utilisateur d’utiliser un mot de passe “complexe” en ajoutant par exemple une majuscule, un caractère spécial ou un chiffre. Cependant, ces méthodes ne permettent pas de créer un mot de passe aussi sécurisé qu’on le pense.

Par exemple, le mot de passe:[Password1234] réponds à toutes ces règles, cependant il est l’un des plus testés lors des attaques.

Comment faire alors ?

L’une des solutions pour créer un processus de validation de mot de passe fiable est d’utiliser une librairie commezxcvbn-ts (https://zxcvbn-ts.github.io/zxcvbn/). Cette librairie permet d’estimer la complexité d’un mot de passe et ainsi d’empêcher l’utilisateur d’utiliser un mot de passe jugé trop faible.

Implémentation en React.js

L’idée est de calculer le score du mot de passe indiqué par l’utilisateur et en fonction de ce score affiché les indicateurs qui correspondent :

App.tsx :

importReact,{useEffect,useState}from"react";import{zxcvbn}from"@zxcvbn-ts/core";import{Indicators}from"./components/Indicators";import"./App.css";interfaceIndicator{score:number;}constApp=()=>{const[password,setPassword]=useState("");const[indicator,setIndicator]=useState<Indicator>({score:-1});useEffect(()=>{if(password==="")return;setIndicator(zxcvbn(password));},[password]);const{score}=indicator;return(<divclassName="d-block mx-4"><divclassName="position-relative mt-3"><labelhtmlFor="password-input"className="mr-2">          Mot de passe</label><inputis="password-input"type="password"onChange={(event)=>setPassword(event.target.value)}value={password}placeholder={"**********"}/>{password!==""&&<Indicatorsscore={score}/>}</div></div>);};exportdefaultApp;

Indicators.tsx

importReactfrom"react";constcolors={0:"#e5e5e5",1:"#9B2C2C",2:"#D44949",3:"#DCA02D",4:"#387F95",5:"#48AE65"};constgetColor=(power,index)=>{if(power>index){returncolors[power];}returncolors[0];};constindicatorIndexes=[0,1,2,3,4];constIndicators=({score}:{score:number})=>(<divclassName="mt-2 indicator-container">{indicatorIndexes.map((indicatorIndex,index)=>(<divclassName="indicator"key={indicatorIndex}style={{backgroundColor:getColor(score+1,indicatorIndex)}}/>))}</div>);export{Indicators};

App.css

.indicator{height:4px;border-radius:4px;width:15%;margin-right:8px;}.indicator-container{flex-direction:row;display:flex;}

Pour allez plus loin

A présent, on va ajouter des options dans notre validation. Avec pour objectif pour rendre notre validation de mot de passes plus sécurisé. On va aussi ajouter des suggestions pour indiquer à l’utilisateur comment rendre son mot de passe plus fort.

App.tsx :

importReact,{useEffect,useState}from"react";import{zxcvbn,ZxcvbnOptions}from"@zxcvbn-ts/core";importzxcvbnCommonPackagefrom"@zxcvbn-ts/language-common";importzxcvbnFrPackagefrom"@zxcvbn-ts/language-fr";import{FeedbackType}from"@zxcvbn-ts/core/dist/types";import{Indicators}from"./components/Indicators";import{Suggestions}from"./components/Suggestions";import"./App.css";constoptions={translations:zxcvbnFrPackage.translations,graphs:zxcvbnCommonPackage.adjacencyGraphs,dictionary:{...zxcvbnCommonPackage.dictionary,...zxcvbnFrPackage.dictionary}};ZxcvbnOptions.setOptions(options);interfaceIndicator{score:number;feedback:FeedbackType;}constApp=()=>{const[password,setPassword]=useState("");const[indicator,setIndicator]=useState<Indicator|null>();useEffect(()=>{if(password==="")return;setIndicator(zxcvbn(password));},[password]);constscore=indicator?indicator.score:-1;constfeedback=indicator?indicator.feedback:undefined;return(<divclassName="d-block mx-4"><divclassName="position-relative mt-3"><labelhtmlFor="password-input"className="mr-2">          Mot de passe</label><inputis="password-input"type="password"onChange={(event)=>setPassword(event.target.value)}value={password}placeholder={"**********"}/>{password!==""&&<Indicatorsscore={score}/>}{feedback&&feedback.warning.length>0&&(<Suggestionssuggestions={feedback.suggestions}/>)}</div></div>);};exportdefaultApp;

Suggestions.tsx

importReactfrom"react";constSuggestions=({suggestions}:{suggestions:string[]})=>(<ul>{suggestions.map((suggestion,index)=>(<likey={suggestion}>{suggestion}</li>))}</ul>);export{Suggestions};