はじめに

こんにちは！かほです♪🐥
現在、本業では技術広報業務やエンジニア業務などに従事しています。
今回の記事では、Supabase×Next.jsを用いたアプリ開発におけるGoogle認証機能の実装方法について説明します。

ここで言う認証機能は下記の2点です。

サインアップ&ログイン
ログアウト

Supabase×Next.js×Vercelの連携方法から知りたい方は、下記の記事を参考にしてください。

Supabase×Next.jsで、Google認証機能を実装したい方々の一助になれば幸いです🙌

この記事の読者対象

・Supabaseの認証周りについて知りたい方
・Supabase×Next.jsで認証機能を含むアプリを作ってみたい方
・Supabase×Next.jsでGoogleによる認証方法を知りたい方
・GCP(Google Cloud Platform)について知りたい方
・Supabaseを今後使ってみたい方
・Next.jsを使って高速でアプリを作りたい方

開発環境

package.json

 "dependencies": {
    "@supabase/auth-ui-react": "^0.2.7",
    "@supabase/supabase-js": "^2.2.1",
    "eslint": "8.28.0",
    "eslint-config-next": "13.0.6",
    "next": "13.0.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
  },
  "devDependencies": {
    "@types/node": "^18.11.13",
    "@types/react": "18.0.26",
  }

ユーザーの認証方法について

Supabaseのユーザー認証の方法には、4通りあります。今回使用する方法は、ソーシャルプロバイダー(Google)による認証です。下記のSupabase公式ドキュメントにGoogle認証についての流れが書いてあるため、ご興味のある方は、ご参照ください🙌

また下記のSupabase公式ドキュメントに、その他認証方法についても詳しく書いてあるため、ご興味のある方は、ご参照ください🙌

GCPでプロジェクトを作成しよう

Google認証を行うにあたりGoogle OAuthアプリケーションの設定を行い、アプリケーションの資格情報をSupabaseのダッシュボードに追加する必要があります。そのため、最初にGoogleがクラウド上で提供するサービス群 GCP(Google Cloud Platform) で、Googleプロジェクトの作成を行います。

Google Cloud Platformにアクセスを行い、Googleアカウントのサインインを行います。
右上のコンソールを押したのち、画面遷移先左上のプロジェクトの選択を押します。すると、下記のようなプロジェクトの選択という題名のポップアップが出てきます。右上の新しいプロジェクトを押しましょう。
.
新しいプロジェクトの設定画面が出てくるため、プロジェクト名と場所を設定し、作成ボタンを押します。数秒後に新しいプロジェクトのダッシュボードが作成されます。
.

Google OAuthキーをSupabaseプロジェクトに追加しよう

新しいGoogleプロジェクトの作成を行いました。次に、SupabaseプロジェクトのAuthentication>Providers>Google(下記画像参照)のClient IDとClient Secretに設定するGoogle OAuthキーを作成します。
.

OAuth同意画面の設定しよう

新しいプロジェクトのダッシュボードを開き、APIとサービスのOAuth同意画面を選択します。
.
User Typeを選択します。今回は外部を選択し作成ボタンを押します。
.

アプリ登録の編集をしよう

次にアプリ登録の編集を行います。アプリ名、ユーザーサポートメール、デベロッパーの連絡先情報は入力必須項目なので、忘れずに入力し、保存します。
.

Google資格情報を作成しよう

APIとサービスの認証情報を選択し、認証情報を作成>OAuthクライアントIDを選択します。
.
OAuthクライアントIDの作成画面が表示されます。アプリケーションの種類をウェブアプリケーションと選択し、名前は適当に記載します。
.
次にSupabaseプロジェクトのAuthentication>Providers>GoogleのRedirect URLをコピーします。
.
コピーしたRedirect URLを承認済みのリダイレクトURLに追加します。ここまでの記載が終わったら、作成ボタンを押します。
.
OAuthクライアントを作成しましたのポップアップ画面が表示されます。クライアントIDとクライアントシークレットをコピーします。
.

Google OAuthキーをSupabaseプロジェクトに設定しよう

SupabaseプロジェクトのAuthentication>Providers>GoogleのGoogle enabledをオンにし、上記でコピーしたクライアントIDとクライアントシークレットを個々の場所にペーストします。Saveボタンを押します。
上記までの過程により、Google認証が可能になり、Googleの行がEnabledになります！
.

フロントエンド側にコードを追加しよう

上記までの過程でGoogle認証の使用を可能にしたため、Google認証に伴うコードの追加を行います。
今回のGoogle認証機能では、auth-ui-reactというライブラリを用いて行います。
下記の公式ドキュメントにも記載されていますので、ご参照ください🙌

下記がgoogle.tsxの全体像です。

google.tsx

import Head from "next/head";
import styles from "../styles/Home.module.css";
import { createClient } from '@supabase/supabase-js'
import { Auth, ThemeSupa } from '@supabase/auth-ui-react'

export default function Google(){
  const supabase = createClient('Project URL', 'Project API anon key')

  return (
    <>
      <div className={styles.container}>
      <Head>
        <title>Google認証画面</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <div className={styles.grid}>
          <Auth
            supabaseClient={supabase}
            appearance={{ theme: ThemeSupa }}
            providers={['google']}
          />
        </div>
      </main>
      <footer className={styles.footer}>
      </footer>
    </div>
    </>
  )
}

Google認証機能の実装方法について、コードを上から順に説明します。
auth-ui-reactというライブラリからAuthコンポーネントと様式のテーマであるThemeSupaをインポートします。@supabase/supabase-jsからcreateClientをインポートします。

google.tsx

import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
import { createClient } from '@supabase/supabase-js'

次にAuthコンポーネントのpropsであるsupabaseClientに入力するsupabaseを定義します。
createClientの引数に、SupabaseプロジェクトのProject Settings>APIのProject URLとProject APIのanon keyを設定します。

google.tsx

  const supabase = createClient('Project URL', 'Project API anon key')

最後にAuthコンポーネントの各propsに値を設定します。
supabaseClientには、先ほど定義したsupabase、appearanceには{ theme: ThemeSupa }を設定します。今回、providersの値にはsocialプロバイダーとしてGoogleを使用したので、[google]と設定しましょう。

google.tsx

      <Auth
        supabaseClient={supabase}
        appearance={{ theme: ThemeSupa }}
        providers={['google']}
      />

ログアウト機能について

ログアウト機能の実装方法については、下記の「話題のSupabaseでサクッと認証機能をつくってみた！」の「ログアウト機能を実装しよう」の段落と内容が同じですので、実装したい方はごぜひ参考にしてください🙌

最後に

これで実装はおしまいです！

今回は、Supabase×Next.jsを用いたアプリ開発におけるGoogle認証の実装方法について説明しました。今後は主にフロントエンド周辺、コミュニティ運営、Tech PR(技術広報)の記事を中心に書いていく予定ですので、気になる方はぜひフォローをよろしくお願いします♪ではでは〜🐥

Twitterアカウント:https://twitter.com/kaho_eng

話題のSupabaseでサクッとGoogle認証機能をつくってみた！

はじめに

この記事の読者対象

開発環境

ユーザーの認証方法について

GCPでプロジェクトを作成しよう

Google OAuthキーをSupabaseプロジェクトに追加しよう

OAuth同意画面の設定しよう

アプリ登録の編集をしよう

Google資格情報を作成しよう

Google OAuthキーをSupabaseプロジェクトに設定しよう

フロントエンド側にコードを追加しよう

ログアウト機能について

最後に

参考資料