Authentification des utilisateurs avec WorkOS

Dans cet article, nous examinerons les méthodes d’authentification proposées par WorkOS et comment en intégrer une dans une simple application Next.js de deux pages.

Nous sommes bien conscients que la manière dont l’authentification est effectuée dans les applications Web modernes a évolué. Plusieurs tiers ont été introduits pour résumer ce processus et fournir une configuration rapide et efficace. Il est révolu le temps où nous devions installer et configurer manuellement le mécanisme d’authentification de nos applications. Aujourd’hui, avec seulement quelques lignes de code, nous sommes prêts à partir.

WorkOS est l’un des pionniers de l’authentification moderne. Il fournit suffisamment d’outils pour intégrer l’authentification et la gestion des utilisateurs adaptées aux entreprises en très peu de temps.

Dans cet article, nous verrons WorkOS, ses différentes méthodes d’authentification et comment l’intégrer dans une démo Suivant.js application.

Exigences

Pour suivre, vous aurez besoin d’avoir :

Comment WorkOS aborde l’authentification

WorkOS facilite l’ajout de fonctionnalités d’authentification et de gestion des identités au niveau de l’entreprise à différents types d’applications Web. Nous pouvons facilement intégrer des options telles que l’authentification par e-mail et par mot de passe, la connexion sociale, l’authentification multifacteur et bien plus encore sans créer d’infrastructure complexe à partir de zéro, permettant ainsi aux développeurs de se concentrer sur la création des fonctionnalités principales de leurs applications.

WorkOS propose trois méthodes d’authentification pouvant être intégrées aux applications Web :

• Kit d’authentification: Cet outil fournit une interface utilisateur d’authentification qui peut être personnalisée et prend en charge diverses méthodes d’authentification. Cette interface utilisateur prédéfinie gère automatiquement l’inscription et la connexion, la vérification des e-mails, les renforcements de sécurité, la stratégie de marque et bien plus encore. Une fois activé, il redirige vers une URL extérieure à l’application, où tout le processus d’authentification est effectué avant de revenir à l’application.
• Interface utilisateur AuthKit personnalisée: Au lieu de s’appuyer sur l’interface utilisateur prédéfinie, WorkOS permet une approche dans laquelle les développeurs ont la liberté de créer des interfaces utilisateur personnalisées en utilisant leur pile technologique préférée et de se connecter de manière transparente à l’API d’authentification et de gestion des utilisateurs.
• Authentification unique (SSO) autonome: WorkOS propose également une approche d’intégration qui ne peut être utilisée que par les applications intéressées par les fonctionnalités SSO.

Dans cet article, nous nous concentrerons sur la première approche, AuthKit, car c’est la méthode la plus recommandée pour intégrer WorkOS dans les applications Web en raison de sa facilité d’utilisation et de sa flexibilité.

Méthodes d’authentification WorkOS

WorkOS prend en charge différentes méthodes d’authentification, pour divers besoins en matière d’applications, de sécurité et d’expérience utilisateur. Certains d’entre eux sont :

E-mail et mot de passe

Il s’agit de la méthode d’authentification par défaut. Il s’agit de la combinaison classique d’e-mail et de mot de passe que nous connaissons tous. Les utilisateurs peuvent se connecter ou s’inscrire avec une adresse e-mail et un mot de passe valides. WorkOS permet également de configurer la politique de sécurité des mots de passe avec les critères requis auxquels les mots de passe doivent répondre.

Connexion sociale/OAuth

WorkOS s’intègre bien aux fournisseurs OAuth populaires, permettant aux utilisateurs de s’authentifier à l’aide de leurs informations d’identification provenant de services tiers tels que Google, Facebook, Microsoft, GitHub, Apple et plus encore. Il fournit également un portail unifié pour mettre en œuvre ces fournisseurs en une seule intégration.

Authentification magique

WorkOS fournit également une authentification sans mot de passe, permettant aux utilisateurs de se connecter ou de s’inscrire à l’aide d’OTP ou de jetons uniques envoyés à leur courrier électronique. Cette méthode moderne permet aux utilisateurs de s’authentifier sans avoir besoin de mot de passe.

Authentification unique

La méthode d’authentification par authentification unique est conçue spécifiquement pour une utilisation en entreprise. Il permet l’authentification des utilisateurs sur plusieurs applications à l’aide d’un seul ensemble d’informations d’identification généralement gérées par le fournisseur d’identité de l’organisation de l’utilisateur, tel que Okta.

