Supabaseへの直接アクセス・API Route経由をちゃんと理解しておきたい

「ユーザーがWebアプリにログイン → Googleアカウント情報をSupabaseのデータベースに保存する」という処理は、クライアントからSupabaseへ直接アクセスする一例。

---

直接アクセスの流れ

1. ユーザーがブラウザでGoogleログインする

2. ログイン成功後、ブラウザ（クライアント）側のJavaScriptからsupabase.from('users').insert(...)を実行

3. Supabaseのデータベースに直接データが保存される

→ つまり、ブラウザからSupabaseに直接アクセスする方法。

---

API Route経由の流れ

1. ユーザーがブラウザでGoogleログインする

2. ログイン成功後、ブラウザ（クライアント）側のJavaScriptからfetch('/api/users', { method: 'POST', ... })を実行

3. Next.jsのAPI Route（サーバー側）でSupabaseにデータを保存

→ つまり、ブラウザ→Next.jsのAPI Route→Supabaseという流れ。

---

どちらが良い？

• 直接アクセス: 簡単、コードが少ない（クライアントから直接アクセスする場合、SupabaseのAPIキーは環境変数にしてもブラウザに露出するため、完全には隠せない）

• API Route経由: セキュリティが良い（APIキーはサーバー側で隠せる）

---

結論

「ユーザーがWebアプリにログイン→Googleアカウント情報をSupabaseのデータベースに入れる」は、直接アクセスの一例。

ただし、セキュリティを重視するなら、API Route経由の方がおすすめかも。