RemixでClerk認証実装時のエラー解決方法

この記事では、RemixプロジェクトでClerk認証を実装する際に発生する「clerkStateを渡していない」エラーの解決方法を紹介しています。rootAuthLoaderの使用、ClerkAppでのラッピング、環境変数の設定など、適切なSSR設定を行うことで問題を解決できます。

今回はRemixプロジェクトでClerk認証を実装する際に遭遇したエラーと解決方法について簡単に紹介します。

発生するエラー

RemixプロジェクトにClerkを統合しようとした際、以下のようなエラーメッセージに遭遇したことはありませんか？

Error: 🔒 Clerk: Looks like you didn't pass 'clerkState' to "<ClerkProvider clerkState={...}>".
Use 'rootAuthLoader' as your root loader. Then, simply wrap the App component with ClerkApp and make it the default export.
Example:
import { ClerkApp } from '@clerk/remix';
import { rootAuthLoader } from '@clerk/remix/ssr.server';
export const loader: LoaderFunction = args => rootAuthLoader(args)
function App() {
  return (
    <html lang='en'>
      ...
    </html>
  );
}
export default ClerkApp(App, { publishableKey: '...' });
For more info, check out the docs: https://clerk.com/docs,
or come say hi in our discord server: https://clerk.com/discord

このエラーは、Clerk認証をRemixアプリケーションに正しく統合できていないことを示しています。具体的には、SSRの設定が正しく行われていないことが原因です。

解決方法

エラーメッセージにも示されているように、以下の手順でこの問題を解決できます。

1. root.tsx ファイルの修正

アプリケーションのルートコンポーネント（通常は root.tsx または root.jsx）を以下のように修正します：

// root.tsx
import { ClerkApp } from '@clerk/remix';
import { rootAuthLoader } from '@clerk/remix/ssr.server';
import type { LoaderFunction } from '@remix-run/node';

// rootAuthLoader を使用してローダー関数を定義
export const loader: LoaderFunction = (args) => rootAuthLoader(args);

function App() {
  return (
    <html lang="ja">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

// ClerkAppでラップしてexport
export default ClerkApp(App, { 
  publishableKey: process.env.CLERK_PUBLISHABLE_KEY 
});

2. 環境変数の設定

.env ファイルに必要なClerkの環境変数を設定します：

CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxxxxxxxxxxxxx
CLERK_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxx

3. ClerkProviderの設定確認

もし別途 ClerkProvider を使用している場合は、clerkState プロップを渡しているか確認してください。Remixの場合は上記のような ClerkApp を使用するのが基本的なアプローチです。

動作確認

上記の修正を行った後、アプリケーションを起動して認証フローが正常に動作するか確認します：

npm run dev

ブラウザでアプリケーションにアクセスし、Clerkの認証フローが正常に動作することを確認してください。

まとめ

Remixでのクライアント認証はサーバーサイドレンダリングとの連携が重要です。Clerkを使用する場合、以下のポイントに注意しましょう：

rootAuthLoader を使ってSSRの設定を正しく行う

ClerkApp でルートコンポーネントをラップする

環境変数を正しく設定する

これらの手順に従うことで、「clerkState を渡していない」というエラーは解消され、Remix アプリケーションで Clerk 認証を適切に利用できるようになります。

より詳細な実装や高度な使用方法については、Clerk公式ドキュメントを参照してください。

何か質問があれば、コメント欄でお気軽にどうぞ！