【エラー対応】Next.jsでGoogle認証機能実装にはテストユーザーが必要

# 背景
個人開発中のNext.jsアプリにGoogle認証機能を追加したくて、下記の記事をお手本に、JWTのシークレットを生成し環境変数の設定までできた。
* [NextAuth.jsでNext.js13にGoogle認証機能を実装](https://zenn.dev/hayato94087/articles/91179fbbe1cad4#%E6%96%B9%E6%B3%952%EF%BC%9A)

動作確認のためにサーバーを再起動し、Webブラウザで http://localhost:3000/login にアクセスしてログインボタンをクリックしGoogleログインしようとしたができなかった。

<details><summary>意図しない挙動になるまでの流れのスクショ</summary>

* 「ログイン」ボタンをクリック
![スクリーンショット 2024-01-28 22.20.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/3b32213a-d9f0-f181-87e9-3bc0ad7fcff0.png)


* 「Sign in with Google」をクリック
![スクリーンショット 2024-01-28 23.17.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/66f5efb8-755a-c047-67f9-5dbbf4c63b35.png)


* アカウントを選択
![スクリーンショット 2024-01-28 23.19.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/571a85b9-ef47-17a8-3263-28192487d291.png)


* 「アクセスをブロック: HayaokiGirlsCalendar は Google の審査プロセスを完了していません」と表示された
![スクリーンショット 2024-01-28 22.12.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/cdc15753-e35c-d1d7-688a-51013dd4a54a.png)
</details>


# 開発環境
```
$ sw_vers
ProductName:            macOS
ProductVersion:         14.2.1
BuildVersion:           23C71

$ node -v
v20.7.0

$ npm -v
10.1.0

$ npx next -v
Next.js v13.4.19
```

# やったこと
## 1. エラー文を検索にかける
検索欄に「Google の審査プロセスを完了していません。このアプリは現在テスト中で、デベロッパーに承認されたテスターのみがアクセスできます。」をコピペして記事を探した。

下記2つの記事を読む限り、テストユーザーの追加が必要であることが分かった。
* [アクセスをブロック: APP_NAMEは Googleの審査プロセスを完了していません – チラシの裏](https://www.globefish.jp/wp/2022/09/app_name-google.html)
* [Googleの審査プロセスが完了しない](https://teratail.com/questions/qejycrwrvjvgyk)

## 2. テストユーザーの追加
### 2-1.  OAuth 同意画面 → 「ADD USERS」をクリック
![スクリーンショット 2024-01-28 22.17.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/ac51ca81-4599-69ef-8b50-66767cd9af72.png)


### 2-2. テストユーザーで使用するメールアドレスを入力する
![スクリーンショット 2024-01-28 22.17.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/416bc492-5a2d-0d2a-f2f7-5868ae91fbe3.png)


テストユーザーの項目に、先ほど入力したメールアドレスが登録されてるのを確認できた。
![スクリーンショット 2024-01-28 22.17.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/b0763b2e-d924-a613-b540-8798ee45678f.png)


## 動作確認1
Webブラウザの「←」でアカウント選択画面に戻り、再度同じアカウントを選択すると「このアプリは Google で確認されていません」と表示された。しかし、続きの文章を読むと問題ないと分かった。
* 「続行」をクリック

![スクリーンショット 2024-01-28 22.18.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/2e1c22e0-670a-0985-eae1-2b72f00b7e31.png)


* 「次へ」をクリック
![スクリーンショット 2024-01-28 22.19.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/25c46bb6-9cdc-7e42-3d16-4c632583454c.png)

* ログインに成功した。
![スクリーンショット 2024-01-28 22.20.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/70585fb8-8175-3f5e-4c7c-db0af5068f0e.png)


## 動作確認2
* 「ログアウト」ボタンをクリックすると、ログイン画面に遷移した。
![スクリーンショット 2024-01-28 22.20.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/3b32213a-d9f0-f181-87e9-3bc0ad7fcff0.png)

* 「ログイン」ボタンをクリックするとGoogle認証画面が表示された。
![スクリーンショット 2024-01-28 23.17.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/66f5efb8-755a-c047-67f9-5dbbf4c63b35.png)

* アカウントを選択
![スクリーンショット 2024-01-28 23.19.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/571a85b9-ef47-17a8-3263-28192487d291.png)

* ログインに成功した。
![スクリーンショット 2024-01-28 22.20.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/70585fb8-8175-3f5e-4c7c-db0af5068f0e.png)



# 参考サイト
* [NextAuth.jsでNext.js13にGoogle認証機能を実装](https://zenn.dev/hayato94087/articles/91179fbbe1cad4#%E6%96%B9%E6%B3%952%EF%BC%9A)
* [アクセスをブロック: APP_NAMEは Googleの審査プロセスを完了していません – チラシの裏](https://www.globefish.jp/wp/2022/09/app_name-google.html)
* [Googleの審査プロセスが完了しない](https://teratail.com/questions/qejycrwrvjvgyk)