소개

Next.js×Auth0을 사용하여 로그인 기능을 만듭니다.

공식 페이지 가 제일 알기 쉽고, 간단했기 때문에 그쪽의 방법으로 진행해 갑니다.

필요한 것

1. Auth0 계정
2. npm install @auth0/nextjs-auth0

1. 계정을 만듭니다.

계정을 만든 후 Dashboard에서 Applications


애플리케이션 만들기



이름을 정하고 SPA를 선택

대시보드 페이지로 이동하면
설정



Allowed Callback URL http://localhost:3000/api/auth/callbackLogout URL http://localhost:3000로 설정합니다.

QuickStart 페이지로 이동하고 Next.js를 입력합니다.

2.Next.js

auth 설치

auth0을 설치합니다.npm install @auth0/nextjs-auth0

키 가져오기

루트 디렉토리에 .env.local 파일을 작성하고 다음 내용을 복사하십시오.

page/api 안에 auth/[...auth0].js 만들기

[...auth0].js

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

UseProvider 설정

` pages/_app.jsx 에 useProvider를 import합니다.

_app.jsx

import React from 'react';
import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

로그인 버튼, 로그아웃 버튼 만들기

<a href="/api/auth/login">Login</a><a href="/api/auth/logout">Logout</a>
클릭하면 로그인 페이지로 이동합니다.

참고로 한 페이지