React Native (Expo) + Supabase で Sign in with Apple を実装する手順ガイド (EAS Build 対応)

この記事では、Expo Application Services (EAS) を利用して開発・ビルドされる React Native (Expo) アプリケーションに、バックエンドサービスとして Supabase を利用して「Sign in with Apple」認証機能を実装する手順を解説します。

概要

EAS を利用する場合でも、基本的な実装の流れは同じですが、ネイティブ機能の有効化に関する部分が EAS Build の設定ファイル (app.json または app.config.js) を通じて行われる点が異なります。

実装は大きく以下のステップに分かれます。

Apple Developer での各種設定: Apple Developer アカウントで必要な ID やキーを作成・設定します。（変更なし）
Client Secret の生成: Apple からダウンロードした秘密鍵を使って、Supabase で必要となる Client Secret を生成します。（変更なし）
Supabase での設定: Supabase の管理画面で Apple 認証プロバイダーを有効化し、必要な情報を設定します。（変更なし）
Expo Config (app.json/app.config.js) での設定: アプリケーションの設定ファイルに必要な Capability を追加します。
React Native (Expo) での実装: Expo プロジェクトに必要なライブラリを導入し、Apple サインインのロジックを実装します。
EAS Build での開発ビルド作成: ネイティブ機能を含む開発ビルドを作成して、実機でテストします。

前提条件

Apple Developer アカウント（有料）が必要です。
Supabase アカウントとプロジェクトが作成されていること。
Node.js と npm (または yarn, pnpm等) がインストールされていること。
Expo CLI がインストールされていること。
EAS CLI (eas-cli) がインストールされていること (npm install -g eas-cli)。
Expo プロジェクトがセットアップされており、EAS 用に設定されていること (eas login, eas project:init など)。

ステップ1: Apple Developer での各種設定

このステップは EAS を使用しない場合と同じです。

App ID の作成・設定:
- Apple Developer にログインし、「Certificates, Identifiers & Profiles」へ。
- App ID を新規作成または選択し、「Capabilities」で「Sign in with Apple」を有効化。
Services ID の作成:
- 「Identifiers」で「Services IDs」を新規作成。
- Identifier (例: com.yourdomain.yourapp.signin) を設定（これが Client ID）。
- 「Sign in with Apple」を有効化し、「Configure」で Primary App ID や Return URL (https://<YOUR_SUPABASE_REFERENCE_ID>.supabase.co/auth/v1/callback など) を設定。
Key ID の作成:
- 「Keys」で新しいキーを作成。
- 「Sign in with Apple」を有効化し、「Configure」で Primary App ID を選択。
- キーを作成し、Key ID を控え、.p8 ファイルをダウンロードして安全に保管。

ステップ2: Client Secret の生成

このステップも EAS を使用しない場合と同じです。ステップ1で得た情報と .p8 ファイルを使って JWT (Client Secret) を生成します。

準備: プロジェクト内に安全なディレクトリ（例: credentials、.gitignore 対象）を作成し、.p8 ファイルを配置。
スクリプトの実装 (generate_apple_secret.js): 以下のコードを参照。keyFile, teamId, clientId, keyId を自分の情報に書き換えます。
依存ライブラリのインストール: npm install jsonwebtoken または yarn add jsonwebtoken。
設定値の確認: スクリプト内のプレースホルダーが正しいか確認。

スクリプトの実行: node generate_apple_secret.js を実行し、出力された Client Secret をコピーして安全に保管。（注意: 有効期限は最大180日です）

const fs = require("node:fs");
const jwt = require("jsonwebtoken");
const path = require("node:path");

// 設定
const keyFile = path.join(__dirname, "xxxxx.p8"); // 秘密鍵への絶対パス
const teamId = "teamId"; // あなたのApple Developer Team ID
const clientId = "serviceId"; // 作成したサービスのID
const keyId = "keyId"; // 秘密鍵のKey ID

// 有効期間 (日数)
const validityPeriod = 180; // Appleドキュメントによると最大180日(6ヶ月)

try {
	// 秘密鍵の読み込み
	const privateKey = fs.readFileSync(keyFile, "utf8");

	// トークンの生成
	const token = jwt.sign(
		{
			iss: teamId,
			iat: Math.floor(Date.now() / 1000),
			exp: Math.floor(Date.now() / 1000) + 86400 * validityPeriod,
			aud: "https://appleid.apple.com",
			sub: clientId,
		},
		privateKey,
		{
			algorithm: "ES256",
			header: {
				kid: keyId,
			},
		},
	);

	console.log(token);
} catch (error) {
	console.error("エラーが発生しました:", error.message);
}

ステップ3: Supabase での設定

このステップも EAS を使用しない場合と同じです。

Supabase プロジェクトのダッシュボード > 「Authentication」 > 「Providers」へ。
「Apple」プロバイダーを有効化。
Client ID: ステップ1で設定した Services ID の Identifier を入力。
Client Secret: ステップ2で生成した Client Secret (JWT) を貼り付け。
設定を保存。

ステップ4: React Native (Expo) での実装

このステップも基本的に同じですが、EAS Development Build が必要であることを念頭に置きます。

必要なライブラリのインストール:

Bash

npx expo install expo-apple-authentication @supabase/supabase-js react-native-mmkv expo-dev-client

(expo-dev-client は開発ビルドに必須です)

Supabase クライアントの初期化:

前述のガイドと同様に lib/supabase.js などで Supabase クライアントを初期化します。

コードスニペット

// lib/supabase.js
import AsyncStorage from '@react-native-async-storage/async-storage';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_SUPABASE_URL';

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    storage: AsyncStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

サインインボタンとロジックの実装:

前述のガイドと同じ AppleSignInButton コンポーネントを使用します。expo-apple-authentication を使用して Apple から identityToken を取得し、それを Supabase の signInWithIdToken に渡します。

JavaScript

// AppleSignInButton.js (前述のガイドと同じコード)
import React from 'react';
import { Button, View, Alert, Platform } from 'react-native';
import * as AppleAuthentication from 'expo-apple-authentication';
import { supabase } from './lib/supabase'; // Supabase クライアントをインポート

export default function AppleSignInButton() {
  const handleAppleSignIn = async () => {
      // ... (前述のガイドと同じ) ...
  };

  if (Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 13) {
      return (
          <AppleAuthentication.AppleAuthenticationButton
              // ... (前述のガイドと同じ Props) ...
              onPress={handleAppleSignIn}
          />
      );
  }
}

ステップ5: Expo Config (`app.json`/`app.config.js`) での設定

EAS Build を使用する場合、ネイティブの Capabilities は Xcode を直接編集する代わりに、Expo の設定ファイルで指定します。

app.json の例:

JSON

{
  "expo": {
    "name": "YourAppName",
    "slug": "your-app-slug",
    // ... 他の設定 ...
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourdomain.yourapp",
    },
    "plugins": [
	    "expo-apple-authentication",
      // 他のプラグインがあれば記述
    ]
    // ... 他の設定 ...
  }
}

ios.bundleIdentifier は、Apple Developer Portal で設定した App ID の Bundle ID と一致している必要があります。

ステップ6: EAS Build での開発ビルド作成

expo-apple-authentication のようなネイティブモジュールを含むアプリを実機でテストするには、Expo Go ではなく、開発ビルド (Development Build) が必要です。EAS Build を使用してこれを作成します。

開発ビルド用プロファイルの確認/作成:

eas.json ファイルを確認し、development プロファイルが存在するか確認します。なければ作成します。基本的な設定は以下のようになります。