Authentification multifacteur

WorkOS permet également aux utilisateurs de définir une couche de sécurité supplémentaire dans laquelle ils doivent fournir un mot de passe à usage unique basé sur le temps pour authentifier complètement l’application.

Configuration du projet

Créons une simple application Next.js qui nous servira de démo tout au long de ce guide. Exécutez la commande ci-dessous dans votre ligne de commande pour créer une application Next.js :

npx create-next-app

Donnez à l’application le nom de votre choix et répondez au reste des invites résultantes comme indiqué ci-dessous :

Exécutez ces commandes pour accéder au dossier de projet créé et démarrez votre serveur de développement :

cd workos-auth-demo
npm run dev

Nous allons créer un Home et un Protected page. Plus loin dans l’article, nous verrons comment intégrer WorkOS dans le projet afin que le Home La page sert de point d’entrée à l’application et de Protected La page n’est accessible que lorsqu’un utilisateur est authentifié.

Créer un components/Header.tsx à la racine de l’application et ajoutez-y ce qui suit :

import React from "react";
import Link from "next/link";

export default function Header() {
  return (
    <header className="w-full flex my-6 px-8 gap-4 justify-between items-center">
      <Link href="/" className="text-lg font-medium">
        WorkOS Auth Demo
      </Link>
      <div className="flex gap-4">
        <Link href="">Sign In</Link>
        <Link href="">Sign Up</Link>
      </div>
    </header>
  );
}

Ici, nous avons créé un Header composant. Nous ajouterons les URL d’authentification correspondantes pour la connexion et l’inscription <Link> composants une fois que nous intégrons WorkOS.

Ouvrez le app/layout.tsx fichier et ajoutez le Header à la disposition racine de l’application :

import type { Metadata } from "next";
import "./globals.css";
import Header from "@/components/Header";

export const metadata: Metadata = {
  title: "WorkOS Auth Demo",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode,
}>) {
  return (
    <html lang="en">
      <body className="antialiased">
        <Header />
        {children}
      </body>
    </html>
  );
}

Dans le code ci-dessus, nous avons supprimé le code de mise en page du modèle et ajouté le Header à la disposition racine.

Ensuite, créons le Home et Protected pages. Ouvrez le app/page.tsx fichier et remplacez son contenu par ce qui suit :

import Link from "next/link";

export default function Home() {
  return (
    <main className="w-[25rem] border my-12 mx-auto p-4 text-center">
      <h2 className="text-lg font-medium">WorkOS Auth Demo app</h2>
      <div className="my-4">
        <p>
          A basic Next.js 14 application that demonstrates authentication with
          WorkOS
        </p>
        <Link href="/protected" className="underline my-4 inline-block">
          Protected Page
        </Link>
      </div>
    </main>
  );
}

Dans le code ci-dessus, nous avons créé un Home composant avec un contenu de base.

Pour la page Protégée, créez un /components/protected/page.tsx fichier et ajoutez-y ce qui suit :

import Link from "next/link";

export default function Protected() {
  return (
    <main className="w-[25rem] border my-12 mx-auto p-4 text-center">
      <h2 className="text-lg font-medium">Protected page</h2>
      <div className="my-4">
        <Link href="/" className="underline my-4 inline-block">
          Home Page
        </Link>
      </div>
    </main>
  );
}

Ici, nous avons créé une nouvelle page avec du contenu factice également.

Enfin, supprimez les styles de modèle dans le app/globals.css fichier comme indiqué ci-dessous :

// Remove these
@tailwind base;
@tailwind components;
@tailwind utilities;

Voici à quoi ressemble la démo maintenant :

Remarquez que nous n’avons pas créé de pages d’inscription et de connexion. Dans cette démo, nous travaillerons uniquement avec WorkOS AuthKit, qui, comme mentionné plus tôt dans l’article, résume et gère les mécanismes d’authentification.

Dans la section suivante, voyons comment installer WorkOS et le configurer pour notre application.

Installation et configuration de WorkOS

Ouvrir l’officiel Site Web WorkOS dans votre navigateur.

L’intégration de WorkOS nécessite d’avoir un compte. Cliquez sur Commencer pour créer un compte ou Se connecter si vous en avez déjà un.

