Zenn
Open2

【Auth/認証機能】Supabase AuthでのGoogle Login実装について

Next.js
auth
Supabase
googlelogin
まさぴょん🐱まさぴょん🐱

Next.jsでSupabase Authを使ったGoogleログインの実装方法

Next.jsとSupabaseを組み合わせてGoogleログインを実装する手順を以下に示します。
このガイドでは、Supabaseの認証機能を利用して、Googleアカウントでのサインインを簡単に実装する方法を説明します。

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

まず、Next.jsのプロジェクトを作成します。以下のコマンドを実行して新しいプロジェクトを作成します。

npx create-next-app@latest my-app --typescript
cd my-app
npm install @supabase/supabase-js

2. Supabaseプロジェクトの作成

Supabaseのダッシュボードにアクセスし、新しいプロジェクトを作成します。プロジェクトが作成されたら、APIキーとURLを取得します。これらの情報は、Supabaseのダッシュボードの「Settings」→「API」セクションで確認できます。

3. 環境変数の設定

プロジェクトのルートに.env.localファイルを作成し、以下のように設定します。

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

4. Supabaseクライアントの初期化

lib/supabase.tsというファイルを作成し、Supabaseクライアントを初期化します。

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
export const supabase = createClient(supabaseUrl, supabaseKey);

5. Google Cloud Platformでの設定

Google Cloud Platformにアクセスし、新しいプロジェクトを作成します。次に、OAuth 2.0の認証情報を作成し、クライアントIDとクライアントシークレットを取得します。これらの情報をSupabaseのダッシュボードに追加します。

  1. Supabaseのダッシュボードに戻り、「Authentication」→「Providers」を選択します。
  2. Googleを選択し、取得したクライアントIDとクライアントシークレットを入力します。

6. Googleログイン機能の実装

次に、Googleログイン機能を実装します。pages/index.tsxファイルを開き、以下のコードを追加します。

import { supabase } from '../lib/supabase';

const Home = () => {
  const handleLogin = async () => {
    const { user, error } = await supabase.auth.signInWithOAuth({
      provider: 'google',
    });
    if (error) {
      console.error('Error logging in:', error);
    } else {
      console.log('User logged in:', user);
    }
  };

  return (
    <div>
      <h1>Welcome to My App</h1>
      <button onClick={handleLogin}>Sign in with Google</button>
    </div>
  );
};

export default Home;

7. コールバック処理の実装

Googleからの認証後にリダイレクトされるコールバック処理を実装します。pages/api/auth/callback.tsというファイルを作成し、以下のコードを追加します。

import { NextApiRequest, NextApiResponse } from 'next';
import { supabase } from '../../../lib/supabase';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { code } = req.query;

  if (code) {
    const { error } = await supabase.auth.exchangeCodeForSession(code as string);
    if (error) {
      return res.status(400).json({ error: error.message });
    }
    return res.redirect('/'); // 認証後のリダイレクト先
  }

  res.status(400).json({ error: 'No code provided' });
}

8. アプリケーションの実行

すべての設定が完了したら、アプリケーションを実行します。

npm run dev

ブラウザでhttp://localhost:3000にアクセスし、「Sign in with Google」ボタンをクリックすると、Googleの認証画面が表示されます。認証が成功すると、ユーザー情報がコンソールに表示されます。

まとめ

この手順に従うことで、Next.jsとSupabaseを使用してGoogleログイン機能を簡単に実装できます。Supabaseの認証機能を利用することで、セキュアでスムーズなユーザー管理が可能になります。