Rork × Better Auth で Web/モバイル統合認証を実装する — Cookie・Deep Link・パスキーまで

// packages/auth/server.ts
// 目的: Web/モバイル両方から呼ばれる Better Auth の本体。
// 動作環境: Cloudflare Workers + D1 or Neon Postgres
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { passkey } from "better-auth/plugins/passkey";
import { magicLink } from "better-auth/plugins/magic-link";
import { organization } from "better-auth/plugins/organization";
import { expo } from "@better-auth/expo";
import { db } from "@my-app/db";
 
export const auth = betterAuth({
  database: drizzleAdapter(db, { provider: "pg" }),
  baseURL: process.env.BETTER_AUTH_URL!, // 例: https://api.myapp.com
  secret: process.env.BETTER_AUTH_SECRET!, // 32 文字以上のランダム文字列
  trustedOrigins: [
    "https://myapp.com",
    "https://admin.myapp.com",
    // モバイルアプリのスキーム — Expo の app.json で設定したもの
    "myapp://",
    "exp://192.168.1.10:8081", // 開発時の Expo Go
  ],
  emailAndPassword: { enabled: true, requireEmailVerification: true },
  socialProviders: {
    apple: {
      clientId: process.env.APPLE_CLIENT_ID!,
      clientSecret: process.env.APPLE_CLIENT_SECRET!,
    },
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    },
  },
  plugins: [
    expo(), // ⚠️ React Native の Bearer トークン処理を有効にする
    passkey({ rpName: "MyApp", rpID: "myapp.com" }),
    magicLink({
      sendMagicLink: async ({ email, url }) => {
        // Resend や AWS SES でメール送信。後述。
        await sendEmail(email, "Sign in to MyApp", url);
      },
    }),
    organization({ allowUserToCreateOrganization: true }),
  ],
});
 
async function sendEmail(to: string, subject: string, url: string) {
  // 実装例は別記事 Rork × Resend メール送信統合ガイド 参照
  throw new Error("Implement sendEmail with Resend or SES");
}

// workers/api/src/index.ts
import { Hono } from "hono";
import { cors } from "hono/cors";
import { auth } from "@my-app/auth/server";
 
const app = new Hono();
 
app.use(
  "/api/auth/*",
  cors({
    origin: (origin) => origin, // trustedOrigins と一致するオリジンを返す
    credentials: true,
    allowMethods: ["GET", "POST", "OPTIONS"],
  })
);
 
app.all("/api/auth/*", (c) => auth.handler(c.req.raw));
 
export default app;

{
  "expo": {
    "scheme": "myapp",
    "ios": {
      "bundleIdentifier": "com.example.myapp",
      "associatedDomains": ["applinks:myapp.com"]
    },
    "android": {
      "package": "com.example.myapp",
      "intentFilters": [
        {
          "action": "VIEW",
          "data": [{ "scheme": "https", "host": "myapp.com", "pathPrefix": "/auth" }],
          "category": ["BROWSABLE", "DEFAULT"],
          "autoVerify": true
        }
      ]
    }
  }
}

// workers/api/src/well-known.ts
app.get("/.well-known/apple-app-site-association", (c) => {
  return c.json({
    applinks: {
      apps: [],
      details: [
        {
          appID: "TEAMID.com.example.myapp",
          paths: ["/auth/*"],
        },
      ],
    },
  });
});

// apps/mobile/app/auth/callback.tsx
// 目的: メールリンクや Apple Sign In のコールバックを受け取り、
//       Better Auth クライアントでセッションを完成させる。
import { useEffect } from "react";
import { router, useLocalSearchParams } from "expo-router";
import { ActivityIndicator, View, Text } from "react-native";
import { authClient } from "@/lib/auth-client";
 
export default function AuthCallbackScreen() {
  const params = useLocalSearchParams<{ token?: string; error?: string }>();
 
  useEffect(() => {
    (async () => {
      if (params.error) {
        router.replace({ pathname: "/sign-in", params: { error: params.error } });
        return;
      }
      if (!params.token) {
        router.replace("/sign-in");
        return;
      }
      // Better Auth のマジックリンク確認エンドポイントを呼ぶ。
      // expo() プラグインが Bearer トークンを SecureStore に保存してくれる。
      const result = await authClient.magicLink.verify({
        query: { token: params.token },
      });
      if (result.error) {
        router.replace({ pathname: "/sign-in", params: { error: result.error.message } });
        return;
      }
      router.replace("/(tabs)/home");
    })();
  }, [params.token, params.error]);
 
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <ActivityIndicator />
      <Text style={{ marginTop: 12 }}>サインインを完了しています…</Text>
    </View>
  );
}

// apps/mobile/lib/auth-client.ts
import { createAuthClient } from "better-auth/react";
import { expoClient } from "@better-auth/expo/client";
import * as SecureStore from "expo-secure-store";
 
