【Auth0入門】QuickStartで手を動かしながらサクッとAuth0を学んでみた

ゲームソリューション部の新屋です。 Auth0はいいものだと兼ねてから聞いていましたが、実際に試したことはありませんでした。

Auth0はいわゆるIDaasと呼ばれる認証プラットフォームです。サービス開始からもう久しく、DeveloperIOにも既に数多くの記事がありますね。
https://dev.classmethod.jp/tags/auth0/

この記事では、ノーコードでAuth0のデフォルト認証方法であるメールアドレス+パスワード認証が動くところを確認することができます。

前提

アカウント作成

• アカウント作成と同時にテナントも作成されます。
• テナントが何かについては以下を参照ください。

ローカル実行環境

• Mac Ventura M2
• Node.js v20.5.0
• npm 9.8.0

今回は、Auth0から提供されているSPAのVanilaJSのサンプルプログラムを利用します。

パスワード認証

アプリケーション作成

テナント管理画面から
Applications → Create Application → QuickStart → Single-Page App → JavaScript → Download Sample

と操作し、アプリケーションと対応するサンプルプログラムをダウンロードします。

Callback URLを設定します。

Callback URLとは、ログイン後に表示したい画面のURLです。 今回は http://localhost:3000/ を設定します。

テナント管理画面から
Applications → Default App → Settings → Allowed Callback URLs, Allowed Logout URLs → Save Changes

なぜCallback URLが必要かについては後日また記事化しようと思います（もう世の中に沢山ありますが）

サンプルプログラムを起動します。

さきほどダウンロードしたファイルを解凍して 01-login に移動

# path/to/01-login
$ npm i
$ npm run start

適当なユーザーアカウントを作成してログインしてみます。

http://localhost:3000にアクセスして
Login → サインアップ → 適当なメールアドレス, パスワード → アプリの認証許可

これでログインできました。物凄く簡単ですね！

まとめ

簡単なのは理解できましたが、このまま実際の開発に組み込むことはできません。 ログイン画面はどの程度カスタマイズできるのか、ユーザーやトークンがどのように管理されているのか、二要素認証やソーシャルログイン等

引き続き、記事化しようと思います。

次回は、パスワードレスの認証をやってみます。