Auth0チュートリアルをReactで

Windows 11で

# ネタ元

1. https://zenn.dev/mikakane/articles/react_auth0_tutorial
1. https://auth0.com/docs/quickstart/spa/react/interactive

# 事前準備

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

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

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

# アプリ作成

1. コマンドプロンプト起動
1. ```npx create-react-app my-react-auth0-sampleapp```
1. ```cd my-react-auth0-sampleapp```
1. ```npm install @auth0/auth0-react```
1. 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>
    );
    ```
    1. redirect_uriがredirectUriとかになっているとAuth0がエラー画面を表示する (ログには「Unable to issue redirect for OAuth 2.0 transaction」と出ていたかも)
1. 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;
    ```
1. 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;
    ```
1. 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;
    ```
1. 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;
    ```

# 実行

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


# Auth0ダッシュボード

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