Implémentez l’authentification SSO dans Remix en moins de 10 minutes

Avez-vous du mal à mettre en œuvre l’authentification par authentification unique (SSO) dans Remix ? Pas de soucis, je vais vous guider tout au long du processus de mise en œuvre du SSO à l’aide de divers fournisseurs OAuth et fournisseurs d’identité (IdP).

J’ai écrit sur le SSO dans Remixer avec Clerk et GitHub. Dans cet article, nous avons expliqué ce qu’est le SSO et comment il peut être bénéfique pour vous et les utilisateurs de vos logiciels. L’ensemble de l’identité de l’utilisateur était gérée par Clerk, et ce n’est pas le cas pour tous les types de logiciels. Vous souhaiterez peut-être gérer vos utilisateurs vous-même, tout en utilisant un fournisseur OAuth (par exemple, GitHub) pour authentifier vos utilisateurs.

Dans cet article, je ne vais pas expliquer le SSO et je vais directement vous montrer comment utiliser GitHub pour l’authentification, tout en gérant vous-même vos données utilisateur.

Conditions préalables

Pour suivre, vous aurez besoin d’une certaine familiarité avec Remix (par exemple, les chargeurs, les itinéraires et les actions) et d’une compréhension du SSO.

Commençons!

Configurer l’application Remix

Créez une nouvelle application Remix en utilisant npx create-remix. J’utiliserai JavaScript pour ce didacticiel, mais vous êtes libre de créer un projet TypeScript.

Une fois cela fait, exécutez la commande suivante pour installer le remix-auth paquets.

npm install remix-auth remix-auth-github

Authentification du remix est une solution d’authentification côté serveur basée sur une stratégie pour Remixer applications. Avec la prise en charge de TypeScript, vous pouvez mettre en œuvre des stratégies personnalisées, prendre en charge des sessions persistantes et gérer facilement les scénarios de réussite et d’échec. Il y a plusieurs soutenu par la communauté stratégies à utiliser. Nous allons utiliser le Stratégie GitHub dans les exemples précédents.

Créer une application GitHub OAuth

Si vous souhaitez autoriser les utilisateurs à se connecter à l’aide de leur profil GitHub, vous devrez créer une application GitHub OAuth. Vous pouvez créer et enregistrer une application GitHub OAuth sous votre compte personnel ou sous n’importe quelle organisation à laquelle vous disposez d’un accès administratif. Suivez ces instructions pour créer une application OAuth.

1. Dans le coin supérieur droit de n’importe quelle page GitHub, cliquez sur votre photo de profil, puis cliquez sur Paramètres.
2. Dans la barre latérale gauche, cliquez sur Paramètres du développeur.
3. Dans la barre latérale gauche, cliquez sur Applications OAuth.
4. Clique le Nouvelle application OAuth bouton (ou le Enregistrer une nouvelle candidature bouton).
5. Entrez un nom pour votre application dans le champ Nom de l’application zone de saisie.
6. Saisissez l’URL complète du site Web de votre application dans le champ Page d’accueil URL zone de saisie.
7. Entrer http://localhost:3000/auth/github/callback URL comme URL de rappel d’autorisation.
8. Clique le Enregistrer une demande bouton pour terminer le processus.

Vous serez redirigé vers la page d’informations générales de votre application OAuth. Copiez le identité du client pour une utilisation ultérieure. Vous avez également besoin d’un secret client. Clique le Générer un nouveau secret client bouton pour en générer un.

Copiez le secret dans un éditeur de texte afin de pouvoir le retrouver lorsque vous en aurez besoin dans les sections à venir.

Authentifier les utilisateurs à l’aide de Remix Auth

Remix Auth a besoin d’un objet de stockage de session pour stocker la session de l’utilisateur. Il peut s’agir de n’importe quel objet qui implémente le SessionStorage interface dans Remix. Le stockage de session comprend comment analyser et générer des cookies, et comment stocker les données de session dans une base de données ou un système de fichiers. Remix est livré avec plusieurs options de stockage de session intégrées pour les scénarios courants, et une pour créer la vôtre :

• createCookieSessionStorage
• createMemorySessionStorage
• createFileSessionStorage (nœud)
• createWorkersKVSessionStorage (Travailleurs de Cloudflare)
• createArcTableSessionStorage (architecte, Amazon DynamoDB)
• stockage personnalisé avec createSessionStorage

Pour cet exemple, je vais utiliser le createCookieSessionStorage fonction. Cette fonction est utilisée pour les sessions purement basées sur des cookies, où les données de session elles-mêmes sont stockées dans le cookie de session avec le navigateur.

Créez un nouveau fichier nommé app/service/session.server.js et collez-le dans le contenu ci-dessous.

import { createCookieSessionStorage } from "@remix-run/node";

export let sessionStorage = createCookieSessionStorage({
  cookie: {
    name: "_session", 
    sameSite: "lax", 
    path: "https://www.telerik.com/", 
    httpOnly: true, 
    secrets: ["s3cr3t"], 
    secure: process.env.NODE_ENV === "production", 
  },
});

Maintenant, créez un fichier app/service/auth.server.js pour la configuration Remix Auth.

import { GitHubStrategy } from "remix-auth-github";
import { Authenticator } from "remix-auth";
import { sessionStorage } from "./session.server";

let gitHubStrategy = new GitHubStrategy(
  {
    clientID: "CLIENT_ID",
    clientSecret: "CLIENT_SECRET",
    callbackURL: "http://localhost:3000/auth/github/callback",
  },
  async ({ accessToken, extraParams, profile }) => {
    
    return profile;
  }
);

export let authenticator = new Authenticator(sessionStorage);
authenticator.use(gitHubStrategy);

