背景
個人開発中のNext.jsアプリにGoogle認証機能を追加したくて、下記の記事をお手本に、JWTのシークレットを生成し環境変数の設定までできた。
動作確認のためにサーバーを再起動し、Webブラウザで http://localhost:3000/login にアクセスしてログインボタンをクリックしGoogleログインしようとしたができなかった。
意図しない挙動になるまでの流れのスクショ
-
「ログイン」ボタンをクリック
-
「Sign in with Google」をクリック
-
アカウントを選択
-
「アクセスをブロック: HayaokiGirlsCalendar は Google の審査プロセスを完了していません」と表示された
開発環境
$ 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つの記事を読む限り、テストユーザーの追加が必要であることが分かった。
2. テストユーザーの追加
2-1. OAuth 同意画面 → 「ADD USERS」をクリック
2-2. テストユーザーで使用するメールアドレスを入力する
テストユーザーの項目に、先ほど入力したメールアドレスが登録されてるのを確認できた。
動作確認1
Webブラウザの「←」でアカウント選択画面に戻り、再度同じアカウントを選択すると「このアプリは Google で確認されていません」と表示された。しかし、続きの文章を読むと問題ないと分かった。
- 「続行」をクリック
-
「次へ」をクリック
-
ログインに成功した。
動作確認2
-
「ログアウト」ボタンをクリックすると、ログイン画面に遷移した。
-
「ログイン」ボタンをクリックするとGoogle認証画面が表示された。
-
アカウントを選択
-
ログインに成功した。