React.js 認証認可

Reactで認証機能を簡単に実装する方法 - Auth0の導入手順

ReactにAuth0を導入する方法について説明します。

Auth0とは

Auth0は認証・認可のサービスです。以下のような特徴を持っています。

  • ユーザー認証の構築が簡単
    認証機能の実装を簡単かつ高速に行うことができ、認証機能の設定や管理を自分で行う必要がなくなります。
  • 多様な認証プロバイダに対応
    Google、Facebook、Twitter、GitHubなど、一般的な認証プロバイダに加え、企業向けのActive DirectoryやLDAPなどにも対応しています。
  • セキュリティに優れている
    2要素認証やSingle Sign-On(SSO)など、セキュリティに関する機能を多数提供しています。
  • マルチテナント機能が備わっている
    複数のクライアントを一元管理することができます。各クライアントごとに異なる認証設定を行うことができるため、複数のアプリケーションを開発する場合にも効率的に管理することができます。

前提条件

  • Node.jsとnpmがインストールされていること。
  • Reactの基本的な知識があること。

手順

  1. Auth0 アカウントの作成
    Auth0のサインアップページ( https://auth0.com/signup ) にアクセスし、必要な情報を入力して、アカウントを作成します。
  2. React アプリの作成
    Reactアプリを作成します。ここでは、create-react-appを使用します。

  1. Auth0 SDK のインストール
    Auth0 SDKとしてauth0-jsパッケージを使用しますので、npmでインストールします。

  1. Auth0 アプリケーションの作成
    Auth0のダッシュボードで、新しいアプリケーションを作成します。

    テナントを作成

    ダッシュボード(https://manage.auth0.com/dashboard )でテナントを作成します。

    アプリケーションを作成

    サイドバーの「Applications」からアプリケーションを作成します。「Application Type」はSingle Web Page Applicationを選択します。

    Domain, Client IDを作成

    後ほどReactアプリケーションで使用するDomainとClient IDを確認します。

    Redirect URIsを設定

    Auth0でログイン後やログアウト後にリダイレクトするURLを設定する必要があるので、以下のようにします。
    - Callback URLs : http://localhost:3000
    - Logout URLs : http://localhost:3000
    - Allowed Web Origins : http://localhost:3000

  2. React アプリに Auth0 を統合

    Auth0 SDKを初期化

    src/index.jsファイルで、次のようにアプリケーションにAuth0のプロバイダーを適用します。

ログインボタンを作成

ログインボタンをsrc/components/loginButton.jsに作成します。

ログアウトボタンを作成

ログアウトボタンをsrc/components/logoutButton.jsに作成します。

プロフィール情報を作成

ログインしたユーザのプロフィール情報をsrc/components/profile.jsに作成します。
useAuth0フックのuserにより認証されたユーザ情報を取得できます。

App.jsを編集

未ログイン時はログインボタンを表示して、ログイン時はログアウトボタンとプロフィール情報を表示するようにsrc/App.jsを編集します。
isAuthenticatedによって現在認証されているかどうかが返却されます。

動作テスト

npm startを実行しhttp://localhost:3000 にアクセスします。

ログイン後には次のような画面になっているのを確認します。

Auth0のダッシュボードのサイドバーの「User Management」の「Users」に認証済みのユーザ一覧が表示されるので確認します。

まとめ

この記事では、ReactにAuth0を導入する方法について紹介しました。
ReactにAuth0を導入することにより、認証機能を簡単に実装でき、セキュリティにも配慮したアプリケーションを開発することができます。是非、本記事を参考にして、ReactアプリにAuth0を導入してみてください。

参考

Auth0 公式ドキュメント(https://auth0.com/docs)
Auth0 React QuickStart(https://auth0.com/docs/quickstart/spa/react/01-login)

-React.js, 認証認可

© 2023 Shiro's secret base