Zenn
🐥

【超簡単!】Next.jsにClerkのゲストログイン機能を5分で実装する

に公開
Next.js
React
TypeScript
Clerk
記事投稿コンテスト「TypeScriptでやってみた挑戦・学び・工夫」
tech

【超簡単!】Next.js + Clerkでゲストログイン機能を5分で実装する

はじめに

Next.jsのアプリで認証にClerkを使用している際、「ユーザー登録やログインの手間を省いてアプリを試してもらいたい」という場面があると思います。
実装方法について分かりやすい情報が見つからなかったので今回はClerkでゲストログインをとっても簡単に実装する方法を紹介します。
個人開発のアプリを友達にサクッと試してもらいたい。就職活動や転職活動でのポートフォリオにゲストログイン機能を実装したい。と悩んでいる方は是非本記事を読んでみてください。

この記事のゴール

Clerk認証を導入しているNext.jsのアプリケーションでゲストログイン機能の実装が出来るようになる。

前提条件

Clerkの基本的な導入方法や使い方についての説明は省きます。
本記事の目的は、Clerkを使ったゲストログインの実装の説明になります。

実装手順 (計3ステップ)

1. テストユーザーの作成

はじめに、Clerkのダッシュボードでゲスト用のテストユーザーを作成します。
アプリケーションは今回ゲストログイン機能を実装したいものを選択してください。
https://dashboard.clerk.com/apps
UserタブのCreate Userから作成できます。

今回は以下のユーザーを作成します。

  • Username: testuser
  • Password: TESTuser

2. ゲストログインコンポーネントの作成

次にゲストログイン時の処理やボタンを持つコンポーネントを作成します。
ここでは、clerkから提供されているuseSignInを使用することでゲストログインの処理を簡単に実装できます。
その際にsignIn.createのなかで手順1で作成したゲスト用のユーザーの情報を渡してください。

components/GuestLogin.tsx
"use client"
import { useSignIn } from '@clerk/nextjs'; // clerkから提供されているサインインの処理
import { useRouter } from 'next/navigation'; 
import { Button } from "@/components/ui/button"; // ボタンは今回shadcn/uiを使用

export default function GuestLogin() {
  const { signIn, setActive } = useSignIn();
  const router = useRouter();

  const handleGuestLogin = async () => {
    if (!signIn) return;

    try {
      const result = await signIn.create({
        identifier: 'testuser', //手順1で登録したユーザーのデータ
        password: 'TESTuser' //手順1で登録したユーザーのデータ
      });

      if (result.status === 'complete') {
        await setActive({ session: result.createdSessionId });
        router.push('/');// サインイン後にリダイレクトを行う
      }
    } catch (error) {
      console.error('ゲストログインに失敗しました:', error);
    }
  };

  return (
    <Button 
      onClick={handleGuestLogin} 
      className="bg-green-500 hover:bg-green-600 cursor-pointer rounded-full text-white">
      ゲストログイン
    </Button>    
  );
}

3. サインインページでの使用

あとはステップ2で作成したGuestLoginコンポーネントを表示したい箇所に含めればOKです。
今回はヘッダーに追加していきます。
ここでもclerkから提供されているSignedIn,SignedOut,UserButtonを使用するととても簡単です。
以下のコードのように実装することでサインイン時にはサインインしているUserのアイコン、サインインをしていない状態ではゲストログインボタンが表示されます。

app/conmonents/Header.tsx
import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
import GuestLogin from "../../app/(Auth)/GuestLogin";

export default function Header() {
  return (
     <div className="w-full flex items-center justify-end gap-4 mr-4">
          <SignedIn>
            <UserButton />
          </SignedIn>
          <SignedOut>
            <GuestLogin />
         </SignedOut>
     </div>
  );
}

左はサインインしていない状態。右はサインインしている状態

実装のポイント

シンプルさを重視

この実装の最大の特徴は、既存のClerkの仕組みをそのまま活用している点です。独自のセッション管理や複雑な状態管理は一切不要で、ClerkのuseSignInフックを使って通常のログインと同じ流れでゲストログインを実現しています。

セキュリティ考慮

本番環境では、テストユーザーの認証情報を環境変数で管理することを推奨します：

const result = await signIn.create({
  identifier: process.env.NEXT_PUBLIC_GUEST_EMAIL,
  password: process.env.NEXT_PUBLIC_GUEST_PASSWORD
});

メリット

  1. 実装が簡単: 既存のClerkの仕組みを活用するため、追加の複雑な実装が不要
  2. メンテナンスが楽: 独自のセッション管理などが不要
  3. 一貫した体験: 通常ログインとゲストログインで同じ認証フローを使用
  4. 即座に利用可能: アカウント登録を促すより先に、アプリの価値を体験してもらえる

注意点

  • 複数ユーザーが同じゲストアカウントを共有する形になる
  • 本格的な運用では、適切なゲストデータの管理が必要

まとめ

ClerkとNext.jsを使ったゲストログイン機能を、最小限のコードで実装する方法を紹介しました。この実装により、ユーザーは面倒な登録手続きをせずにアプリを体験でき、価値を感じた時点で正式なアカウント登録に進んでもらうことができます。
また、就職活動や転職活動でのポートフォリオとして掲載する際にもユーザー登録やテストユーザーを使用してもらう必要がなくなるため、採用する側の確認の手間も削減できると思います。

個人的にゲストログインは複雑な実装が必要になるかと思ったのですが、とっても簡単に実装ができたのでみなさんもぜひ活用してみてください。

Discussion