Next.js 외부인증 모듈 이용하기

Auth0 외부모듈을 이용한 회원가입/로그인 페이지 만들기

 

 

1. 프로젝트 생성

npx create-next-app with-auth0

모두 No!

 

2. Auth0 사이트 회원가입 후, 로그인

Auth0: Secure access for everyone. But not just anyone.

Auth0: Secure access for everyone. But not just anyone.

 

3. Auth0 내에서 프로젝트 생성

다음 화면에서 Next.js 선택

프로젝트가 생성되면, 샘플과 가이드가 있는 페이지로 이동하게 됩니다.

-- 로컬테스트 옵션 수정

Settings 에 콜백Url과 로그아웃 Url 을 추가합니다.

4. 키 추가

Next.js 프로젝트에 .env.local 파일을 만들고 가이드에 나온것처럼 키를 추가합니다.

AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='가이드값'
AUTH0_CLIENT_ID='가이드값'
AUTH0_CLIENT_SECRET='가이드값'

 

 

5. 모듈설치 auth0

yarn add @auth0/nextjs-auth

 

6. 파일작성

 

6.1 연동파일

@/pages/api/auth/[...auth0].js

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

export default handleAuth();

- 제공SDK

@/pages/api/auth/login

@/pages/api/auth/callback

@/pages/api/auth/logout

@/pages/api/auth/me

 

6.2 로그인 유지를 위한 파일 수정

@/pages/_app.js

import "@/styles/globals.css";
import { UserProvider } from '@auth0/nextjs-auth0/client';

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

 

6.3 로그인 페이지 작성

@/pages/index.js

import { useUser } from '@auth0/nextjs-auth0/client'

export default function Index() {
  const { user, error, isLoading } = useUser()

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

  if(error) {
    return <div>{error.message}</div>
  }

  if(user) {
    return (
      <div>
        <h1>Welcome back!</h1>
        <p>
          You're logged in with the following email address: {user.email}!
        </p>
        <a href="/api/auth/logout">Logout</a>
      </div>
    )
  }

  return (
    <div>
      <h1>Welcome, stranger!</h1>
      <p>
        Please <a href="/api/auth/login">Login</a>
      </p>
    </div>
  )
}

 

7. 테스트

 

잘됩니다! 후훗!

 

8. 로그인페이지가 맘에 안들떄!

auth0 페이지에서 branding 을 이용해 변경이 가능합니다!