Introduction

Cet article fournit un guide complet, étape par étape, pour implémenter l'authentification et l'autorisation dans une application backend NestJS avec Clerk.

Qu'est-ce que le greffier ?

Clerk est une plateforme complète offrant des interfaces utilisateur intégrables, des API flexibles et un tableau de bord intuitif et robuste pour une authentification et une gestion transparentes des utilisateurs. Il couvre tout, de la gestion des sessions et de l'authentification multifacteur aux connexions sociales, aux liens magiques, aux codes d'accès à usage unique par e-mail ou SMS et bien plus encore.

Pourquoi utiliser Clerk ?

Les exigences, les tendances et les meilleures pratiques en matière d'authentification et de sécurité évoluent constamment car la protection des données et la confidentialité sont de plus en plus importantes. En confiant ces responsabilités à un fournisseur de services spécialisé, vous pouvez vous concentrer sur la création des fonctionnalités de base de votre application et expédier plus rapidement.

Des plateformes comme Clerk existent pour assumer ces tâches de sécurité à votre place.

Conditions préalables

Connaissance de base de Typescript
Familiarité avec les principes fondamentaux de NestJS
Compréhension du concept d'authentification sur le backend
Exécution de Noeud 18 ou version ultérieure

Configuration du projet

Ce projet nécessite un projet NestJS nouveau ou existant, un compte et une application Clerk, ainsi que des bibliothèques telles que Passport, Passport Strategy et Clerk backend SDK.

Créer un projet NestJS

Vous pouvez facilement configurer un nouveau projet NestJS à l'aide de Nest CLI. Avec le gestionnaire de packages de votre choix, exécutez les commandes suivantes pour créer une nouvelle application Nest :

$ pnpm add -g @nestjs/cli
$ nest new clerk-auth

Copier après la connexion

Consultez la documentation NestJS pour plus de détails.

Configuration de votre compte Clerk et de votre application

Si vous n'en avez pas déjà un, créez un compte Clerk et configurez une nouvelle application dans le tableau de bord Clerk. Vous pouvez commencer sur le site Web du greffier.

Installation des bibliothèques requises

Les bibliothèques requises pour ce projet peuvent être installées avec cette commande :

$ pnpm add @clerk/backend @nestjs/config @nestjs/passport passport passport-custom

Copier après la connexion

Configuration de l'environnement

Créez un fichier .env dans le répertoire racine de votre projet pour gérer les variables pour différents environnements, production, développement ou staging.

Ajoutez les variables suivantes, en remplaçant les espaces réservés par les clés réelles obtenues à partir du tableau de bord de votre compte Clerk.

# .env

CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

Copier après la connexion

Pour accéder aux variables d'environnement dans toute l'application à l'aide de ConfigService, importez le ConfigModule dans l'AppModule racine.

// src/app.module.ts

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
    }),
  ],
})
export class AppModule {}

Copier après la connexion

Intégration du commis dans NestJS

Cette section explique comment intégrer et utiliser le SDK backend Clerk dans votre projet NestJS.

Création d'un fournisseur de client Clerk

L'enregistrement du client Clerk en tant que fournisseur le rend injectable dans les classes à l'aide d'un décorateur, ce qui lui permet d'être utilisé partout où cela est nécessaire dans la base de code, comme démontré dans les sections à venir.

$ pnpm add -g @nestjs/cli
$ nest new clerk-auth

Copier après la connexion

Enregistrement du ClerkClientProvider dans AppModule

Ensuite, vous devez enregistrer le fournisseur auprès de Nest pour activer l'injection de dépendances.

$ pnpm add @clerk/backend @nestjs/config @nestjs/passport passport passport-custom

Copier après la connexion

Utiliser Passport avec un JWT émis par un commis

Clerk émet un jeton JWT lorsqu'un utilisateur s'inscrit ou se connecte via les pages hébergées de Clerk ou une application frontale. Ce jeton est ensuite envoyé en tant que jeton porteur dans l'en-tête Autorisation des requêtes adressées à l'application backend NestJS.

Créer une stratégie de commis

Dans NestJS, Passport est le moyen recommandé pour mettre en œuvre des stratégies d'authentification. Vous allez créer une stratégie Clerk personnalisée qui vérifie les jetons avec le client Clerk.

# .env

CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

Copier après la connexion

La méthode validate() renvoie les données utilisateur que NestJS attache automatiquement au request.user.

Création d'un module d'authentification

Créez un AuthModule qui fournit la stratégie Clerk et s'intègre au PassportModule. Ensuite, enregistrez l'AuthModule dans l'AppModule.

// src/app.module.ts

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
    }),
  ],
})
export class AppModule {}

Copier après la connexion

// src/providers/clerk-client.provider.ts

import { createClerkClient } from '@clerk/backend';
import { ConfigService } from '@nestjs/config';

