Supabase Next.jsでのGoogleログイン機能の実装

# 注意
あらかじめ言っておきますが、筆者は初心者なので、自分なりの解釈でまとめています。「100%信じるぜ！」という気持ちで読まないようお願いします。どうぞよろしく！

# 経緯
next.jsとsupabaseを使って、簡単なアプリを作りました（supabaseを選んだ理由は、流行っていそうだから）。せっかくなのでアカウント管理とログイン機能を作ってみようと思い立ちました。クライアントコンポーネントで実装するのは簡単だったのですが、最後に全体をラップする際に、「あれ？これって全体がクライアントコンポーネントになるんじゃ？」と思ったんです。そしたら、next.jsの意味がなくなっちゃう気がして、サーバーコンポーネントで実装しようと思ったんです。だけど、サーバー側でログイン機能を実装するのにちょっと手こずったので、その備忘録として残しておきます。

他に良い方法を知っている方がいれば、教えてください！

# 参考
参考にしたサイトは以下です。

こちらは、supabaseの設定やGoogleCloudの設定で参考にしました。とても分かりやすかったです。

https://qiita.com/kaho_eng/items/a37ff001ea9eae226183

以下は公式ドキュメントです。読んで、**自分なりに簡単に解釈したつもりです（ここ重要）**。

https://supabase.com/docs/guides/auth/social-login/auth-google?queryGroups=platform&platform=web&queryGroups=environment&environment=server&queryGroups=framework&framework=nextjs#google-pre-built

https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=nextjs&queryGroups=environment&environment=server#install

https://supabase.com/docs/guides/auth/server-side/nextjs?queryGroups=router&router=app

こちらは、クッキーに保存されたセッションを確認するためのsupabase.auth.getUser()についての参考資料です。

https://supabase.com/docs/reference/javascript/auth-signinwithsso

# 順番
1. GoogleCloudやSupabaseの設定
2. envファイルの作成
3. Supabaseクライアントの作成するためのユーティリティ関数を書く
4. auth/callbackファイルの作成 
5. ログインページの作成
6. ServerActionsの作成
7. クッキーの取得とラップ処理

# 内容
順を追って説明していきます。

## 1. GoogleCloudやSupabaseの設定
紹介したサイトを参考にして設定を進めてください。

https://qiita.com/kaho_eng/items/a37ff001ea9eae226183

:::note warn
GoogleCloudの設定時に以下のように記入する必要があります：
「承認済みの JavaScript 生成元」→ 自分のローカルのURL（例：http://localhost:9999）
「承認済みのリダイレクトURI」→ 自分のローカルURL + /auth/callback（例：http://localhost:9999/auth/callback）

スクリーンショットも参考にしてみてください。
![スクリーンショット 2025-03-23 17.48.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3893783/775a8392-5130-4a15-8542-ff2dedf9cdd5.png)
:::

## 2. envファイルの作成
プロジェクトのルートに.envファイルを作成し、以下のように記述します（supabaseのURLとAPIキーを設定）。
「NEXT_PUBLIC」をつけていないURLのKEYがありますが、これは、セキュリティ面を考え、クライアント側で使用する場合とサーバー側で使用する場合で分けるためです。クライアント側でsupabaseを呼び出す場合は、NEXT_PUBLICがついていないURLとKEYを。サーバー側でsupabaseを呼び出す場合は、NEXT_PUBLICをつけている方を。**（多分、これは力技。参考にしないほうがいいと思います）**
```typescript:.env
SUPABASE_URL=あなたのURL
SUPABASE_ANON_KEY=あなたのキー
NEXT_PUBLIC_SUPABASE_URL=あなたのURL
NEXT_PUBLIC_SUPABASE_ANON_KEY=あなたのキー
```
:::note
supabaseのURLとAPIキーは、プロジェクトのSettings > Project Settingsから確認できます。
:::

## 3. Supabaseクライアントの作成するためのユーティリティ関数を書く
1. `utils/supabase`フォルダを作成
2. `client.ts` ,`server.ts`,`middleware.ts`ファイルを作成
3. `client.ts`ファイルに以下を記述（公式からコピペ）
     ```typescript:client.ts
    import { createBrowserClient } from '@supabase/ssr'
    export function createClient() {
      return createBrowserClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
      )
    }    
    ```
4. `server.ts`ファイルに以下を記述（公式からコピペ）
    ```typescript:server.ts
    import { createServerClient } from '@supabase/ssr'
    import { cookies } from 'next/headers'
    
    export async function createClient() {
      const cookieStore = await cookies()
    
      return createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
          cookies: {
            getAll() {
              return cookieStore.getAll()
            },
            setAll(cookiesToSet) {
              try {
                cookiesToSet.forEach(({ name, value, options }) =>
                  cookieStore.set(name, value, options)
                )
              } catch {
                // The `setAll` method was called from a Server Component.
                // This can be ignored if you have middleware refreshing
                // user sessions.
              }
            },
          },
        }
      )
    }
    ```
