【Auth0】公式サンプルアプリケーション（Node.js）でサインアップとログインを試す

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

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


# アプリケーションの準備
## アプリケーションの登録

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

![スクリーンショット 2020-06-11 17.06.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490013/24c2d109-8ba0-71a9-7834-2e42cb74ca4b.png)

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

![スクリーンショット 2020-06-11 17.09.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490013/429a1073-ca50-cec4-acf3-1d0726643c0b.png)

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

## 公式サンプルのダウンロード

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

![スクリーンショット 2020-06-11 17.10.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490013/a992d790-0ac2-437d-690f-235c53be0884.png)

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

![スクリーンショット 2020-06-11 17.11.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490013/d5cfba68-9c2c-679f-8ed7-16b9bdf390fd.png)


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

![スクリーンショット 2020-06-11 17.12.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490013/49ede376-1a47-045c-4211-7682669e48ac.png)

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

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

![スクリーンショット 2020-06-12 15.17.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/0808951d-17c3-0cbc-d2e5-714b511407db.png)

```:.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
```

![スクリーンショット 2020-06-11 17.13.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490013/97786153-8ed5-ddb8-3dfc-7cb3a4bcf5d5.png)

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

# 動作確認
## アプリケーションの起動

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

```
npm install
npm start
```

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

```:LinuxまたはMacOSの場合
sh exec.sh
```

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

![スクリーンショット 2020-06-11 18.31.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490013/93deeafd-3498-5004-8536-38d3b9e14a98.png)

## サインアップ

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

![スクリーンショット 2020-06-12 13.39.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/f8e5823d-beb8-d192-ed68-16a6eabd1326.png)

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

![スクリーンショット 2020-06-12 13.39.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/9e9d0ea1-72ad-b41d-5a77-43b7cb870c8d.png)

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

![スクリーンショット 2020-06-12 13.57.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/6bff3007-7d35-0061-f2db-38b82fda13d8.png)

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

![スクリーンショット 2020-06-11 18.31.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/e2c806c3-0c6d-0ebb-60ca-c57fde2952b8.png)


## ログイン 

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

![スクリーンショット 2020-06-11 18.41.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/01ff0163-cfd8-a22f-e867-78f3214fe0b7.png)

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

![スクリーンショット 2020-06-12 13.57.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/10e512bf-f511-e139-9926-aa53d2b3d392.png)

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

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