Windows 11で

ネタ元

事前準備

Nodeインストール - https://nodejs.org/ja/download/

アカウント及びテナント作成＆アプリケーション設定

https://auth0.com/jp で[無料トライアル]から登録＆テナント作成＆アプリケーション設定
1. Account Typeはother
2. I need advanced settingsをチェック
3. Tenant domainは適当に
4. RegionはJapan
作成されたテナントのダッシュボードが表示される
左メニューのApplicationsのApplicationsに進む
Default Appが作成済になっているのでDefault Appの中に入り、Settingsタブを開く
Basic InformationのDomain・Client IDの値をメモっておく ★1
Application PropertiesのApplication TypeをSingle Page Applicationに変える
1. これにより次項目のToken Endpoint Authentication MethodがNoneに固定される、こうなっていないと後でユーザー情報が表示されない (Auth0のログには「Unauthorized」と出ていたかも)
Application URIsのAllowed Callback URLs・Allowed Logout URLs・Allowed Web Originsにhttp://localhost:3000/を記入する
[Save Changes]を押下

アプリ作成

コマンドプロンプト起動
npx create-react-app my-react-auth0-sampleapp
cd my-react-auth0-sampleapp
npm install @auth0/auth0-react

src\index.js書き換え

src\index.js

import { createRoot } from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';

createRoot(document.getElementById("root")).render(
  <Auth0Provider
    domain="★1より"
    clientId="★1より"
    authorizationParams={{
      redirect_uri: window.location.origin
    }}
  >
    <App />
  </Auth0Provider>
);

redirect_uriがredirectUriとかになっているとAuth0がエラー画面を表示する (ログには「Unable to issue redirect for OAuth 2.0 transaction」と出ていたかも)

src\App.js書き換え

src\App.js

import logo from './logo.svg';
import './App.css';
import LoginButton from './login';
import LogoutButton from './logout';
import Profile from './profile';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <LoginButton></LoginButton>
        <LogoutButton></LogoutButton>
        <Profile></Profile>
      </header>
    </div>
  );
}

export default App;

src/login.js作成

src/login.js

import { useAuth0 } from '@auth0/auth0-react';

const LoginButton = () => {
    const { loginWithRedirect } = useAuth0();
    return <button onClick={() => loginWithRedirect()}>Log In</button>;
};

export default LoginButton;

src/logout.js作成

src/logout.js

import { useAuth0 } from '@auth0/auth0-react';

const LogoutButton = () => {
    const { logout } = useAuth0();

    return (
        <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
            Log Out
        </button>
    );
};

export default LogoutButton;

src/profile.js作成

src/profile.js

import { useAuth0 } from '@auth0/auth0-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;

実行

npm start
1. しばらくたつとブラウザが起動して http://localhost:3000 にアクセスする
[Log In]押下でAuth0のログイン画面に飛ぶのでそこからユーザー登録する
別ブラウザで http://localhost:3000 を開き、[Log In]押下でログインしてユーザー情報が表示されることを確認
[Log Out]押下でログアウトしてユーザー情報が表示されなくなることを確認

Auth0ダッシュボード

User ManagementのUsersから登録ユーザーを確認できる
MonitoringのLogsからログを確認できる
SettingsのGeneralタブのLanguagesからデフォルト言語を日本語とかに変更できる