Clerk를 사용해서 유저 정보 관리하기

Clerk라고 하는 유저 관리 플랫폼이 있습니다. 몇달 전에 뉴스레터에서 봤을 때는 이게 뭐지 싶었는데 요즘 듣고 있는 사이드 프로젝트 강의에서 사용했는데 번거로운 부분들을 많이 줄여줘서 재밌었습니다. 굉장히 직관적이고 편해서 제가 사용했던 컴포넌트들을 예시와 함께 소개합니다.

SignInButton

sign in page로 이동시키거나 modal을 띄워줍니다. docs

props

• fallbackRedirectUrl - user가 sign in한 후에 redirect되는 url
• signUpFallbackRedirectUrl - user가 sign up한 후에 redirect되는 url
• mode
  • redirect - sign in page로 redirect합니다.
  • modal - modal을 띄웁니다.

SignUpButton

sign up page로 이동시키거나 modal을 띄워줍니다. docs

props

• fallbackRedirectUrl - user가 sign up한 후에 redirect되는 url
• signInFallbackRedirectUrl - user가 sign in한 후에 redirect되는 url
• mode
  • redirect - sign up page로 redirect합니다.
  • modal - modal을 띄웁니다.

사용법

import { SignInButton } from '@clerk/nextjs'

export default function Home() {
  return (
    <div>
      <SignInButton />
    </div>
  )
}

각 컴포넌트는 아래와 같이 기본적인 UI를 제공해주는데

커스텀이 필요하면 wrapper 형식으로 사용하면 됩니다.

import { SignInButton } from '@clerk/nextjs'

export default function Home() {
  return (
    <div>
      <SignInButton>
        <button>Sign in with Clerk</button>
      </SignInButton>
    </div>
  )
}

SignedIn

유저 세션이 있을 때 렌더링되는 컴포넌트입니다. docs

SignedOut

유저 세션이 없을 때 렌더링되는 컴포넌트입니다. docs

ClerkLoaded

Clerk object가 로드된 상태를 보장하는 컴포넌트입니다. docs

ClerkLoading

Clerk object가 로딩중 일 때 렌더링되는 컴포넌트입니다. docs

UserButton

계정을 관리하거나 Sign out할 수 있는 버튼입니다. Clerk는 구글처럼 multi-session을 지원하기 때문에 계정간 전환도 가능합니다. docs

이 컴포넌트들을 종합적으로 아래와 같이 사용할 수 있습니다.

...
// 로딩 시에
<ClerkLoading>
 <div>loading</div>
</ClerkLoading>
// 로딩이 끝나면
<ClerkLoaded>
 // 유저 세션이 있다면
 <SignedIn>
  <UserButton afterSignOutUrl="/" />
 </SignedIn>
 //유저 세션이 없다면
 <SignedOut>
  <SignInButton
   mode="modal"
   fallbackRedirectUrl="/learn"
   signUpFallbackRedirectUrl="/learn"
   >
   <Button size="lg" variant="ghost">
    Login
   </Button>
  </SignInButton>
 </SignedOut>
</ClerkLoaded>
...

기존에는 예를 들어서, firebase를 쓴다고 하면 auth change를 watch해서 상태를 바꾸는 로직 등이 필요했는데 Clerk를 사용하면 그런 번거로운 작업들을 많이 줄일 수 있었습니다. 아직 초반부라 사용한 코드가 적었는데 나중에 user 정보를 어떻게 가져오고 어떻게 활용할 수 있을지 배울 수 있을 거 같아서 기대가 됩니다. 배우면 또 업데이트 해보겠습니다.