Nuxt + Supabase で Googleログイン機能を作ってみる

Nuxt（3系）とSupabaseを用いて、Googleログインを実装する方法を個人用にまとめたものです。

Nuxtインストール

$ npx nuxi@latest init <project-name>

Supabase module インストール

アプリからSupabaseを操作するための便利なインターフェイスとして「supabase-js」というライブラリがあり、それをNuxtで扱いやすいようにしたライブラリ「NuxtSupabase」をインストールしておく。
NuxtSupabase 公式

$ npm i @nuxtjs/supabase

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@nuxtjs/supabase"], // Supabaseのモジュールを追加
})

Supabase設定

Supabase

Supabaseで新規プロジェクトを作成する。
作成するとProjectURLとAPIKeyが表示されるためコピーしておく。

Nuxtプロジェクト内に.envを作成し、コピーしておいたURLとKeyを記述する。

SUPABASE_URL="{ProjectURL}"
SUPABASE_KEY="{APIKey}"

GCP設定

Google Cloud Platform

ダッシュボード > APIとサービス > Oauth同意画面

• User Typeは外部
• アプリ名（わかればなんでも）とサポートメール、デベロッパー連絡先情報を入力
• アプリのドメインは今回、"http://localhost:3000"としておく

ダッシュボード > APIとサービス > 認証情報

認証情報を作成 > OauthクライアントIDへと進み各種情報を入力していく。

• アプリケーションの種類：ウェブアプリケーション
• 承認済みのJavaScript生成元：今回は"http://localhost:3000"
• 承認済みのリダイレクトURL
  • SupabaseのAuthentication > Providers > Google > Callback URL（for Oauth）

認証情報を作成するとクライアントIDとクライアントシークレットが表示されるので、
それらをSupabaseのAuthentication > Providers > Googleに登録し、有効化して保存する。

Nuxtコンポーネント作成

今回はトップページとログインページの2種を用意。

pages
├・index.vue
└・login.vue

<!-- login.vue -->
<template>
    <div class="inner">
        <h1>ログインページ</h1>
        <login-button @click="googleLogin"></login-button>
    </div>
</template>

<script setup>

const client = useSupabaseClient();
const user = useSupabaseUser(); // ユーザー情報を取得（リアクティブ）

onBeforeMount(() => {
    if (user.value) {
        console.log('既にログイン済みです')
    } else {
        console.log('未ログインです')
    }
});

const googleLogin = async () => {
    try {
        // SupabaseのOAuth認証を使ってGoogleログイン
        const { user, error } = await client.auth.signInWithOAuth({
            provider: 'google'
        })

        // ログインに失敗した場合
        if (error) {
            console.error('Error during sign in:', error.message)
            return
        }

        // ログインに成功した場合
        if (user) {
            console.log(user)
            // リダイレクト処理など
        }
    } catch (error) {
        console.error('Error:', error)
    }
};

なお、認証後にuseSupabaseUserの値には認証情報（idなど）が格納されている。

最後に

この認証情報を活用して、Usersテーブルに登録済みレコードがあればマイページにリダイレクト、なければ新規ユーザー作成画面（ニックネームとかプロフ画像とか）を登録させる画面へ遷移させるなどするのがよくあるのかな？

いやー、Supabaseって便利だな。。。