Website URL:  <テナントのドメイン>

Callback URI : <テナントのドメイン>/login/callback

mkdir frontend

cd frontend

$ yarn create react-app .

$ touch .env

// ローカルで起動時のポート
PORT=3001
// auth0のテナントのドメイン
REACT_APP_AUTH0_DOMAIN=[Domain]
// auth0のフロントエンドアプリケーションのClient ID
REACT_APP_AUTH0_CLIENT_ID=[Client ID]

yarn add @auth0/auth0-react

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Auth0Provider } from '@auth0/auth0-react';

const domain = process.env.REACT_APP_AUTH0_DOMAIN || '';
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID || '';
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);

root.render(
  <Auth0Provider
    domain={domain}
    clientId={clientId}
    redirectUri={window.location.origin}
  >
    <App />
  </Auth0Provider>
);

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

function App() {
  const { user, isAuthenticated, loginWithRedirect, logout } = useAuth0();
  // 必要な機能をインポート
  console.log(user);
  return (
    <div className='App'>
      <div style={{ padding: '20px' }}>
        <h2>ログインボタン</h2>
        <button onClick={() => loginWithRedirect()}>ログイン</button>
        <h2>ログアウトボタン</h2>
        <button onClick={() => logout()}>ログアウト</button>
        <h2>ログイン状態</h2>
        {isAuthenticated ? <p>{user.name}</p> : <p> ログアウト</p>}
      </div>
    </div>
  );
}

export default App;