⛳

認証サービス「Clerk」を触ってみる

2022/03/27に公開

はじめに

Next.jsで利用する認証ライブラリといえば NextAuth.js だと思いますが、最近良い感じに認証画面を作成できるサービスの「Clerk」が気になっていたので軽く触っていきたいなと思います。
https://clerk.dev/

Clerk はClerk社が提供している認証サービスで、簡単なGUI操作だけで認証機構を迅速に立ち上げることができます。GitHubやVercelとの連携もされており、リポジトリの作成やデプロイもClerkの画面から行うことができます(これ紹介動画でデモしていたんですが、自分がやったときはこの機能を見つけることができませんでした。どっかにあるはずw)。

独自のUIで認証画面を作り込むことを可能で、デモもいくつかありました。

Clerk Acme - https://nextjs.acme.clerk.app/
Clerk Oasis - https://nextjs.oasis.clerk.app/
Clerk Widget - https://nextjs.widget.clerk.app/
Clerk Simple - https://nextjs.simple.clerk.app/

それでは実際に使ってみたいと思います。

アプリケーションを作成する

Clerkを利用する際はSigh upが必要となります。Sigh upが完了すると、アプリケーションを新規作成するページを確認できるかと思います。このページでは、アプリケーションの名前、認証戦略、どのソーシャルログインプロバイダーを利用するか、選ぶことができます。ソーシャルログインプロバイダーの種類もかなり沢山あり、ここまで簡単に組み込めるサービスは初めてだったので感動しました。

設定を選択しアプリケーションを作成したら、以下の画面を簡単に立ち上げることができました。このページで実際にログインしてみると、アプリケーションのダッシュボードから、どのユーザーがいつログインしたのかを確認することができます。

左のナビゲーションの[Users]のところで確認できます。これめちゃくちゃ便利じゃないですか？

Next.jsでの組み込み

セットアップ

今回は Next.js で作っていきたいと思います。

$ npx create-next-app@latest --typescript
$ yarn add @clerk/nextjs

環境変数

.env にAPI Keyを設定します。

.env.local

NEXT_PUBLIC_CLERK_FRONTEND_API=xxxxxxxx
CLERK_API_KEY=xxxxxxxx
CLERK_JWT_KEY=xxxxxxxx

インストール

_app.tsx

import type { AppProps } from 'next/app';
import { ClerkProvider } from '@clerk/nextjs';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps} >
      <Component {...pageProps} />
    </ClerkProvider>
  )
}

export default MyApp;

これで組み込み自体は完了です。あとは、実際にサイン済みユーザー用のページなどを作成していく形になります。

最後に

Clerk はライブラリではなく、あくまでサービスなのでプライシングが存在します。500MAUまでは無料みたいなので個人開発レベルで利用する分には全然問題ないかなと思います。が、スケールアウトしてくるとライブラリの NextAuth.js という選択が無難なのかなという印象でしょうか。

個人的には、デザインもスッキリしていて機能も豊富だしめちゃくちゃ良いじゃないのと思ったのでこれからも細々使っていこうかなと思います。

GitHubで編集を提案