export const authClient = createAuthClient({
  baseURL: process.env.EXPO_PUBLIC_BETTER_AUTH_URL!, // https://api.myapp.com
  plugins: [
    expoClient({
      scheme: "myapp",
      storagePrefix: "myapp",
      storage: SecureStore, // ⚠️ AsyncStorage ではなく SecureStore を使う
    }),
  ],
});

// apps/mobile/components/AppleSignInButton.tsx
import * as AppleAuthentication from "expo-apple-authentication";
import { authClient } from "@/lib/auth-client";
import { router } from "expo-router";
 
export function AppleSignInButton() {
  const handlePress = async () => {
    try {
      const credential = await AppleAuthentication.signInAsync({
        requestedScopes: [
          AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
          AppleAuthentication.AppleAuthenticationScope.EMAIL,
        ],
      });
      // identityToken を Better Auth サーバーに送って検証してもらう
      const result = await authClient.signIn.social({
        provider: "apple",
        idToken: { token: credential.identityToken!, nonce: credential.nonce },
      });
      if (result.error) throw new Error(result.error.message);
      router.replace("/(tabs)/home");
    } catch (e: any) {
      if (e.code === "ERR_REQUEST_CANCELED") return; // ユーザーキャンセル
      console.error(e);
    }
  };
 
  return (
    <AppleAuthentication.AppleAuthenticationButton
      buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
      buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
      cornerRadius={12}
      style={{ width: "100%", height: 48 }}
      onPress={handlePress}
    />
  );
}

// apps/mobile/components/PasskeyEnrollButton.tsx
import { Pressable, Text, Alert } from "react-native";
import { authClient } from "@/lib/auth-client";
 
export function PasskeyEnrollButton() {
  const handlePress = async () => {
    try {
      const { data, error } = await authClient.passkey.addPasskey();
      if (error) throw new Error(error.message);
      Alert.alert("成功", "パスキーを登録しました。次回からは Face ID でログインできます。");
    } catch (e: any) {
      Alert.alert("エラー", e.message);
    }
  };
 
  return (
    <Pressable onPress={handlePress} style={{ padding: 16, backgroundColor: "#000", borderRadius: 12 }}>
      <Text style={{ color: "#fff", textAlign: "center" }}>このデバイスでパスキーを設定</Text>
    </Pressable>
  );
}

{
  "webcredentials": { "apps": ["TEAMID.com.example.myapp"] },
  "applinks": { "details": [/* ... */] }
}

// apps/mobile/screens/CreateOrganization.tsx で呼び出す
const result = await authClient.organization.create({
  name: "Hirokawa Family",
  slug: "hirokawa-family",
});
// result.data.organization が作られた組織
 
// メンバー招待
await authClient.organization.inviteMember({
  organizationId: result.data.organization.id,
  email: "wife@example.com",
  role: "admin",
});
 
// アクティブ組織の切り替え（モバイルでもアプリ起動時に呼ぶ）
await authClient.organization.setActive({ organizationId: orgId });

app.use("/api/photos/*", async (c, next) => {
  const session = await auth.api.getSession({ headers: c.req.raw.headers });
  if (!session?.session.activeOrganizationId) {
    return c.json({ error: "No active organization" }, 403);
  }
  c.set("orgId", session.session.activeOrganizationId);
  await next();
});
 
app.get("/api/photos", async (c) => {
  const orgId = c.get("orgId");
  const photos = await db.select().from(photosTable).where(eq(photosTable.orgId, orgId));
  return c.json(photos);
});

// apps/mobile/app/(tabs)/profile.tsx
import { authClient } from "@/lib/auth-client";
 
export default function ProfileScreen() {
  const { data: session, isPending } = authClient.useSession();
  if (isPending) return <ActivityIndicator />;
  if (!session) return <Redirect href="/sign-in" />;
  return (
    <View>
      <Text>{session.user.name}</Text>
      <Text>Active Org: {session.session.activeOrganizationId ?? "なし"}</Text>
    </View>
  );
}

// apps/web/app/profile/page.tsx (Next.js Server Component)
import { auth } from "@my-app/auth/server";
import { headers } from "next/headers";
 
export default async function ProfilePage() {
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session) redirect("/sign-in");
  return <main>{session.user.name}</main>;
}

betterAuth({
  rateLimit: {
    enabled: true,
    storage: "secondary-storage",
    customStorage: {
      get: async (key) => env.AUTH_KV.get(key),
      set: async (key, value, ttl) => env.AUTH_KV.put(key, value, { expirationTtl: ttl }),
      delete: async (key) => env.AUTH_KV.delete(key),
    },
  },
});

betterAuth({
  // ...
  hooks: {
    after: [
      {
        matcher: (ctx) => ctx.path.startsWith("/sign-in"),
        handler: async (ctx) => {
          await db.insert(auditLog).values({
            userId: ctx.context.session?.userId,
            action: "sign-in",
            ip: ctx.request.headers.get("cf-connecting-ip") ?? "",
            createdAt: new Date(),
          });
        },
      },
    ],
  },
});