Next.js Auth0 Login

updated Oct 2, 2021created Oct 2, 2021
bash
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 URLsAllowed Web Originsを自分の開発環境と同じように設定しておく。

Auth0 origin callback