React / Auth0 の Tutorial
React Auth0 Tutorial
React アプリケーションで Auth0 を利用したアプリケーションの構築を行います。
この資料は、公式の React チュートリアルを実施するための参考ドキュメントです。
Auth0 のセットアップ
まずは、Auth0 側のセットアップを進めていきます。
Auth0 のアカウントをまだ作成していない場合は、 signup の画面からアカウントの作成を行なってください。
アカウントの作成が終わったら、ダッシュボードを開きます。
ダッシュボードでは、認証で利用するアプリケーションを作成することができます。
ダッシュボードの左メニューから、 Applications -> 「Create Application」のボタンをクリックします。
アプリケーションの名前を入力して、「Single Page Application」 を選択すれば、作成は完了です。
アプリケーションの画面で、Setting のタブを開き、以下の項目にこれから作成するサンプルアプリケーションのURL http://localhost:3000 を入力します。
- Allowed Callback URLs
- Allowed Logout URLs
- Allowed Web Origins
最後にページ下部の、「Save Change」ボタンを押すのを忘れずに！
これで Auth0 側のセットアップは完了です。
React アプリケーションの作成
続いて実際にコードを書きながらアプリケーションを作成していきましょう。
React の開発を進めるためには、 Node.js の実行環境が必要です。手元の PC でまだインストールが済んでいない場合は、先に Node.js のインストールを進めてください。
Node.js の実行準備ができたら、npx コマンドを利用して React アプリケーションのテンプレートを作成していきます。
以下のコマンドで、手元に React アプリケーションのサンプルをセットアップしましょう。
$ npx create-react-app my-react-auth0-sampleapp
コードの準備ができたら cd コマンドで階層を移動して npm start でアプリケーションを実行します。
$ cd my-react-auth0-sampleapp
$ npm start
ブラウザでアプリケーション URL http://localshot:3000 にアクセスして React のロゴが表示されたら、サンプルアプリの準備のセットアップは無事完了です。
このプロジェクトに Auth0 を用いた認証機能を追加していくために、コードをエディタで開いておきましょう。
Auth0 との接続
React で Auth0 を利用する場合、Auth0 の提供する SDK を利用するのが便利です。
以下の npm コマンドを実行して、まずは SDK のインストールを行なっておきましょう。
$ npm install @auth0/auth0-react
Auth0 を利用する場合 @auth0/auth0-react の提供する Auth0Provider を利用してアカウントとの接続を行います。
src/index.js を開いて、以下のような形で import 文と Auth0Provider の記述を追加します。
import ...
import { Auth0Provider } from "@auth0/auth0-react";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Auth0Provider
domain="dev-xxxxxxxxxxx.jp.auth0.com"
clientId="xxxxxxxxxxxxxxx"
redirectUri={window.location.origin}
>
<App />
</Auth0Provider>
</React.StrictMode>
);
Auth0Provider の domain と clientId の値は、Auth0 のアプリケーション設定で表示されている値を利用しましょう。
アプリケーションの Setting タブを開き、それぞれの値を確認することができます。
Tips : Auth0Provider について
Auth0Provider は 子要素のコンポーネントに Auth0Context を提供します。
アプリケーションの親要素に Auth0Provider を提供することで、それぞれのコンポーネントから 後述する useAuth0 フックを利用した認証操作が可能になります。
Login ボタンの追加
続いてアプリケーションにログインボタンを追加していきましょう。
まずは、ログインボタンのコンポーネントとして、src/login.js を作成します。
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";
const LoginButton = () => {
const { loginWithRedirect } = useAuth0();
return <button onClick={() => loginWithRedirect()}>Log In</button>;
};
export default LoginButton;
作成したコンポーネントを利用するために src/App.js に import 文と、LoginButton の記述を追加しましょう。
//import ...
import LoginButton from './login';
function App() {
return (
<div className="App">
<header className="App-header">
// ...
<a
// ...
>
Learn React
</a>
<LoginButton></LoginButton>
</header>
</div>
);
}
export default App;
画面にログインボタンが表示されたら、実際にボタンを押して認証の画面を開いてみましょう。
Auth0 のアカウントと正しく接続されている場合、ログインのフォームが画面に表示されるでしょう。
Auth0 との接続が確認できたら以下のアクションを試してみましょう。
- Signup できる
- シークレットモードで開いてログインできる。
ユーザ情報を表示する
続いて、画面にログイン中ユーザのプロフィールを表示してみましょう。
プロフィール表示用のコンポーネントとして、src/profile.js を作成します。
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";
const Profile = () => {
const { user, isAuthenticated, isLoading } = useAuth0();
if (isLoading) {
return <div>Loading ...</div>;
}
return (
isAuthenticated && (
<div>
<img src={user.picture} alt={user.name} />
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
)
);
};
export default Profile;
作成したコンポーネントを画面に表示するため、src/App.js に import 文と Profile コンポーネントの追加を行います。
//import ...
import Profile from './profile';
function App() {
return (
<div className="App">
<header className="App-header">
// ...
<a
//...
>
Learn React
</a>
<LoginButton></LoginButton>
<Profile></Profile>
</header>
</div>
);
}
export default App;
画面にログイン中ユーザの情報が正しく表示されたでしょうか？
シークレットモードに切り替えて異なるアカウントでのユーザログインを試しながら、アカウントごとに異なるユーザ情報が表示されることを確認してみましょう。
ログアウト
最後にログアウトの機能を実装しましょう。
ログアウトボタンのコンポーネントとして、src/logout.js を作成します。
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";
const LogoutButton = () => {
const { logout } = useAuth0();
return (
<button onClick={() => logout({ returnTo: window.location.origin })}>
Log Out
</button>
);
};
export default LogoutButton;
作成したコンポーネントを画面に表示するため、src/App.js に import 文と LogoutButton コンポーネントの追加を行います。
// ...
import LogoutButton from './logout';
function App() {
return (
<div className="App">
<header className="App-header">
// ...
<a
// ...
>
Learn React
</a>
<LoginButton></LoginButton>
<LogoutButton></LogoutButton>
<Profile></Profile>
</header>
</div>
);
}
export default App;
ログアウトのボタンを押下して、ログイン中のユーザ情報がクリアされるのを確認しましょう。
Auth0 のチュートリアル
Auth0 の公式ドキュメントでは、React 以外にも様々なアプリケーションフレームワーク向けのチュートリアルコンテンツが公開されています。
各種フレームワークごとに、様々な SDK も個別に用意されているため、普段利用しているフレームワークなどがあればぜひトライしてみてください。
Discussion