Après un processus d’authentification et d’intégration réussi, vous devriez voir le tableau de bord WorkOS, comme indiqué ci-dessous.

Cliquez sur Utilisateurs sur la barre latérale et suivez les étapes en conséquence.

Sélectionner E-mail + Mot de passe et Google OAuth comme méthodes d’authentification et cliquez sur Commencer la configuration.

Passer le Personnaliser WorkOS et Essayez votre page de connexion mesures.

Sur le Intégrez votre application étape, entrez «http://localhost:3000/callback » comme URI de redirection et cliquez sur Continuer.

Cliquez sur Activer la gestion des utilisateurs pour terminer les étapes de configuration.

Ensuite, nous devons obtenir et définir les clés API dans notre application. Ces clés seront utilisées ultérieurement pour faire fonctionner WorkOS dans notre application.

Créer un .env.local fichier au niveau racine de l’application et ajoutez-y ce qui suit :

WORKOS_API_KEY = "your-api-key";
WORKOS_CLIENT_ID = "your-client-id";
WORKOS_COOKIE_PASSWORD = "<your-password>";
NEXT_PUBLIC_WORKOS_REDIRECT_URI = "http://localhost:3000/callback";

Sur le tableau de bord, cliquez sur le Clés API dans la barre latérale pour obtenir votre clé API et votre ID client.

Le WORKOS_COOKIE_PASSWORD est utilisé sous le capot pour crypter les cookies, il est donc nécessaire de le rendre fort et d’au moins 32 caractères.

Vous pouvez générer un mot de passe sécurisé en utilisant le 1Générateur de mots de passe.

Intégration de WorkOS dans un projet Next.js moderne

Pour intégrer la configuration WorkOS hébergée dans notre application de démonstration Next.js, exécutez la commande ci-dessous pour installer les dépendances nécessaires :

npm install @workos-inc/authkit-nextjs

Cela installe le SDK WorkOS AuthKit Next.js. Le SDK donne accès aux composants, méthodes et hooks d’authentification d’assistance.

Le SDK fournit un AuthKitProvider composant qui doit être enroulé autour de l’application afin que l’état d’authentification et les configurations soient accessibles dans toute l’application.

Ouvrez le app/layout.tsx fichier et envelopper le body élément dans la disposition racine comme indiqué ci-dessous :

import type { Metadata } from "next";
import "./globals.css";
import Header from "@/components/Header";
import { AuthKitProvider } from "@workos-inc/authkit-nextjs";

export const metadata: Metadata = {
  title: "WorkOS Auth Demo",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode,
}>) {
  return (
    <html lang="en">
      <AuthKitProvider>
        <body className="antialiased">
          <Header />
          {children}
        </body>
      </AuthKitProvider>
    </html>
  );
}

Pour définir les routes qui nécessitent une authentification, nous devons ajouter une couche middleware d’authentification.

Créer un middleware.ts fichier au niveau racine de l’application et ajoutez-y ce qui suit :

import { authkitMiddleware } from "@workos-inc/authkit-nextjs";

export default authkitMiddleware({
  middlewareAuth: {
    enabled: true,
    unauthenticatedPaths: ["https://www.telerik.com/"],
  },
});

export const config = { matcher: ["/protected"] };

Dans le code ci-dessus, nous utilisons le authkitMiddleware fonction exportée depuis le SDK pour intercepter le flux de route et ajouter la restriction nécessaire. Nous avons ajouté une couche d’authentification sur le /protected page.

Lorsque les utilisateurs s’authentifient, ils sont redirigés vers la route de rappel de l’application. N’oubliez pas que nous avons défini cela sur la console WorkOS et dans le .env.local fichier comme « http://localhost:3000/callback». Ensuite, nous devons ajouter le rappel à notre application.

Créer un app/callback/route.ts fichier et ajoutez-y ce qui suit :

import { handleAuth } from "@workos-inc/authkit-nextjs";

export const GET = handleAuth({ returnPathname: "/protected" });

Ici, nous avons défini la route de rappel et géré la redirection d’authentification à l’aide du handleAuth méthode. Nous avons configuré la méthode pour rediriger vers /protected.

Nous pouvons déjà tester l’ensemble de la configuration maintenant. Lorsque vous essayez de visiter le /protected page sans vous authentifier, vous serez redirigé vers la page d’authentification.

Explorer les méthodes intégrées dans WorkOS

