今回はNext.js仕様にAuth0の設定を行なっていく。
今回やることは大まかに3点だ
今回も終始画像付きで解説していくので皆様も画面を操作しながらご覧いただけることだろう。
前回のSupabase同様で2021/08/15付のAuth0のUIでナビゲーションしてくぞ。
本編に突入する前にまずはAuth0のアカウントを作成しよう。
メールアドレスか、SNS認証を通じてAuth0のアカウント登録を進めていく。
ひとまずPersonalで進めていこう。
Auth0のドメイン名を決めよう。 今回は「polegon」で登録する。 Regionは「Japan」を選択する。
登録が完了するとこの様な画面に遷移する。 これでアカウント登録は完了だ。
準備も整ったので早速本編に進もう。
Auth0のアプリケーション設定
まずは認証機能の基盤であるアプリケーションの作成・設定を行なっていく。
早速右上にある「Create application」をクリックしよう。 すると下のようなモーダルが出る。
ここでは「アプリケーション名」と「アプリケーションタイプ」を選択する。
アプリケーション名は各々決めていただこう。 今回はNext.jsでアプリケーションを作成していくので、「Regular Web」の方を選択しよう。
選択したら「Create」ボタンをクリックしよう。
すぐにアプリケーションが仕上がるはずだ。
アプリケーションが立ち上がると実装先のフレームワークが問われるので、Next.jsを選択しよう。
するとNext.jsでAuth0を実装するためのチュートリアルが表示される。今回はそれはスルーしてもらいアプリケーションの設定を行なっていく。今回は綴らないが実装編ではnextjs-auth0というSDKをしようして実装していくのでそこで詳しく綴ろう。
アプリケーションの設定画面に移動すると、Next.js側で実装するための「Client ID」と「Client Secrate」が表示される。コピペしてNext.jsのenvに貼っておこう。
callback URLsではログイン動作を行なった際のリダイレクト先のURLを指定する。今回はNext.jsのAPI routesを使用する為「 http://localhost:3000/api/auth/callback 」にしている。複数指定可能なのでデプロイ先のドメインと合わせて記述することができる。
例えばデプロイ先が「 https://sumple.com 」であれば、 「 https://sumple.com/api/auth/callback ,http://localhost:3000/api/auth/callback 」と言ったようにコンマで区切って複数のURLを登録できる。
あとはログアウト後のリダイレクト先のURLも同じ要領で複数指定できる。
その他CORSやオリジンも引っかからないように設定しておく。
最後に「Save Change」ボタンを押して成功すれば完了だ。
Google-OAuth2の設定
では続いてGoogle-OAuth2を使用した認証機能の設定も行っていこう。ではメニューの「Authentication」の「Social」に移動してもらおう。
Auth0ではデフォルトで開発環境用にGoogle認証が使える様になっている。今回は本番環境でも使用できる様にちゃんとGoogle-OAuth2の設定を行なっていく。
GCPの設定がまだの方はこちらにアクセスしてアプリケーションの作成・設定を行なっていただこう。
同意を完了させたらメニュー画面の「認証情報」へ移動して「+認証情報を作成」から「APIキー」の発行と「OAuthクライアントID」をクリックして「クライアントID」と「キー」の作成を行う。
「クライアントID」を設定するのに最も重要な部分は「承認済みのJavaScript生成元」と「承認済みのリダイレクト」だ。
承認済みのJavaScript生成元はアカウント登録した際のAuth0のドメインを登録し、リダイレクト先は「login/callback」を指定する。
完了すると、「クライアントID」と「キー」が生成されるので必ず控えておこう。
Auth0のSocialに戻り先ほど生成した「クライアントID」と「キー」をGoogle-OAuth2の設定画面に入力しよう。
これで準備完了だ！
画面右上の「Try」を押して下の様な画面が出れば成功だ！
managementAPIの設定
一通りの認証設定が完了したので、続いてはAuth0のマネジメントAPIについて軽く紹介して今回は終了しよう。
Auth0のマネジメントAPIを使用することでAuth0で登録したユーザーに関するAPIを呼び出すことができる。
メニューの「Application」の「APIs」に移動してもらおう。
続いてタブの「Test」へ移動していただこう。すると下の様な画面が現れる。
これを使用してAuth0のJWTを呼び出しマネジメントAPIを操作していく。
Axiosやfetch、api routesを使用してPOSTを行うとJWTが返ってくる。
そのJWTを使用してmanagementAPIにアクセスすることができるのだ。
因みにmanagementAPIの仕様書は下記に載せたのでご覧頂こう。
終わりに
今回はAuth0をNext.jsで実装する際の基盤の設定を行なった。
ここまで設定ができれば、あとはNext.jsのAuth0 SDKを使用して簡単に、認証・ユーザー機能を実装出来る。 逆にAuth0の設定がうまくいかなければいつまで経っても実装はできないので今回の記事を参考に設定していってほしい。
次回は「Hasura Cloudの設定編」を行うのでお楽しみに！
ご不明点や気になる点があれば是非下のコメント欄までお問い合わせいただこう！
