導入

この記事では、Clerk を使用して NestJS バックエンドアプリケーションに認証と認可を実装するための包括的なステップバイステップガイドを提供します。

事務員とは何ですか？

Clerk は、埋め込み可能なユーザーインターフェイス、柔軟な API、シームレスなユーザー認証と管理のための直感的で堅牢なダッシュボードを提供する包括的なプラットフォームです。セッション管理や多要素認証からソーシャルサインオン、マジックリンク、電子メールや SMS のワンタイムパスコードなど、あらゆるものをカバーします。

クラークを使用する理由

データ保護とプライバシーの重要性がますます高まっているため、認証とセキュリティの要件、トレンド、ベストプラクティスは常に進化しています。これらの責任を専門のサービスプロバイダーに任せることで、アプリケーションのコア機能の構築に集中し、より迅速に出荷できるようになります。

これらのセキュリティタスクを代わりに引き受ける Clerk のようなプラットフォームが存在します。

前提条件

Typescript の基礎知識
NestJS の基礎についての知識
バックエンドでの認証の概念を理解する
ノード 18 以降を実行中

プロジェクトのセットアップ

このプロジェクトには、新規または既存の NestJS プロジェクト、Clerk アカウントとアプリケーション、および Passport、Passport Strategy、Clerk バックエンド SDK などのライブラリが必要です。

NestJS プロジェクトの作成

Nest CLI を使用して、新しい NestJS プロジェクトを簡単にセットアップできます。任意のパッケージマネージャーを使用して、次のコマンドを実行して新しい Nest アプリケーションを作成します。

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

ログイン後にコピー

詳細については、NestJS のドキュメントを確認してください。

Clerk アカウントとアプリケーションのセットアップ

まだお持ちでない場合は、Clerk アカウントを作成し、Clerk ダッシュボードで新しいアプリケーションをセットアップします。 Clerk の Web サイトから始めることができます。

必要なライブラリのインストール

このプロジェクトに必要なライブラリは、次のコマンドでインストールできます:

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

ログイン後にコピー

環境構成

実稼働、開発、ステージングなど、さまざまな環境の変数を管理するには、プロジェクトのルートディレクトリに .env ファイルを作成します。

次の変数を追加し、プレースホルダーを Clerk アカウントダッシュボードから取得した実際のキーに置き換えます。

# .env

CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

ログイン後にコピー

ConfigService を使用してアプリケーション全体の環境変数にアクセスするには、ConfigModule をルート AppModule にインポートします。

// src/app.module.ts

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

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

ログイン後にコピー

NestJS への Clerk の統合

このセクションでは、Clerk バックエンド SDK を NestJS プロジェクトに統合して利用する方法について説明します。

Clerk クライアントプロバイダーの作成

Clerk クライアントをプロバイダーとして登録すると、デコレーターを使用してクラスに注入できるようになり、次のセクションで説明するように、コードベース全体で必要な場所で使用できるようになります。

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

ログイン後にコピー

AppModule への ClerkClientProvider の登録

次に、依存関係の注入を有効にするためにプロバイダーを Nest に登録する必要があります。

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

ログイン後にコピー

店員発行の JWT でパスポートを使用する

Clerk は、ユーザーが Clerk のホストされたページまたはフロントエンドアプリを通じてサインアップまたはログインすると、JWT トークンを発行します。このトークンは、NestJS バックエンドアプリケーションに対して行われたリクエストの Authorization ヘッダー内のベアラートークンとして送信されます。

事務員戦略の作成

NestJS では、認証戦略を実装するために Passport が推奨される方法です。 Clerk クライアントでトークンを検証するカスタム Clerk 戦略を作成します。

# .env

CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

ログイン後にコピー

validate() メソッドは、NestJS が request.user に自動的に添付するユーザーデータを返します。

認証モジュールの作成

Clerk 戦略を提供し、PassportModule と統合する AuthModule を作成します。次に、AppModule に AuthModule を登録します。

// src/app.module.ts

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

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

ログイン後にコピー

// 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],
};

ログイン後にコピー

ルート保護の実装

保護されたルートは、ユーザーがアクセスする前に認証を必要とするルートです。

クラーク認証ガードの作成

ガードは、特定の実行時条件に基づいて、特定のリクエストをルートハンドラーで処理する必要があるかどうかを決定します。

アプリケーション内のすべてのルートをデフォルトで保護したい場合は、次の手順を実行する必要があります:

パブリックデコレータを作成して、認証なしでアクセスできるルートをマークします。
ClerkAuthGuard を実装して、保護されたルートへのアクセスを制限し、認証されたユーザーのみが続行できるようにします。

// 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 {}

ログイン後にコピー

// 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');
    }
  }
}

ログイン後にコピー

認証をグローバルに有効にする

ほとんどのエンドポイントはデフォルトで保護されるため、認証ガードをグローバルガードとして構成できます。

// 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 {}

ログイン後にコピー

保護されたルートとパブリックルートの定義

これらの 2 つのコントローラーでは、AppController で Public デコレーターが使用され、ルートをパブリックとして指定します。対照的に、認証ガードはデフォルトでグローバルに適用されるため、ルートを保護されたものとして指定するために AuthController でデコレータは必要ありません。

// 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 {}

ログイン後にコピー

// src/decorators/public.decorator.ts

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

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

ログイン後にコピー

注: AppController を AppModule に登録し、AuthController を AuthModule に登録することを忘れないでください。