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

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

ここで言う認証機能は下記の2点です。
* サインアップ&ログイン
* ログアウト

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

https://qiita.com/KAHO23340582/items/8a7faf77222a599fb31c

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


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


# 開発環境
```json: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認証についての流れが書いてあるため、ご興味のある方は、ご参照ください🙌

https://supabase.com/docs/guides/auth/social-login/auth-google

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

https://www.supabase.jp/docs/guides/auth


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

1. [Google Cloud Platform](https://cloud.google.com/)にアクセスを行い、Googleアカウントのサインインを行います。
1. 右上の`コンソール`を押したのち、画面遷移先左上の`プロジェクトの選択`を押します。すると、下記のようなプロジェクトの選択という題名のポップアップが出てきます。右上の`新しいプロジェクト`を押しましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/50d41a92-ab90-7e50-9298-83368e078faa.png"  width="500" height="186" />.

1. 新しいプロジェクトの設定画面が出てくるため、`プロジェクト名`と`場所`を設定し、`作成`ボタンを押します。数秒後に新しいプロジェクトのダッシュボードが作成されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/cc8cd47a-a62f-0938-be80-6e9f4edd3c9e.png"  width="500" height="186" />.

# Google OAuthキーをSupabaseプロジェクトに追加しよう
新しいGoogleプロジェクトの作成を行いました。次に、**Supabase**プロジェクトの`Authentication`>`Providers`>`Google`(下記画像参照)の`Client ID`と`Client Secret`に設定するGoogle OAuthキーを作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/008848db-bd4c-74f3-d0ac-51f30d17ab15.png"  width="500" height="186" />.

## OAuth同意画面の設定しよう
1. 新しいプロジェクトのダッシュボードを開き、`APIとサービス`の`OAuth同意画面`を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/8e1e5078-8f0a-df59-3143-57fa8c7b6708.png"  width="500" height="186" />.

1. `User Type`を選択します。今回は`外部`を選択し`作成`ボタンを押します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/ce10c0d7-642f-4947-8342-51b526d45054.png"  width="500" height="186" />.

## アプリ登録の編集をしよう
1. 次に`アプリ登録の編集`を行います。`アプリ名`、`ユーザーサポートメール`、`デベロッパーの連絡先情報`は入力必須項目なので、忘れずに入力し、保存します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/619b37a1-d155-14c9-9ec9-3be1b7ee14dd.png"  width="500" height="186" />.

## Google資格情報を作成しよう

1. `APIとサービス`の`認証情報`を選択し、`認証情報を作成`>`OAuthクライアントID`を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/0b0fb47e-1a89-dc2f-c8f9-56dbfd6ce669.png"  width="500" height="186" />.

1. `OAuthクライアントIDの作成`画面が表示されます。`アプリケーションの種類`を`ウェブアプリケーション`と選択し、名前は適当に記載します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/3563273a-e5bf-2981-8978-18e11f0d1450.png"  width="500" height="186" />.

1. 次に**Supabase**プロジェクトの`Authentication`>`Providers`>`Google`の`Redirect URL`をコピーします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/9aea583e-08c7-ae4f-539c-af197027e045.jpeg"  width="500" height="186" />.

1. コピーした`Redirect URL`を`承認済みのリダイレクトURL`に追加します。ここまでの記載が終わったら、`作成`ボタンを押します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/7f605724-aff0-b094-5502-96058708cb25.jpeg"  width="500" height="186" />.


1. `OAuthクライアントを作成しました`のポップアップ画面が表示されます。`クライアントID`と`クライアントシークレット`をコピーします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/5d64ee5f-e1fb-a0d4-5d46-3757743c8936.jpeg"  width="500" height="186" />.

## Google OAuthキーをSupabaseプロジェクトに設定しよう
1. **Supabase**プロジェクトの`Authentication`>`Providers`>`Google`の`Google enabled`をオンにし、上記でコピーした`クライアントID`と`クライアントシークレット`を個々の場所にペーストします。`Save`ボタンを押します。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/4a65dce9-2af3-8df7-6a08-c057429e514f.jpeg"  width="500" height="186" />


1. 上記までの過程により、Google認証が可能になり、Googleの行が`Enabled`になります！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/2d25477f-a24c-81a7-f7f6-7e5218a35293.png"  width="500" height="186" />.


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

https://supabase.com/docs/guides/auth/auth-helpers/auth-ui

下記がgoogle.tsxの全体像です。
```jsx: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]`と設定しましょう。
```jsx:google.tsx
      <Auth
        supabaseClient={supabase}
        appearance={{ theme: ThemeSupa }}
        providers={['google']}
      />
```

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

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

# 最後に
これで実装はおしまいです！

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


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

# 参考資料
https://qiita.com/KAHO23340582/items/8a7faf77222a599fb31c

https://supabase.com/docs/guides/auth/social-login/auth-google

https://www.supabase.jp/docs/guides/auth

https://cloud.google.com/

https://supabase.com/docs/guides/auth/auth-helpers/auth-ui

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