Nuxt3とSupabaseでGoogle認証のログイン機能を作りVercelにデプロイする

Last updated at 2024-10-14Posted at 2024-10-14

概要

Nuxt3 と Supabase を使って Google ログインの機能を作り、Vercel にデプロイする手順を記載する。

リポジトリはこちらを参照。

本記事では、以下の手順を一部参考に実施している。

環境

Nuxt: 3.13.2

Nuxt3 のプロジェクトを作成

はじめに、Nux3 のプロジェクトを作成する

npx nuxi@latest init supabase-google-login-app

プロジェクトのディレクトリに移動し、アプリケーションが起動することを確認する

cd supabase-google-login-app
npm run dev

以下の URL にアクセスし、Nuxt3 の初期の画面が表示されれば成功。

http://localhost:3000

Supabase の設定

Googleログインの際の認証に利用する、Supabaseの設定を行う。事前準備としてSupabaseのアカウントを作成しておく。

Supabase のプロジェクト作成

Supabase のダッシュボードにアクセスする。画面上部の「New Project」よりプロジェクトを作成する

設定画面が表示される為「Project Name」「Database Password」「Region」を入力する。

入力完了後「Create new project」をクリックすると、 Supabase のプロジェクトが新規に作成される。

作成後、ダッシュボードに表示される「Project URL」「API Key」を.envファイルに記載する。また、Google 認証後にリダイレクトする先の URL もREDIRECT_HOSTに設定しておく。

.env

SUPABASE_URL=${コピーしたProject URL}
SUPABASE_ANON_KEY=${コピーしたAPI Key}

REDIRECT_HOST=http://localhost:3000

`@nuxtjs/supabase`をプロジェクトに追加

Supabase を利用するためのモジュールをプロジェクトに追加する。

npx nuxi@latest module add supabase

nuxt.config.jsに以下の設定を追加する

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@nuxtjs/supabase"],
  supabase: {
    key: process.env.SUPABASE_ANON_KEY, // Supabase の API Keyの設定
  },
  runtimeConfig: {
    public: {
      redirectHost: process.env.REDIRECT_HOST, // リダイレクト先の ホスト名の設定
    },
  },
});

公式の手順ではSUPABASE_ANON_KEYの代わりにSUPABASE_KEYを利用している。　
しかしSUPABASE_KEYは、Vercel と Supabase の連携の際に、自動で環境変数が連携されない。

そのため、本手順では自動で連携されるSUPABASE_ANON_KEYを利用し、nuxt.config.tsでSUPABASE_ANON_KEYを読み込むようにしている。

Google ログインの設定

事前準備として、Google Cloud Platform にアクセスし、プロジェクトを作成する

Google Cloud Platform

Google 認証の Auth 同意画面を作成

検索バーに「OAuth 同意画面」と入力し、OAuth 同意画面を作成のコンソールに移動する。「User Type」は「外部」を選択し「作成」をクリックする。

その後「アプリ名」「サポートメール」「デベロッパー連絡先情報」を入力する。
それ以外の設定値はデフォルトのまま「保存して続行」をクリックする。

以下の画面が表示されれば成功。

Callback URL を Supabase から取得

Supabase のダッシュボードにアクセスし「Authentication > Providers」の画面に移動する。

画像赤枠の「Callback URL(for OAuth)」の値をコピーする。

認証情報を作成

「認証情報 > 認証情報を作成 > OAuth クライアント ID の作成」より新規に認証情報を作成する

各種パラメータに以下の値を入力する。

アプリケーションの種類: ウェブアプリケーション
アプリケーション名: 任意の名前(今回はsupabase-google-login-app)
承認済みの JavaScript 生成元: localhost:3000
許可されたリダイレクト URI: Supabase から取得した Callback URL

入力後、「作成」をクリックすると「クライアント ID」と「クライアントシークレット」が生成される。

「クライアント ID」と「クライアントシークレット」は後の手順で利用するため控えておく。

Supabase で Provider を設定

Supabase の画面に戻り「Authentication > Providers」の画面に再度移動する。

Google の Provider を設定し、各種パラメータに以下の値を入力する。

Client ID (for OAuth): 先ほど作成した OAuth クライアント ID
Client Secret (for OAuth): 先ほど作成した OAuth クライアント ID のシークレット

以上の手順でGoogleログインに必要なGCPとSupabaseの設定は完了となる。次の手順からNuxtのアプリ側の設定を行う。

Nuxt3 でログイン機能を実装

ログインの画面とリダイレクトの画面、ログイン後に表示される画面を実装する

app.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

pages/login.vue

<script setup lang="ts">
  const supabase = useSupabaseClient();
  const runtimeConfig = useRuntimeConfig();
  const signInWithGoogle = async () => {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: `${runtimeConfig.public.redirectHost}/confirm`,
      },
    });
    if (error) console.log(error);
  };
</script>
<template>
  <div>
    <button @click="signInWithGoogle">Sign In with Google</button>
  </div>
</template>

pages/confirm.vue

<script setup lang="ts">
  const user = useSupabaseUser();

  watch(
    user,
    () => {
      if (user.value) {
        return navigateTo("/");
      }
    },
    { immediate: true }
  );
</script>
<template>
  <div>Waiting for login...</div>
</template>

ログイン後のトップページを作成する。ログインしたユーザのメールアドレスが表示されるようにし、ログインしていない状態でアクセスした場合は/login画面に強制的にリダイレクトするようにする。

pages/index.vue

<script setup lang="ts">
  const client = useSupabaseClient();
  const userEmail = ref("");

  onMounted(async () => {
    const user = await client.auth.getUser();

    // 認証されていない時、ログインページにリダイレクト
    if (!user) {
      client.auth.signOut();
      window.location.href = "/login";
    }

    // 認証されている場合はユーザー情報を取得
    userEmail.value = user.data.user?.email!; // ユーザーのメールアドレスを取得
  });
</script>
<template>
  <div>
    <p>Hello！ {{ userEmail }}</p>
  </div>
</template>