Remix × Vercel × SupabaseでGoogleログインを実装する手順

Remix × Vercel × SupabaseでGoogleログインを実装する手順

RemixとSupabaseでGoogle認証を実装する際、特にリダイレクトURLの設定で躓くことが多いのではないでしょうか。この記事では、実際の開発で遭遇したエラーと解決方法を交えながら、確実に動作する設定手順を解説します。

全体の流れ

認証の仕組みを理解すると設定がスムーズになります。

この流れを踏まえて設定していきましょう。

1. Supabaseプロジェクトの準備

プロジェクト作成

Supabaseで新規プロジェクトを作成します。無料プランでは2つまでしかプロジェクトが作れないので、開発用と本番用を分けている場合は注意が必要です。

Google認証の有効化

1. Supabaseダッシュボードの「Authentication」→「Providers」
2. 「Google」を選択
3. 「Enable sign in with Google」をオンにする
4. Client IDとClient Secret欄は後で埋めます

2. Google Cloud Consoleの設定

プロジェクト作成

Google Cloud Consoleで新しいプロジェクトを作成します。

OAuth同意画面の設定

1. 「OAuth同意画面」で基本情報を入力
2. スコープは最低限のものを選択
3. テストユーザーを追加（本番公開前は必要）

OAuthクライアントIDの作成

1. 「認証情報」→「認証情報を作成」→「OAuthクライアントID」
2. アプリケーションの種類：「ウェブアプリケーション」
3. 重要：承認済みのリダイレクトURI

ここが一番間違いやすいポイントです。

https://[your-supabase-project-ref].supabase.co/auth/v1/callback

このURLはSupabaseのプロジェクト設定で確認できます。/auth/v1/callbackの部分は必須です。

アプリのURL（https://your-app.vercel.app/など）はここには入れません。

3. Supabaseの認証設定

作成したGoogle OAuthのClient IDとClient SecretをSupabaseに設定します。

Redirect URLsの設定

ここがもう一つの重要なポイントです。「Authentication」→「Settings」で以下を設定：

Site URL（デフォルトリダイレクト先）

https://your-app.vercel.app/

メインの本番環境URLを設定します。

Redirect URLs（許可するリダイレクト先一覧）

http://localhost:5173/
https://your-app.vercel.app/
https://your-app.com/

開発環境、本番環境、将来使う予定のドメインなど、認証後にリダイレクトさせたいURLをすべて登録します。

※ http://localhost:5173/ はRemixのVite開発サーバーのデフォルトURLです。もし異なるポートを使用している場合は、そのポートに変更してください。

ワイルドカード（https://*.your-app.com）も使えます。

4. Remixアプリの実装

環境変数の設定

SUPABASE_URL=https://your-project-ref.supabase.co
SUPABASE_ANON_KEY=your-anon-key

Supabaseクライアントの作成

// app/lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
)

ログイン実装

// app/routes/login.tsx
import { supabase } from '~/lib/supabase'

export default function Login() {
  const handleGoogleLogin = async () => {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: {
        redirectTo: `${window.location.origin}/dashboard`
      }
    })
    
    if (error) {
      console.error('Login error:', error)
    }
  }

  return (
    <button onClick={handleGoogleLogin}>
      Googleでログイン
    </button>
  )
}

セッション管理

// app/hooks/useAuth.ts
import { useEffect, useState } from 'react'
import { supabase } from '~/lib/supabase'
import type { Session } from '@supabase/supabase-js'

export function useAuth() {
  const [session, setSession] = useState<Session | null>(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)
        setLoading(false)
      }
    )

    return () => subscription.unsubscribe()
  }, [])

  return { session, loading }
}

5. Vercelでの本番運用

環境変数の設定

Vercelのダッシュボードで以下の環境変数を設定：

• SUPABASE_URL
• SUPABASE_ANON_KEY

ドメイン追加時の注意点

新しいドメインを追加する場合は、Supabaseの「Redirect URLs」に忘れずに追加してください。

よくあるエラーと対処法

"redirect_uri_mismatch"エラー

Google Cloud ConsoleのリダイレクトURIが正しく設定されていない可能性があります。Supabaseのコールバック用URLが正確に入力されているか確認してください。

"Invalid redirect URL"エラー

SupabaseのRedirect URLsに、認証後にリダイレクトしようとしているURLが登録されていません。

ローカル開発で認証が失敗する

http://localhost:5173/（RemixのVite開発サーバーのデフォルトURL）がSupabaseのRedirect URLsに追加されているか確認してください。異なるポートを使用している場合は、そのポートのURLを登録してください。

まとめ

認証設定で大切なのは、以下の2つのリダイレクト先を正しく理解することです：

1. GoogleからSupabaseへ：Google Cloud ConsoleのOAuth設定
2. Supabaseからアプリへ：SupabaseのRedirect URLs設定

最初は混乱しやすいですが、一度理解すれば応用が利きます。他の認証プロバイダー（GitHub、Discord等）でも基本的な考え方は同じです。

認証周りは細かい設定が多くて大変ですが、ユーザー体験の根幹部分なので丁寧に実装していきましょう。

設定が完了すれば、ユーザーはワンクリックでスムーズにログインできるようになります。快適な開発体験を！

---

この記事について

フロントエンドエンジニアとして日々開発している中で、認証設定でハマった経験をもとに執筆しました。同じように困っている方の参考になれば幸いです。

質問や改善点があれば、お気軽にコメントやフィードバックをいただけると嬉しいです。