Next.js Auth0 Login

yarn add @auth0/auth0-react

_app.js
import { Auth0Provider } from "@auth0/auth0-react";

function MyApp({ Component, pageProps }) {
  // 👇 Auth0コンソールで確認
  return (
    <Auth0Provider
      domain="xxx.jp.auth0.com"
      clientId="xxx"
      redirectUri="http://localhost:3000/"
    >
      <Component {...pageProps} />
    </Auth0Provider>
  )
}

export default MyApp

index.js
import { useAuth0 } from "@auth0/auth0-react";

export default function Home() {
  const LoginButton = () => {
    const { loginWithRedirect } = useAuth0();

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

  return (
    <div>
        <LoginButton/>
    </div>
  )
}

Allowed Callback URLsとAllowed Web Originsを自分の開発環境と同じように設定しておく。