Quick Starts => Single Page App を選択する。フロントで実行する場合にはこのサンプルプロジェクトをみる。サーバーサイドで実行する場合には Regular Web App もしくは Backend/API を選択する。


React Sample Project へのリンク

Get Your Application Keys

以下二つが auth0 と通信する際に必要になるキー。設定画面からみれる。

  • Domain
  • Client ID

Configure Callback URLs

auth0 を使った認証後に、アプリケーション内でユーザーを遷移させる先の URL。

また以下の説明を読むに、Allowed Callback URLs field にも同じ URL を入れ許可する必要があるようだ。

The callback URL for your app must be whitelisted in the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.

Configure Logout URLs

ログアウトした時に飛ばすパス。 全部をここに書く必要あり。また上記と同様に、ホワイトリストにも追加が必要。

API 実行側からは returnTo で指定する模様。

Configure Allowed Web Origins


Create a Sample Application

Auth0 SDK を使うバージョンではないっぽい。@auth0/auth0-spa-js を使うやつとのこと。

Content provier で auth0 関係の機能を提供するラッパーを作る

providing functions that allow the user to log in, log out, and information such as whether the user is logged in.

Restoring Login State with Social Providers


Users who are logged in with username/password will be silently reauthenticated automatically when the application reloads. No further action is needed for this type of login.

If you are using the classic Universal Login experience and would like users to authenticate using social identity providers (such as Google, Apple, Facebook, etc.), then you will need to configure those connections in your Auth0 Dashboard.

In the navigation menu, choose Connections - Social, and select the social connection you’d like to support. In the connection’s settings, click “How to obtain a Client ID?“ and follow the instructions to set up your own ID and secret.

If you are using the new Universal Login experience, the default enabled social connections will silently reauthenticate without additional configuration. However, you should still set up your own keys and avoid using default Auth0 development keys in a production app.


以下二つに開発時のパス?である http://localhost:3000 を追加する。しないとログインボタン押した時にエラー画面が出る。

  • Allowed Callback URLs
  • Allowed Web Origins,
  • Allowed Logout URL => ログアウトした時に遷移する先。これをいれないと auth0側の適当なページに移動してしまう。