static/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Auth0 React</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/babel-polyfill@6/dist/polyfill.min.js"></script>
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
    <script src="auth0-react.js"></script>
    <script type="text/babel" data-presets="es2015,es2016,es2017,stage-3,react">
      const { Auth0Provider, useAuth0 } = reactAuth0;
      const { useState } = React;

      const App = () => {
        const {
          isAuthenticated,
          isLoading,
          getIdTokenClaims,
          getAccessTokenSilently,
          getAccessTokenWithPopup,
          loginWithRedirect,
          loginWithPopup,
          logout,
        } = useAuth0();
        const [token, setToken] = useState(null);
        const [claims, setClaims] = useState(null);

        if (isLoading) {
          return <div>loading...</div>;
        }

        return isAuthenticated ? (
          <div>
            <button
              onClick={() => logout({ returnTo: window.location.origin })}
            >
              logout
            </button>
            <button
              onClick={async () => setToken(await getAccessTokenSilently())}
            >
              Get access token
            </button>
            <button
              onClick={async () => setToken(await getAccessTokenWithPopup())}
            >
              Get token with popup
            </button>
            <button onClick={async () => setClaims(await getIdTokenClaims())}>
              Get id_token claims
            </button>
            {token && <pre>access_token: {token}</pre>}
            {claims && (
              <pre>id_token_claims: {JSON.stringify(claims, null, 2)}</pre>
            )}
          </div>
        ) : (
          <div>
            <button onClick={() => loginWithRedirect()}>
              Login with redirect
            </button>
            <button onClick={() => loginWithPopup()}>Login with popup</button>
          </div>
        );
      };

      ReactDOM.render(
        <Auth0Provider
          domain="brucke.auth0.com"
          clientId="wLSIP47wM39wKdDmOj6Zb5eSEw3JVhVp"
          redirectUri={window.location.origin}
        >
          <App />
        </Auth0Provider>,
        document.getElementById('app')
      );
    </script>
  </body>
</html>