export const ClerkClientProvider = {
  provide: 'ClerkClient',
  useFactory: (configService: ConfigService) => {
    return createClerkClient({
      publishableKey: configService.get('CLERK_PUBLISHABLE_KEY'),
      secretKey: configService.get('CLERK_SECRET_KEY'),
    });
  },
  inject: [ConfigService],
};

Copier après la connexion

Mise en place de protections de routes

Les itinéraires protégés sont des itinéraires qui nécessitent que l'utilisateur soit authentifié avant de pouvoir y accéder.

Création d'une garde d'authentification de commis

Les gardes déterminent si une demande spécifique doit être traitée par un gestionnaire de route en fonction de certaines conditions d'exécution.

Si vous souhaitez protéger par défaut toutes les routes de votre application, vous devrez suivre les étapes suivantes :

Créez un décorateur public pour marquer les itinéraires qui doivent être accessibles sans authentification.
Implémentez un ClerkAuthGuard pour restreindre l'accès aux itinéraires protégés, permettant uniquement aux utilisateurs authentifiés de continuer.

// src/app.module.ts

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { ClerkClientProvider } from 'src/providers/clerk-client.provider';

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
    }),
  ],
  providers: [ClerkClientProvider],
})
export class AppModule {}

Copier après la connexion

// src/auth/clerk.strategy.ts

import { User, verifyToken } from '@clerk/backend';
import { Injectable, Injectable, UnauthorizedException } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { PassportStrategy } from '@nestjs/passport';
import { Strategy } from 'passport-custom';
import { UsersService } from 'src/users/users.service';
import { Request } from 'express';
import { ClerkClient } from '@clerk/backend';

@Injectable()
export class ClerkStrategy extends PassportStrategy(Strategy, 'clerk') {
  constructor(
    @Inject('ClerkClient')
    private readonly clerkClient: ClerkClient,
    private readonly configService: ConfigService,
  ) {
    super();
  }

  async validate(req: Request): Promise<User> {
    const token = req.headers.authorization?.split(' ').pop();

    if (!token) {
      throw new UnauthorizedException('No token provided');
    }

    try {
      const tokenPayload = await verifyToken(token, {
        secretKey: this.configService.get('CLERK_SECRET_KEY'),
      });

      const user = await this.clerkClient.users.getUser(tokenPayload.sub);

      return user;
    } catch (error) {
      console.error(error);
      throw new UnauthorizedException('Invalid token');
    }
  }
}

Copier après la connexion

Activation de l'authentification à l'échelle mondiale

Étant donné que la plupart de vos points de terminaison seront protégés par défaut, vous pouvez configurer la garde d'authentification en tant que garde globale.

// src/auth/auth.module.ts

import { Module } from '@nestjs/common';
import { ClerkStrategy } from './clerk.strategy';
import { PassportModule } from '@nestjs/passport';
import { ClerkClientProvider } from 'src/providers/clerk-client.provider';
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [PassportModule, ConfigModule],
  providers: [ClerkStrategy, ClerkClientProvider],
  exports: [PassportModule],
})
export class AuthModule {}

Copier après la connexion

Définir les itinéraires protégés et publics

Dans ces deux contrôleurs, le décorateur Public est utilisé dans l'AppController pour désigner un itinéraire comme public. En revanche, aucun décorateur n'est nécessaire dans AuthController pour spécifier les routes comme protégées, car la garde d'authentification est appliquée globalement par défaut.

// src/app.module.ts

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { ClerkClientProvider } from 'src/providers/clerk-client.provider';
import { AuthModule } from 'src/auth/auth.module';

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
    }),
    AuthModule,
  ],
  providers: [ClerkClientProvider],
})
export class AppModule {}

Copier après la connexion

// src/decorators/public.decorator.ts

import { SetMetadata } from '@nestjs/common';

export const IS_PUBLIC_KEY = 'isPublic';
export const Public = () => SetMetadata(IS_PUBLIC_KEY, true);

Copier après la connexion

Remarque : N'oubliez pas d'enregistrer l'AppController dans l'AppModule et l'AuthController dans l'AuthModule.

Conclusion

Clerk, en tant que plateforme, gère les responsabilités d'authentification et de sécurité, en se tenant au courant des dernières tendances et des meilleures pratiques. Cela vous permet de vous concentrer sur la création des fonctionnalités principales de votre application et d’accélérer votre processus de développement.

Dans ce guide, nous avons couvert les étapes de mise en œuvre de l'authentification Clerk, de la configuration du projet à la sécurisation des itinéraires. Ces étapes fondamentales devraient vous aider à démarrer votre voyage d’exploration des possibilités d’une plateforme de services d’authentification.

Un exemple entièrement fonctionnel de ce projet est inclus à la fin de cet article.