はじめに

Auth0のNode.jsサンプルアプリケーションを動かしてサインアップとログインをします。

サンプルアプリケーションは以下で公開されています。
https://github.com/auth0-samples/auth0-nodejs-webapp-sample

アプリケーションの準備

Auth0の管理画面にアクセスしApplicationsの画面を開きます。

Applicationsの画面の右上に表示されているCREATE APPLICATIONを押してアプリケーションを作成します。
表示されたアプリケーション作成画面に任意のアプリケーション名を入力しRegular Web Applicationsを選択します。

CREATEボタンを押すと管理画面に作成したアプリケーションが表示されます。

アプリケーションを登録すると表示されるQuick Start画面の中からNode.jsのアイコンを選択します。

Node.js用のチュートリアルのページが表示されます。
本記事ではNode.jsのサンプルアプリケーションを利用するのでチュートリアル先頭右側に表示されているDOWNLOAD SAMPLEからソースコードをダウンロードします。

DOWNLOAD SAMPLEを押すとサンプルアプリケーションを動かすまでの手順が表示されます。以降この内容の通り管理画面で設定を行います。
一番下のDOWNLOADを押してソースコード（zipファイル）をダウンロードし、任意の場所に解凍します。

本記事の流れの通りにサンプルアプリケーションのソースコードをダウンロードした場合はアプリケーションの環境変数として読み込まれる.envファイルにすでに適切な値が設定されています。
別ページからソースコードをダウンロードした場合は.envファイルに自分で値を設定する必要があります。

設定する値は登録したアプリケーションのSettingsタブに表示されるBasic InfomationのDomain・Client ID・Client Secretになります。

.envファイル例

AUTH0_CLIENT_ID=ABCDEFGHI...
AUTH0_DOMAIN=abc.auth0.com
AUTH0_CLIENT_SECRET=ABCDEFGHI...

Settingsタブを開きApplication URIsの設定を行います。

Allowed_Callback_URLs

http://localhost:3000/callback

Allowed_Logout_URLs

http://localhost:3000

これでアプリケーションの準備は完了です。

ダウンロードしたサンプルアプリケーションの解凍先に移動してコマンドを入力します。
ローカルにインストールしているNode.jsで動かす場合はnpmコマンドを利用して起動します。

npm install
npm start

dockerを利用する場合はOSに合わせて以下のコマンドを入力します。

LinuxまたはMacOSの場合

sh exec.sh

Windowsの場合

./exe.ps1

ブラウザからhttp://localhost:3000にアクセスするとサンプルアプリケーションの画面が表示されます。

サンプルアプリケーションの画面のLog Inを押すとAuth0のログイン画面が表示されます。

初回はユーザーが登録されていないのでSign Upを選択してサインアップを行います。

登録するメールアドレスとパスワードを入力してSIGN UPを押すとサインアップが完了します。
サインアップが完了するとサンプルアプリケーションに戻りProfileのページが表示されます。

次は今サインアップしたユーザーでログインをしてみるので上部メニューのLog Outを押してログアウトをします。
ログアウトをするとサインアップする前と同じ画面が表示されます。

先ほど作成したユーザーでログインします。
サインアップしたときと同じようにLog Inを押してAuth0のログイン画面を表示させます。

メールアドレスとパスワードを入力してLOG INを押します。
ログインが成功するとサインアップのときと同じようにProfileのページが表示されます。

動作確認は以上で終わりです。

公式のサンプルアプリケーションを利用すると簡単かつ短時間でAuth0のサインアップとログインを体験することができます。
Auth0をまだ利用したことがないかたはぜひ試してみてください。