Une fois l’installation et la configuration terminées, explorons quelques méthodes intégrées. Le SDK WorkOS AuthKit Next.js expose le getSignInUrl et getSignUpUrl méthodes qui renvoient l’URL pour rediriger les utilisateurs vers AuthKit pour se connecter et s’inscrire, respectivement.

Voyons comment ils fonctionnent dans l’application de démonstration. Ouvrez le components/Heaser.tsx fichier et mettez à jour le code comme indiqué ci-dessous :

import React from "react";
import Link from "next/link";
import { getSignInUrl, getSignUpUrl } from "@workos-inc/authkit-nextjs";

export default async function Header() {
  const signInUrl = await getSignInUrl();
  const signUpUrl = await getSignUpUrl();

  return (
    <header className="w-full flex my-6 px-8 gap-4 justify-between items-center">
      <Link href="/" className="text-lg font-medium">
        WorkOS Auth Demo
      </Link>
      <div className="flex gap-4">
        <Link href={signInUrl}>Sign In</Link>
        <Link href={signUpUrl}>Sign Up</Link>
      </div>
    </header>
  );
}

Ici, nous avons déclenché les deux méthodes d’assistance pour obtenir les URL d’authentification, qui sont ensuite transmises aux composants Link en conséquence.

Lorsque vous cliquez sur l’un des liens, vous devriez être redirigé vers la page d’authentification.

Gestion des sessions utilisateur

Voyons comment gérer les sessions utilisateur. Le SDK fournit également withAuth et signOut méthodes d’assistance. Le withAuth La méthode reflète les données de l’utilisateur une fois authentifié, tandis que signOut est une action du serveur qui met fin à la session de l’utilisateur et gère la déconnexion de l’utilisateur de l’application.

WorkOS fournit également une section dans la console pour afficher et gérer les utilisateurs authentifiés.

Voyons cela en action. Ouvrez le app/protected/page.tsx fichier et mettez à jour le code comme indiqué ci-dessous :

import Link from "next/link";
import { signOut, withAuth } from "@workos-inc/authkit-nextjs";

export default async function Protected() {
  const { user } = await withAuth();

  return (
    <main className="w-[25rem] border my-12 mx-auto p-4 text-center">
      <h2 className="text-lg font-medium">Protected page</h2>
      <div className="my-4">
        <Link href="/" className="underline my-4 inline-block">
          Home Page
        </Link>
      </div>
      <div className="my-4">
        <p>Welcome, {user?.firstName}</p>
        <form
          action={async () => {
            "use server";
            await signOut();
          }}
        >
          <button type="submit">Sign out</button>
        </form>
      </div>
    </main>
  );
}

Dans le code mis à jour, après l’authentification, nous avons défini le code pour extraire et restituer le prénom de l’utilisateur et implémenter une action du serveur qui est déclenchée lorsque le bouton « Se déconnecter » est cliqué.

Après un processus de déconnexion réussi, les utilisateurs sont redirigés vers la page d’accueil de l’application. Par conséquent, nous devons nous assurer que notre configuration WorkOS en est informée.

Revenez à la console et cliquez sur le Redirections puis entrez l’itinéraire de la page d’accueil comme indiqué ci-dessous :

Nous pouvons maintenant tester le flux d’authentification complet.

Sur la console, lorsque vous cliquez sur le Utilisateurs vous pouvez voir le compte qui vient d’être créé.

Personnaliser la page d’authentification

Jusqu’à cette section de l’article, nous avons réalisé une intégration de base de WorkOS dans une application Next.js. Cependant, WorkOS offre bien plus de fonctionnalités que cela.

WorkOS permet également la stratégie de marque. Nous pouvons personnaliser l’apparence de la page d’authentification. Cliquez sur l’onglet Branding de la console pour y accéder.

Ici, nous pouvons définir un logo personnalisé, un favicon, un thème, les couleurs de la marque, un arrière-plan et bien plus encore. Vous pouvez également prévisualiser les modifications immédiatement.

Conclusion

WorkOS fournit une interface élégante qui résume différents mécanismes d’authentification. Il permet aux utilisateurs de configurer l’authentification dans les applications Web modernes sans tirer beaucoup de ficelles.

Dans l’article, nous avons examiné les méthodes d’authentification proposées par WorkOS. Nous avons également examiné comment l’intégrer dans une application Next.js, en créant une application simple de deux pages. Apprenez-en davantage sur WorkOS ici.