Clerk使ってみたのでメモ

URL

https://clerk.dev/

React, Next.js, Gatsbyなどに簡単にログイン機能が追加できる。

• eメール＆パスワード
  • 確認メール、確認コード送付
  • ユーザー名でのログイン
  • 特定ドメインや特定の電話番号のみ許可
• SMS
• MFA
• JWT
• SNSログイン(OAuth)
  • Google
  • Twitter
  • GitHub
  • Facebook
  • Microsoft
  • LinkedIn
  • Apple
  • Discord
  • TikTok
  • Notion

などなど。複数指定可

Hasura, Google Analytics, Firebaseなどと連携も可能

https://docs.clerk.dev/popular-guides/popular-guides-sign-out

SNSログインのサンプルページ

配色やフォントなどはサイトに合わせてカスタマイズ可能

# pages/hoge.tsx

import { SignIn } from '@clerk/nextjs'

<SignIn redirectUrl='/top'/>

これだけでログインページが作成できる。
redirectUrlオプションを追加することで、ログイン後のリダイレクト先を指定できる。

料金

500アクティブユーザー/月までは無料
プラン変更で、$10/月 + $0.02/MAU　のビジネスプランや、企業向けプランもあり

統計情報

ログインしたユーザーの統計情報を見ることが可能

セッション

分単位でのセッションの有効期限の設定が可能。

メタデータの保存

フロントエンドから読み書きできるunsafeMetadataプロパティに自由に書き込みできる。

https://docs.clerk.dev/reference/clerkjs/user#attributes
https://docs.clerk.dev/main-concepts/user-object#custom-user-metadata

その他

デフォルトのダッシュボードは開発用になっているので、本番利用の際には本番用に切り替える。
その際にAPIキーやAPIのエンドポイントも切り替わる。

所感

今回は主にSNS認証を試してみたが、記述行数が非常に少なく使用もシンプルなので簡単に実装ができた。

ユーザーのデータをClerkのDB上に保存できるので、ユーザーテーブルを作成する必要がなくなり、ログイン機能だけでいい場合はDBの管理も不要になりそう。
その反面、ユーザーの情報を課金情報やいいねなどと結びつけるのが難しいので、そういった用途では認証からDBまで揃っているSupabase(https://supabase.com/)などの方が使いやすいかもしれない。