[Auth0] Auth0+React アプリケーションでクイックスタートやってみた

こんにちは。
ゲームソリューション部の西川です。

前回はバックエンド（Golang API）でクイックスタートを行い、APIでアクセストークンの検証を行う実装をしましたので、今回はアプリケーションに認証認可を追加していきます。
前回の記事はこちら。
https://dev.classmethod.jp/articles/auth0-golang-tutorial/

実装にはReactを使用していきます。
今回はアプリケーション側にてログイン処理ができること、および、前回作成したAPIとの繋ぎ込みができることがゴールになります。

アプリケーションの作成

Nameを入力した後、application typeの選択をします。
application typeは現状、以下の4種類から選択ができます。

1. Native
2. Single Page Web Applications（SPA）
3. Regular Web Applications（RWA）
4. Machine to Machine Applications（M2M）

今回はReactを使用するので、SPAを選択して作成します。

ここで、そもそも選択したアプリケーションの種類によって何が変わるのか、気になったので調べてみました。
少し脱線するので、詳細は下記のトグルを開いてください。

サンプルコードの確認

下記からサンプルコードのダウンロードを行います。

ダウンロードを押下すると、http://localhost:3000をAllowed Callback URLs、 Allowed Web Origins、 Allowed Logout URLsに入力するように言われるので、作成したアプリの設定画面から入力しておきます。
それぞれの説明は設定のページに記載があるので今回は省略します。

サンプルコードをダウンロード後、src/auth_config.jsonを確認すると以下のような感じになっています。

{
  "domain": "hoge.jp.auth0.com",
  "clientId": "hoge",
  "audience": "react-tutorial"
}

APIを作ったことがなければAUTH0_AUDIENCEが空欄になっているかと思うので、APIを作成して入力します。今回は事前に作成したreact-tutorialとします。
APIの作成方法などは前回の記事をご覧ください。

動作の確認

それではサンプルコードを立ち上げていきます。
下記のコマンドを実行します。

1. yarn install （パッケージのインストール）
2. yarn run dev （立ち上げ）

以下のように表示されていれば成功。

Compiled successfully!

You can now view auth0-react-sample in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.50.34:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

webpack compiled successfully

続いて、http://localhost:3000/に接続します。
以下のように画面が表示されていればOK。

右上のログインよりログインが行えます。

ダッシュボードより、ユーザを見に行くとログイン時に作成したユーザが追加されています。

APIとの繋ぎ込み

それでは、前回の記事で作成したAPIと繋ぎ込みを行っていきます。

1. アプリケーション側の修正

src/views/ExternalApi.jsにてhttp://localhost:3001で立ち上げたAPIサーバーに接続している実装箇所があるので、そちらを利用していきます。
接続先を書き換えます。

2. API側の修正

こちらで結構詰まってしまいました。
ブラウザ側でPreflight Requestにてリクエストを送信してしまうので、OPTIONSでリクエストが送られた際に、JWTが無いという旨のエラーが返ってきてしまい、後続のGETリクエストが送られないという状態になっていました。

JWTをチェックするミドルウェアの前でOPTIONSによるリクエストに204レスポンスを返すようにしたかったのですが、サンプルコードのまま綺麗な実装ができず試行錯誤していました。

そこで、Auth0ライブラリ内のCheckJWTメソッドの実装を確認したところ、validateOnOptionsというパラメータがbooleanで用意されており、こちらをfalseにすることで、メソッドがOPTIONSの場合スキップしてくれる処理がありました。

そのため、以下のようにjwtmiddlewareをNewするところでvalidateOnOptionsをfalseにしておくことで、問題なく動作するようになりました。

3. 実行

http://localhost:3000/に接続し、ログインするとExternal APIというタブが表示されているのでそちらに遷移し、Ping APIを押下します。

以下のようなメッセージが表示されていれば成功です。

さいごに

以上で、アプリケーション側でのログイン処理の実装と前回の記事にて作成したGolang APIと今回作成したReactアプリケーションの繋ぎ込みを行えました。

次回はAuth0の機能についてもう少し深掘りしたところを執筆していきたいと思います。