clerk-auth-expert

Clerk 認証エキスパート

React Native および Expo アプリケーション向けの Clerk エコシステムに関する深い知識を持つ、Clerk 認証のエキスパートです。このスキルを使うと、N8ture AI App 向けに安全で本番環境に対応した認証フローを実装できます。

主な役割

• Clerk SDK の実装 - 適切な設定で @clerk/clerk-expo をセットアップします
• 認証フロー - サインイン、サインアップ、パスワードリセット、ソーシャル認証を構築します
• セッション管理 - ユーザーセッション、トークンの更新、永続化を処理します
• 保護されたルート - ナビゲーション用の認証ガードを作成します
• ユーザー管理 - ユーザープロフィールとメタデータにアクセスし、更新します
• バックエンド連携 - Clerk JWT トークンを Firebase Cloud Functions に渡します

クイックスタート

インストール

npx expo install @clerk/clerk-expo expo-secure-store

基本設定

// App.js
import { ClerkProvider } from '@clerk/clerk-expo';
import * as SecureStore from 'expo-secure-store';

const tokenCache = {
  async getToken(key) {
    return SecureStore.getItemAsync(key);
  },
  async saveToken(key, value) {
    return SecureStore.setItemAsync(key, value);
  },
};

export default function App() {
  return (
    <ClerkProvider 
      publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}
      tokenCache={tokenCache}
    >
      <RootNavigator />
    </ClerkProvider>
  );
}

よくあるパターン

保護されたルート

import { useAuth } from '@clerk/clerk-expo';

export function useProtectedRoute() {
  const { isSignedIn, isLoaded } = useAuth();
  const navigation = useNavigation();

  useEffect(() => {
    if (isLoaded && !isSignedIn) {
      navigation.navigate('SignIn');
    }
  }, [isSignedIn, isLoaded]);

  return { isSignedIn, isLoaded };
}

ユーザープロフィールへのアクセス

import { useUser } from '@clerk/clerk-expo';

export function ProfileScreen() {
  const { user } = useUser();

  const updateProfile = async () => {
    await user.update({
      firstName: 'John',
      lastName: 'Doe',
    });
  };

  return (
    <View>
      <Text>Welcome, {user.firstName}!</Text>
      <Text>Email: {user.primaryEmailAddress.emailAddress}</Text>
    </View>
  );
}

バックエンドへのトークンの受け渡し

import { useAuth } from '@clerk/clerk-expo';

export function useAuthenticatedRequest() {
  const { getToken } = useAuth();

  const makeRequest = async (endpoint, data) => {
    const token = await getToken();
    
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    return response.json();
  };

  return { makeRequest };
}

N8ture AI App との連携

トライアル管理

Clerk ユーザーメタデータにユーザーのトライアル回数を保存します：

// Update trial count
await user.update({
  unsafeMetadata: {
    trialCount: 3,
    totalIdentifications: 0,
  },
});

// Check trial status
const trialCount = user.unsafeMetadata.trialCount || 0;
const canIdentify = user.publicMetadata.isPremium || trialCount > 0;

プレミアムサブスクリプションのステータス

// Store subscription status
await user.update({
  publicMetadata: {
    isPremium: true,
    subscriptionId: 'sub_xxx',
  },
});

ベストプラクティス

1. トークンキャッシュを使用する - SecureStore によるトークンのキャッシュを必ず実装します
2. 読み込み状態を処理する - 認証状態に依存する UI をレンダリングする前に isLoaded を確認します
3. メタデータを保護する - 機密性のないデータには publicMetadata を、機密データには privateMetadata を使用します
4. エラー処理 - 認証エラーに適切に対処するためのエラー処理を実装します
5. ソーシャル認証 - 実装前に Clerk Dashboard で OAuth プロバイダーを設定します

環境変数

# .env
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxx

よくある問題

問題：「Clerk が読み込まれていません」
解決策： 認証状態にアクセスする前に、必ず isLoaded を確認します

問題： トークンが永続化されない
解決策： SecureStore のトークンキャッシュが適切に設定されていることを確認します

問題： ソーシャル認証が機能しない
解決策： Clerk Dashboard と app.json で OAuth リダイレクト URL を設定します

リソース

• Clerk Expo ドキュメント
• Clerk React Native SDK
• 認証のベストプラクティス

認証を実装するとき、ユーザーセッションを管理するとき、または Clerk を N8ture AI App のバックエンドに連携するときに、このスキルを使用します。