Passkeys et WebAuthn : Le Futur de l'Authentification Est Arrivé

Salut HaWkers, vous avez probablement déjà vu l'option "Se connecter avec Passkey" apparaître sur de plus en plus de sites. Cette semaine, Telegram a annoncé le support des passkeys, suivant une tendance qui transforme comment nous nous authentifions sur le web.

Vous dépendez encore des mots de passe traditionnels ? Comprenons pourquoi les passkeys sont considérées comme le futur de l'authentification et comment les implémenter dans vos applications.

Que Sont les Passkeys et WebAuthn

Passkeys et WebAuthn ne sont pas des technologies concurrentes - ce sont des parties d'un système qui travaille ensemble pour permettre une connexion sans mot de passe de manière sécurisée.

WebAuthn (Web Authentication)

WebAuthn est une API standard développée par la FIDO Alliance et le W3C qui permet des connexions sans mots de passe traditionnels.

Caractéristiques principales :

Basé sur la cryptographie à clé publique
Standard du W3C depuis 2019
Supporté par tous les navigateurs modernes
Composant central du projet FIDO2

Passkeys

Les Passkeys sont des credentials d'authentification FIDO qui permettent la connexion en utilisant le même processus de déverrouillage de l'appareil.

Comment ils fonctionnent :

Utilisent biométrie, PIN ou pattern de l'appareil
Synchronisés entre appareils via cloud
Ne nécessitent pas de mémoriser des mots de passe
Résistants au phishing par conception

Pourquoi les Passkeys Sont Plus Sécurisés

Les mots de passe traditionnels ont des problèmes fondamentaux de sécurité que les passkeys résolvent par conception.

Problèmes des Mots de Passe

Vulnérabilités communes :

Problème	Mots de Passe	Passkeys
Réutilisation	Commun	Impossible
Phishing	Vulnérable	Immunisé
Fuite de base de données	Données exposées	Uniquement clé publique
Force brute	Possible	Impossible
Keyloggers	Vulnérable	Immunisé

Comment les Passkeys Protègent

1. Liés au domaine :
Un passkey créé pour votrebanque.com ne peut pas être utilisé sur votrebanque.fake.com, même si l'utilisateur est trompé.

2. Pas de secret partagé :
Le serveur stocke uniquement la clé publique, qui est inutile sans la clé privée qui ne quitte jamais l'appareil.

3. Uniques par service :
Chaque passkey est une paire de clés unique, donc une fuite d'un service n'affecte pas les autres.

Comment Ça Fonctionne Techniquement

Comprenons le flux d'enregistrement et d'authentification avec WebAuthn.

Flux d'Enregistrement

// 1. Le serveur génère challenge et options
const publicKeyCredentialCreationOptions = {
  challenge: new Uint8Array(32), // Challenge aléatoire du serveur
  rp: {
    name: "Mon Application",
    id: "monsite.com"
  },
  user: {
    id: new Uint8Array(16), // ID unique de l'utilisateur
    name: "utilisateur@email.com",
    displayName: "Nom de l'Utilisateur"
  },
  pubKeyCredParams: [
    { alg: -7, type: "public-key" },   // ES256
    { alg: -257, type: "public-key" }  // RS256
  ],
  authenticatorSelection: {
    authenticatorAttachment: "platform",
    residentKey: "required",
    userVerification: "required"
  },
  timeout: 60000
};

// 2. Le navigateur demande la création de credential
const credential = await navigator.credentials.create({
  publicKey: publicKeyCredentialCreationOptions
});

// 3. Envoyer la clé publique au serveur pour stockage
await fetch('/api/auth/register', {
  method: 'POST',
  body: JSON.stringify({
    id: credential.id,
    rawId: btoa(String.fromCharCode(...new Uint8Array(credential.rawId))),
    response: {
      clientDataJSON: btoa(String.fromCharCode(
        ...new Uint8Array(credential.response.clientDataJSON)
      )),
      attestationObject: btoa(String.fromCharCode(
        ...new Uint8Array(credential.response.attestationObject)
      ))
    }
  })
});

Flux d'Authentification

// 1. Le serveur envoie le challenge
const publicKeyCredentialRequestOptions = {
  challenge: new Uint8Array(32), // Nouveau challenge du serveur
  rpId: "monsite.com",
  allowCredentials: [], // Vide pour passkeys découvrables
  userVerification: "required",
  timeout: 60000
};

// 2. Le navigateur demande l'authentification
const assertion = await navigator.credentials.get({
  publicKey: publicKeyCredentialRequestOptions
});

// 3. Envoyer la signature pour vérification sur le serveur
const response = await fetch('/api/auth/login', {
  method: 'POST',
  body: JSON.stringify({
    id: assertion.id,
    rawId: btoa(String.fromCharCode(...new Uint8Array(assertion.rawId))),
    response: {
      clientDataJSON: btoa(String.fromCharCode(
        ...new Uint8Array(assertion.response.clientDataJSON)
      )),
      authenticatorData: btoa(String.fromCharCode(
        ...new Uint8Array(assertion.response.authenticatorData)
      )),
      signature: btoa(String.fromCharCode(
        ...new Uint8Array(assertion.response.signature)
      ))
    }
  })
});

Implémentation Pratique

Pour faciliter l'implémentation, il existe des bibliothèques qui abstraient la complexité.

