맨틀 이야기

Next.js: Clerk로 로그인 플로우 구현 본문

Frontend

Next.js: Clerk로 로그인 플로우 구현

jbilee 2024. 5. 31. 18:12

최근 간편한 authentication 솔루션으로 Clerk가 많이 보이고 있어서 한번 활용해 보기로 했다. 대부분의 메이져 프레임워크를 지원하고, 공식 문서도 잘 정리돼있어서 빠르게 시작할 수 있다.

 

마침 사용자 로그인 기능이 필요한 Next.js 프로젝트가 있어서 바로 @clerk/nextjs 패키지를 설치해 사용해봤다. Clerk 서비스 사용에 필요한 퍼블릭과 시크릿 키는 .env.local 파일에 추가하면 된다고 한다.

 

Clerk에서 제공하는 API를 사용하려면 우선 <ClerkProvider>를 wrap 시켜준다. 앱 최상위에 provider를 적용해 두면 모든 페이지에서 Clerk의 인증 관련 훅을 사용할 수 있게 된다.

import { ClerkProvider } from "@clerk/nextjs";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider>
      <html lang="ko">
        <body className={inter.className}>
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

 

사용자의 인증 상태나 계정 정보는 auth(), currentUser() 등의 함수로 읽을 수 있다.

 

* Next.js 환경에서는 Pages Router인지 App Router인지, 그리고 SSR인지에 따라 사용하는 함수가 다르다. App Router의 서버 컴포넌트에서 사용할 경우 auth()와 currentUser()를 쓴다, Pages Router일 경우 클라이언트단에서 useAuth()와 useUser() 훅을 쓰고 getServerSideProps 함수에서는 getAuth()를 쓴다.

 

미들웨어 설정

미들웨어를 설정해 두면 각 페이지마다 사용자의 로그인 상태를 읽는 코드를 추가하는 대신 미들웨어를 먼저 거쳐 한번에 확인할 수 있다. 미들웨어는 src 디렉토리에 middleware.ts 파일을 생성해 사용한다.

 

미들웨어를 통해 자동으로 특정 경로를 protect하려면 createRouteMatcher 함수에 보호할 경로를 전부 추가하고, 미들웨어가 실행할 함수에서 auth().protect() 메소드를 호출한다.

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";

const isProtectedRoute = createRouteMatcher(["/main(.*)", "/users(.*)"]);

export default clerkMiddleware((auth, req) => {
  if (isProtectedRoute(req)) auth().protect();
});

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

 

로그인창 컴포넌트

Clerk에서 제공하는 빌트인 로그인 컴포넌트(<SignIn />)는 디자인이 무난해서 UI에 큰 괴리감 없이 out-of-the-box 컴포넌트로 활용할 수 있다.

 

로그인 상태 컴포넌트

<SignedIn>과 <SignedOut>은 사용자의 로그인 상태에 따라 하위 컴포넌트를 보여주거나 숨길 수 있는 wrapper다. 로그인/로그아웃 버튼을 렌더링할 때 따로 auth 상태를 확인할 필요 없이 아래처럼 구현하면 된다.

import { SignInButton, SignOutButton, SignedIn, SignedOut } from "@clerk/nextjs";

export default function NavBar() {
  return (
    <SignedOut>
      <SignInButton />
    </SignedOut>
    <SignedIn>
      <SignOutButton />
    </SignedIn>
  );
}

 

<SignInButton />과 <SignOutButton /> 역시 Clerk에서 제공하는 컴포넌트다.

'Frontend' 카테고리의 다른 글

Vue 배우기 (3)  (0) 2024.06.06
Clerk metadata로 어드민 계정 롤 부여하기  (0) 2024.06.05
Vue 배우기 (2)  (0) 2024.05.30
Vue 배우기 (1)  (0) 2024.05.29
react-calendar 달력 커스터마이징하기  (0) 2024.05.12
'Frontend' Related Articles more