Rork でユーザー認証を実装する — Firebase・Supabase 連携ガイド

Rork アプリに認証機能を追加しよう

ユーザー認証はほぼすべてのアプリに欠かせない機能です。Rork で生成したアプリは React Native / Expo ベースのため、Firebase Authentication や Supabase Auth などの実績ある認証サービスをスムーズに組み込めます。

Rork アプリに認証機能を追加する 2 通りの方法を順を追って整理していきます。

Firebase Authentication — Google エコシステムとの親和性が高く、ソーシャルログインに強い
Supabase Auth — オープンソースで PostgreSQL と直結、シンプルな API が魅力

認証フローの全体像

┌─────────────────────────────────────────────┐
│  App（Rork 生成コード）                        │
│  ┌──────────┐   ┌──────────┐   ┌──────────┐ │
│  │ LoginScreen│→│ AuthHook │→│HomeScreen│ │
│  └──────────┘   └──────────┘   └──────────┘ │
│                       ↕                      │
│              Firebase / Supabase             │
└─────────────────────────────────────────────┘

Rork が生成する Expo Router ベースのプロジェクトでは、認証状態をカスタムフックで管理し、未ログインユーザーをログイン画面にリダイレクトするパターンが一般的です。

Firebase Authentication を使う

1. Firebase プロジェクトのセットアップ

Firebase Console でプロジェクトを作成し、「Authentication」→「ログイン方法」でメール/パスワードを有効にします。次に google-services.json（Android）と GoogleService-Info.plist（iOS）をダウンロードしておきます。

2. Rork のプロンプト例

メール・パスワード認証を追加して。
- ログイン画面とサインアップ画面を作成
- Firebase Authentication を使用
- 認証済みユーザーだけがホーム画面に入れるようにする
- ログアウトボタンをプロフィール画面に追加

Rork はこのプロンプトから必要なコードを自動生成します。生成後に Firebase の設定値だけ差し替えれば動作します。

3. Firebase 設定の追加

Rork が生成したプロジェクトに firebase.config.js を追加します。

// firebase.config.js
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
 
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
};
 
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

4. 認証フック

// hooks/useAuth.js
import { useState, useEffect } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import { auth } from '../firebase.config';
 
export function useAuth() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      setLoading(false);
    });
    return () => unsubscribe();
  }, []);
 
  return { user, loading };
}

5. ログイン画面の実装例

// app/login.jsx
import { useState } from 'react';
import { View, TextInput, Button, Text, StyleSheet } from 'react-native';
import { signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from '../firebase.config';
import { router } from 'expo-router';
 
export default function LoginScreen() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
 
  const handleLogin = async () => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
      router.replace('/home');
    } catch (e) {
      setError('メールアドレスまたはパスワードが間違っています');
    }
  };
 
  return (
    <View style={styles.container}>
      <TextInput
        placeholder="メールアドレス"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
        style={styles.input}
      />
      <TextInput
        placeholder="パスワード"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={styles.input}
      />
      {error ? <Text style={styles.error}>{error}</Text> : null}
      <Button title="ログイン" onPress={handleLogin} />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 20 },
  input: {
    borderWidth: 1, borderColor: '#ccc',
    borderRadius: 8, padding: 12, marginBottom: 12,
  },
  error: { color: 'red', marginBottom: 8 },
});

Supabase Auth を使う

Firebase の代わりに Supabase を使う場合は、よりシンプルな構成で認証が実装できます。

1. Supabase プロジェクトのセットアップ

Supabase Dashboard でプロジェクトを作成し、「Authentication」→「Providers」でメール認証を有効にします。Project URL と anon key を控えておきます。

2. Rork プロンプト例

Supabase を使ったメール認証を実装して。
- サインアップ時にメール確認を送信
- ログイン・ログアウト機能
- 認証状態に応じて画面を切り替える

3. Supabase クライアントの設定

// lib/supabase.js
import { createClient } from '@supabase/supabase-js';
import AsyncStorage from '@react-native-async-storage/async-storage';
 
export const supabase = createClient(
  'https://YOUR_PROJECT.supabase.co',
  'YOUR_ANON_KEY',
  {
    auth: {
      storage: AsyncStorage,
      autoRefreshToken: true,
      persistSession: true,
      detectSessionInUrl: false,
    },
  }
);

ポイント: React Native では AsyncStorage をセッション保存先に指定することで、アプリ再起動後もログイン状態が維持されます。

4. 認証フック（Supabase版）

// hooks/useAuth.js
import { useState, useEffect } from 'react';
import { supabase } from '../lib/supabase';
 
export function useAuth() {
  const [session, setSession] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
      setLoading(false);
    });
 
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => setSession(session)
    );
 
    return () => subscription.unsubscribe();
  }, []);
 
  return { session, user: session?.user, loading };
}

5. ログイン処理

// サインアップ
const { error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'securepassword',
});
 
// ログイン
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'securepassword',
});
 
// ログアウト
await supabase.auth.signOut();

認証ガード：未ログインユーザーをリダイレクト

Expo Router を使っている場合、_layout.jsx でルートガードを実装できます。

// app/_layout.jsx
import { useEffect } from 'react';
import { Slot, router, useSegments } from 'expo-router';
import { useAuth } from '../hooks/useAuth';
 
export default function RootLayout() {
  const { user, loading } = useAuth();
  const segments = useSegments();
 
  useEffect(() => {
    if (loading) return;
 
    const inAuthGroup = segments[0] === '(auth)';
 
    if (!user && !inAuthGroup) {
      // 未ログインなのに保護ページにいる → ログイン画面へ
      router.replace('/(auth)/login');
    } else if (user && inAuthGroup) {
      // ログイン済みなのに認証画面にいる → ホームへ
      router.replace('/home');
    }
  }, [user, loading, segments]);
 
  return <Slot />;
}

Firebase vs Supabase — どちらを選ぶ？

比較項目	Firebase Auth	Supabase Auth
無料枠	月 10,000 MAU	月 50,000 MAU
ソーシャルログイン	◎（Google, Apple, Twitter など）	○（主要プロバイダー対応）
データベース連携	Firestore（NoSQL）	PostgreSQL（SQL）
オープンソース	✗（Google独自）	✓
学習コスト	中	低
Rork との相性	◎	◎

個人開発や MVP 段階では Supabase の無料枠が広く扱いやすいのでおすすめです。Google / Apple ログインを重視するなら Firebase が安定しています。

Tips：ソーシャルログインを追加する

Rork のプロンプトで一言追加するだけでソーシャルログインも実装できます。

Google ログインと Apple ログインのボタンも追加して。
expo-auth-session を使って実装してください。

Apple ログインは App Store に公開する際、ソーシャルログインを提供するアプリには実装が必須です。忘れずに対応しておきましょう。

全体を振り返って

Rork は React Native / Expo ベースのため、Firebase・Supabase のどちらとも親和性が高い
認証フローは「カスタムフック」→「ルートガード」のパターンで一元管理するとシンプル
Firebase は Google エコシステム重視、Supabase はオープンソース・SQL 重視と使い分けを
onAuthStateChanged / onAuthStateChange を使って認証状態をリアルタイムで監視することがポイント

認証機能を追加することで、ユーザーごとのデータ管理やパーソナライズ機能が実現でき、アプリのクオリティが大きく向上します。ぜひ試してみてください。