nextjs + auth0 + google (reload でもログインキープ)サンプル
repo
https://github.com/github0013/nextjs-auth0-google
auth0 はこのパッケージ（ https://github.com/Swizec/useAuth ）でだいぶ楽だが、google などの ID プロバイダーなどでのログインとなるとやっかいで、ログイン後にリロードするとログアウト状態になる。
これはセキュリティの観点上、重要な情報はメモリ内にあるだけなのでリロードすると消えてしまう。
このパッケージにもあるように、Google でリロード後もログイン状態を保つには以下の通りにする。
Set Up Social Connections
https://auth0.com/docs/dashboard/guides/connections/set-up-connections-social
参考:
React Tutorial: Building and Securing Your First App
(Keeping Users Signed In after a Refresh から読む)
https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/
これを読んでいってもちょっと分かりにくかったので、このサンプル環境と手順で簡単に試せます。
事前準備
- gmail のアカウントがある（あとで google API console にログインする必要がある）
- ngrok にアカウントがある（すぐ作れる - 外から繋がる https が必要）
- ngrok の authtoken がある（ログイン後、通常表示される）
- auth0 にアカウントがある
- auth0 に app がある
- auth0 に Google の connection がある
- docker-compose.yml の
YOUR_NGROK_AUTHに ngrok の authtoken を入れる - ./frontend に .env を作る（.env.EXAMPLE 参考）
-
docker-compose up（down すると ngrok のアドレスが変わり、auth0 の設定をやり直さないといけないので注意） - http://YOUR_LOCAL_IP:4040/ を開いて ngrok の https アドレスをクリック表示
- frontend が表示される
- url をコピー
- auth0 を開いて app の
Allowed Callback URLs、Allowed Logout URLs、Allowed Web Originsを設定
.env の設定
| AUTH0_DOMAIN | AUTH0_CLIENT_ID |
|---|---|
| auth0 の app の Domain | auth0 の app の Client ID |
auth0 の設定
| Allowed Callback URLs | Allowed Logout URLs | Allowed Web Origins |
|---|---|---|
| https://...ngrok.io/auth0/callback | https://...ngrok.io | https://...ngrok.io |
メールアドレス登録でのログイン
- frontend の login ボタンで auth0 のダイアログが表示されれば一旦は OK
- sign up でとりあえずメールアドレス登録でログインしてみる
- /users が開けば OK
- リロードしてみる
- 引き続きログインが出来ていれば OK
Google の設定
ここがややこしい。Google でガチャガチャ設定して Google のClient ID、Client Secretを作り、Admin SDKを有効にしておいて、auth0 の Google connection に Google のClient ID、Client Secretを設定する流れ。
- auth0 へログインする
- https://auth0.com/docs/connections/social/google を開く
- 手順が書いてあるが、一応説明
- https://console.developers.google.com にログインする
- プロジェクトがないならまず作る
- OAuth 同意画面へ行く
- 承認済みドメインへ
auth0.comを入れて保存 - 認証情報で OAuth クライアント ID 新規作成
- ウェブ アプリケーションを選択
- 承認済みの JavaScript 生成元、承認済みのリダイレクト URI を https://auth0.com/docs/connections/social/google に表示されているとおりに入力
- ID とシークレットが表示されるのでコピー
- ！！！念のために作成されたクライアント ID をクリックして内容確認（意外と承認済みの JavaScript 生成元 | 承認済みのリダイレクト URI どっちかが無かったりする）
- ライブラリに行って、
adminと検索してAdmin SDKを有効にする - auth0 に行く
- connections で google をクリックして表示
-
Client ID、Client Secretが入力出来るので OAuth クライアント ID 作成時に出来たものを入れる - TRY ボタンで試してみて、google のログインが出たら OK
- frontend に行って、google アカウント（誰のでも）でログインしてみる
- ログイン後、リロードしてもログイン状態なら成功
https://auth0.com/docs/connections/social/google
| 承認済みの JavaScript 生成元 | 承認済みのリダイレクト URI |
|---|---|
| Authorized JavaScript origins | Authorized redirect URIs |
OAuth 同意画面（autho0.com 追加）
ウェブアプリケーションで ID の作成
出来たクライアント ID を開いた所
Admin SDK の検索