Ici, nous importons le Authenticator la classe et le sessionStorage objet. Nous avons créé une stratégie GitHub et l’avons enregistrée auprès de l’authentificateur.

Le GitHubStrategy le constructeur prend quelques paramètres. Nous lui transmettons l’ID client GitHub, le secret et l’URL de rappel. Nous lui avons également donné une fonction de rappel qui sera exécutée une fois l’utilisateur authentifié depuis GitHub. Cette fonction a accès au accessToken renvoyé, aux paramètres et aux données du profil utilisateur. Avec ces informations, vous pouvez désormais créer ou récupérer des données utilisateur à partir de votre base de données ou partout où vous choisissez de stocker et de gérer ces données.

N’oubliez pas de remplacer les espaces réservés CLIENT_ID et CLIENT_SECRET par l’ID client et le secret de votre application GitHub OAuth.

Nous disons à l’authentificateur d’utiliser le gitHubStrategy en appelant authenticator.use(gitHubStrategy).

Maintenant que la stratégie est enregistrée, passons à la création des itinéraires.

Créez la route de rappel d’autorisation GitHub en créant un fichier nommé app/routes/auth.github.callback.jsx:

import { authenticator } from "../service/auth.server";

export async function loader({ request }) {
  return authenticator.authenticate("github", request, {
    successRedirect: "/protected",
    failureRedirect: "/login",
  });
}

Nous appelons le authenticator.authenticate() méthode avec le nom de la stratégie que nous voulons utiliser, le request objet et un objet avec les URL vers lesquelles nous voulons que l’utilisateur soit redirigé après un succès ou un échec. Le /protected route sera une page à laquelle seuls les utilisateurs authentifiés auront accès. Nous allons créer cela dans un instant, mais commençons par gérer la page de connexion.

Créer un nouveau fichier routes/login.jsx avec le contenu suivant :

import { Form } from "@remix-run/react";
export default function Login() {
  return (
    <Form action="/auth/github" method="post">
      <button>Login with GitHub</button>
    </Form>
  );
}

Cette page a un formulaire de base qui publie sur /auth/github lorsque le formulaire est soumis. Vous pouvez également créer l’action dans le même /login itinéraire, mais j’ai choisi de le séparer pour cet exemple.

Ensuite, créons le /auth/github itinéraire. Créer un nouveau fichier routes/auth.github.jsx et collez-y le contenu ci-dessous.

import { redirect } from "@remix-run/node";
import { authenticator } from "../service/auth.server";

export async function loader() {
  return redirect("/login");
}

export async function action({ request }) {
  return authenticator.authenticate("github", request, {
    successRedirect: "/protected",
  });
}

Il s’agit d’une route de ressources qui redirige vers le /login itinéraire une fois chargé. L’action authentifie l’utilisateur. Si l’utilisateur n’est pas authentifié, il est redirigé vers GitHub, sinon il est redirigé vers /protected itinéraire.

Ajout d’itinéraires protégés

Créons maintenant le /protected itinéraire. Créez un nouveau fichier nommé routes/protected.jsxpuis copiez et collez l’extrait ci-dessous.

import { json } from "@remix-run/node";
import { authenticator } from "../service/auth.server";
import { useLoaderData, Form } from "@remix-run/react";

export async function loader({ request }) {
  let user = await authenticator.isAuthenticated(request, {
    failureRedirect: "/login",
  });

  return json(user);
}

export default function Index() {
  const data = useLoaderData();

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Welcome {data.displayName}</h1>
      <ul>
        <li>You have {data._json.followers} followers</li>
        <li>You're following {data._json.following} people</li>
      </ul>
      <Form action="/logout" method="post">
        <button>Logout? Click me</button>
      </Form>
    </div>
  );
}

Ici, nous avons utilisé le authenticator.isAuthenticated() méthode, avec la possibilité de rediriger vers /login si l’utilisateur n’est pas authentifié. Si tel est le cas, nous obtenons l’objet utilisateur, qui dans notre cas est les données du profil GitHub (rappelez-vous que nous avons renvoyé ces données dans auth.server.js). Nous renvoyons ces données au client et affichons certaines d’entre elles à l’utilisateur.

Nous avons ajouté un formulaire qui publie sur le /logout itinéraire lorsqu’on clique dessus. Implémentons cette route.

Créer un nouveau fichier routes/logout.jsx et collez-y l’extrait de code ci-dessous.

import { authenticator } from "../service/auth.server";

export async function action({ request }) {
  return await authenticator.logout(request, { redirectTo: "/login" });
}

Cette route déconnecte l’utilisateur en appelant authenticator.logout() méthode. Cette méthode détruit la session utilisateur et la redirige vers le /login itinéraire.

Nous avons presque terminé. Ajoutons un bouton de connexion à la page d’accueil. Ouvrez le _index.jsx et ajoutez le balisage suivant entre l’élément d’en-tête et la liste non ordonnée (c’est-à-dire après la ligne 10).

<div>
  <Form action="/auth/github" method="post">
    <button>Login with GitHub</button>
  </Form>
</div>

Démo 👩🏽‍💻💃🏽

Démarrez l’application en utilisant npm run dev et essayez-le dans votre navigateur.

C’est un emballage

Voilà. 🚀 En moins de 30 minutes, vous disposez d’une application entièrement protégée avec une authentification unique effectuée via GitHub en tant que serveur OAuth. Nous avons utilisé Remix Auth, qui fournit une API complète pour gérer toute forme d’authentification dans Remix. Bien que nous ayons utilisé la stratégie GitHub (via le package remix-auth-github), vous pouvez créer votre propre stratégie et combiner plusieurs stratégies dans une seule application.

J’espère que cela vous a été utile. Laissez un commentaire si vous avez des questions et consultez mes autres articles sur le SSO dans l’application Next.js.

Voici le code complet de cet article sur GitHub.