5. `middleware.ts`ファイルに以下を記述（公式からコピペ）
    ```typescript:middleware.ts
    import { createServerClient } from '@supabase/ssr'
    import { NextResponse, type NextRequest } from 'next/server'
    
    export async function updateSession(request: NextRequest) {
      let supabaseResponse = NextResponse.next({
        request,
      })
    
      const supabase = createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
          cookies: {
            getAll() {
              return request.cookies.getAll()
            },
            setAll(cookiesToSet) {
              cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value))
              supabaseResponse = NextResponse.next({
                request,
              })
              cookiesToSet.forEach(({ name, value, options }) =>
                supabaseResponse.cookies.set(name, value, options)
              )
            },
          },
        }
      )
    
      // Do not run code between createServerClient and
      // supabase.auth.getUser(). A simple mistake could make it very hard to debug
      // issues with users being randomly logged out.
    
      // IMPORTANT: DO NOT REMOVE auth.getUser()
    
      const {
        data: { user },
      } = await supabase.auth.getUser()
    
      if (
        !user &&
        !request.nextUrl.pathname.startsWith('/login') &&
        !request.nextUrl.pathname.startsWith('/auth')
      ) {
        // no user, potentially respond by redirecting the user to the login page
        const url = request.nextUrl.clone()
        url.pathname = '/login'
        return NextResponse.redirect(url)
      }
    
      // IMPORTANT: You *must* return the supabaseResponse object as it is.
      // If you're creating a new response object with NextResponse.next() make sure to:
      // 1. Pass the request in it, like so:
      //    const myNewResponse = NextResponse.next({ request })
      // 2. Copy over the cookies, like so:
      //    myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())
      // 3. Change the myNewResponse object to fit your needs, but avoid changing
      //    the cookies!
      // 4. Finally:
      //    return myNewResponse
      // If this is not done, you may be causing the browser and server to go out
      // of sync and terminate the user's session prematurely!
    
      return supabaseResponse
    }

    ```

## 4. auth/callbackファイルの作成（公式からコピペ）
1. app/auth/callbackフォルダを作成（**この順番が大事！！**）
2. route.ts ファイルを作成し、以下を記述
    ```typescript:route.ts
      import { NextResponse } from 'next/server'
      // The client you created from the Server-Side Auth instructions
      // import { supabase } from '../../../utils/supabase/middleware'
      import { createClient } from "@/utils/supabase/server";
      export async function GET(request: Request) {
      const supabase = await createClient()
      const { searchParams, origin } = new URL(request.url)
      const code = searchParams.get('code')
      // if "next" is in param, use it as the redirect URL
      const next = searchParams.get('next') ?? '/'
    
    
      if (code) {
      //`OAuthの認可コードをSupabaseのセッションに交換する処理ということ。
        const { error } = await supabase.auth.exchangeCodeForSession(code) 
        if (!error) {
          const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer
          const isLocalEnv = process.env.NODE_ENV === 'development'
          if (isLocalEnv) {
            // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
            return NextResponse.redirect(`${origin}${next}`)
          } else if (forwardedHost) {
            return NextResponse.redirect(`https://${forwardedHost}${next}`)
          } else {
            return NextResponse.redirect(`${origin}${next}`)
          }
        }
      }
    
      // return the user to an error page with instructions
      return NextResponse.redirect(`${origin}/auth/auth-code-error`)
    }

    ```

## 5. ログインページの作成
login.tsxというファイルを作成し、ログインページを作成します。その際、フォームを使い、formのactionにServerActionを指定します。
```typescript:login.tsx
import { handleLogin } from "@/actions/Login";

const LoginPage = () => {

  return (
    <div>
      <form action={handleLogin}>
        <button type="submit">Googleでログイン</button>
      </form>
    </div>
  );
};

export default LoginPage

```

## 6. ServerActionsの作成
ServerActionのファイルを作成し以下を記述します。
```typescript:
'use server'
import { createClient } from "@/utils/supabase/server";
import { redirect } from "next/navigation";

export const handleLogin = async () => {
    const supabase = await createClient()
    const { data, error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        options: {
            redirectTo: 'あなたのポート番号/auth/callback',
        },
    })
    if (data.url) {
        redirect(data.url) // use the redirect API for your server framework
    }
};

```

## 7. クッキーの取得とラップ処理
layout.tsxでクッキーが残っているか確認し、ラップします。supabase.auth.getUser()でセッションがあるかどうか確認できます。
```typescript:layout.tsx
import { redirect } from "next/navigation";
import { createClient } from "@/utils/supabase/server";

const mainLayout = async ({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) => {

  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()
  // ユーザー情報がない場合はログインページへリダイレクト
  if (!user) {
    redirect('/login'); 
  }
    return (
        <div>
            {children}
        </div>
    )
}

export default mainLayout
```
# まとめ
初めてログイン機能を導入してみたけど、思った以上に難しかった。セキュリティを考えると、アプリが完成してもデプロイには慎重になってしまう。でも、こういう試行錯誤を通じて成長していくんだなと実感！ まだまだ勉強あるのみ！