SimpleWebAuthn (Recommandé)

// Frontend - @simplewebauthn/browser
import {
  startRegistration,
  startAuthentication
} from '@simplewebauthn/browser';

// Enregistrement
const registrationOptions = await fetch('/api/webauthn/register-options')
  .then(res => res.json());

const registration = await startRegistration(registrationOptions);

await fetch('/api/webauthn/register', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(registration)
});

// Connexion
const authOptions = await fetch('/api/webauthn/auth-options')
  .then(res => res.json());

const authentication = await startAuthentication(authOptions);

await fetch('/api/webauthn/authenticate', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(authentication)
});

Backend avec Node.js

// Backend - @simplewebauthn/server
import {
  generateRegistrationOptions,
  verifyRegistrationResponse,
  generateAuthenticationOptions,
  verifyAuthenticationResponse
} from '@simplewebauthn/server';

// Générer options d'enregistrement
app.get('/api/webauthn/register-options', async (req, res) => {
  const options = await generateRegistrationOptions({
    rpName: 'Mon Application',
    rpID: 'monsite.com',
    userID: user.id,
    userName: user.email,
    attestationType: 'none',
    authenticatorSelection: {
      residentKey: 'required',
      userVerification: 'required'
    }
  });

  // Sauvegarder challenge dans la session
  req.session.challenge = options.challenge;

  res.json(options);
});

// Vérifier enregistrement
app.post('/api/webauthn/register', async (req, res) => {
  const verification = await verifyRegistrationResponse({
    response: req.body,
    expectedChallenge: req.session.challenge,
    expectedOrigin: 'https://monsite.com',
    expectedRPID: 'monsite.com'
  });

  if (verification.verified) {
    // Sauvegarder credential dans la base de données
    await saveCredential(user.id, verification.registrationInfo);
    res.json({ success: true });
  }
});

Mises à Jour de 2025

L'écosystème des passkeys continue d'évoluer avec des améliorations significatives.

WebAuthn Level 3

La spécification WebAuthn Level 3 a été publiée comme Working Draft en janvier 2025, apportant :

APIs améliorées pour création et usage de passkeys
Nouvelles fonctionnalités de sécurité
Meilleur support cross-device

Directives NIST

Le NIST finalisera les Digital Identity Guidelines (SP 800-63-4) en juillet 2025 :

Passkeys reconnus comme "syncable authenticators"
Peuvent atteindre Authenticator Assurance Level 2 (AAL2)
MFA résistant au phishing exigé pour les agences fédérales américaines

Portabilité des Passkeys

La FIDO Alliance développe de nouveaux protocoles :

CXP (Credential Exchange Protocol) - Transfert sécurisé entre fournisseurs
CXF (Credential Exchange Format) - Format standard d'échange

Plateformes avec Support

Les passkeys sont déjà supportés par les principales plateformes.

Synchronisation par Fournisseur

Fournisseur	Synchronisation	Plateformes
Apple	iCloud Keychain	iOS, macOS
Google	Google Password Manager	Android, Chrome
Microsoft	Windows Hello	Windows 10/11
1Password	Application	Toutes
Dashlane	Application	Toutes

Adoption par Services

Services populaires avec support passkeys :

Google
Microsoft
Apple
Amazon
GitHub
PayPal
eBay
Nintendo
Telegram (novembre 2025)

Considérations d'Implémentation

Lors de l'ajout de passkeys à votre application, considérez ces points.

Fallback Nécessaire

Tous les appareils ne supportent pas les passkeys. Gardez des options alternatives :

// Vérifier support du navigateur
const supportsWebAuthn = () => {
  return window.PublicKeyCredential !== undefined &&
    typeof window.PublicKeyCredential === 'function';
};

// Vérifier support des passkeys conditionnels
const supportsConditionalUI = async () => {
  if (!supportsWebAuthn()) return false;

  return await PublicKeyCredential
    .isConditionalMediationAvailable?.() ?? false;
};

Considérations UX

Offrir passkeys comme option, pas obligatoire
Expliquer les bénéfices aux utilisateurs
Permettre l'enregistrement de plusieurs passkeys
Maintenir une méthode de récupération

Conclusion

Les Passkeys représentent la plus grande évolution en authentification web depuis la popularisation des mots de passe. Avec un support large des navigateurs et systèmes d'exploitation, une résistance intrinsèque au phishing et une expérience utilisateur supérieure, c'est le bon moment pour commencer à implémenter.

Pour les développeurs, des bibliothèques comme SimpleWebAuthn rendent l'implémentation accessible. Pour les utilisateurs, l'expérience est plus simple et sécurisée que les mots de passe traditionnels.

Si vous voulez approfondir vos connaissances en sécurité web, je recommande de jeter un œil à un autre article : GitHub Actions Change de Prix en 2026 où vous découvrirez comment protéger vos pipelines de CI/CD.

C'est parti ! 🦅

💻 Maîtrisez JavaScript Pour de Vrai

Les connaissances que vous avez acquises dans cet article ne sont que le début. Il y a des techniques, patterns et pratiques qui transforment les développeurs débutants en professionnels recherchés.

Investissez dans Votre Avenir

J'ai préparé un matériel complet pour vous aider à maîtriser JavaScript :

Options de paiement :

1x de 9,90€ sans frais
ou 9,90€ comptant

📖 Voir le Contenu Complet