Clerk

Clerk이란?

Next.js, React, Vue 등에서 간편하게 인증(Authentication) 기능을 추가할 수 있는 서비스
Firebase Auth, Supabase Auth 같은 인증 솔루션과 비슷하지만, Next.js와의 강력한 통합 기능을 제공
Next.js와 완벽하게 연동 가능 (App Router & Pages Router 지원)
소셜 로그인 지원 (Google, GitHub, Facebook, Discord 등)
비밀번호 없는 로그인 (Magic Link, OTP 지원)
2FA (Two-Factor Authentication) 지원
백엔드 없이도 작동 (완전한 BaaS - Backend as a Service)
RBAC (Role-Based Access Control) 지원 → 관리자/유저 역할 설정 가능
React Hooks 및 Context 제공 → 간단한 코드로 인증 기능 추가 가능

1. 로그인

2. dashboard -> Create application

원하는 옵션을 선택한다.

3. 내 프로젝트에 설치

npm install @clerk/nextjs

// bun
bun add @clerk/nextjs

4. 프로젝트 루트에 .env.local 파일을 만들고, 사진 2번 Set yout environment variables 옆 API 키를 복사 붙여넣기

// .env.local

// ex)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_YWxsb3dpbmctb3Bvc3N1bS04LmNsZXJrLmFjY291bnRzLmRldiQ
CLERK_SECRET_KEY=sk_test_E99lS7123413244hdfsfaTbY1b34212341234124

5. .gitignore에 .env*가 있는지 확인하고 없으면 적어서 github에 올라가지 않도록!!!

# env files (can opt-in for committing if needed)
.env*

6. src/에 middleware.ts 파일 생성 후, 사진 3번 Update middleware.ts 붙여넣기

// src/middleware.ts

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

export default clerkMiddleware();

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
};

7. html 태그를 ClerkProvider로 감싸주기

<ClerkProvider afterSignOutUrl='/'> : 로그아웃 후 라우트 경로 지정 가능

// /src/app/layout.tsx

import {
  ClerkProvider,
  SignInButton,
  SignedIn,
  SignedOut,
  UserButton
} from '@clerk/nextjs'
import './globals.css'
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <SignedOut>
            <SignInButton />
          </SignedOut>
          <SignedIn>
            <UserButton />
          </SignedIn>
          {children}
        </body>
      </html>
    </ClerkProvider>
  )
}

8. 가이드 보면서 구현하기

우측 상단 ? 클릭 후 Documentation 클릭

9. 사이드 메뉴 중 Guides -> Add a custom sigin-in-or-up 으로 이동

10. 가이드에 따라 폴더 생성 (/src/app/sign-in/[[...sign-in]]/page.tsx)

관리를 용이하게 하려면 (auth)로 묶어서 폴더 생성 (/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx)

// src/app/(auth)/sign-in/[[...sign-in]]/page.tsx

"use client";

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

export default function SignInPage() {
  return (
    <div className="flex justify-center items-center h-screen">
      <SignIn />
    </div>
  );
}

// src/app/(auth)/sign-up/[[...sign-up]]/page.tsx

"use client";

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

export default function SignUpPage() {
  return (
    <div className="flex justify-center items-center h-screen">
      <SignUp />
    </div>
  );
}

10.1 모든 경로를 보호해야하는 어플리케이션의 경우 middleware.ts를 업데이트

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

const isPublicRoute = createRouteMatcher(['/sign-in(.*)'])

export default clerkMiddleware(async (auth, request) => {
  if (!isPublicRoute(request)) {
    await auth.protect()
  }
})

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}

11. .env.local 환경변수 업데이트

// .env.local

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

(우측 상단으로 박스가 이동해 있으므로) (auth)폴더를 만들었다면 layout 잡아주기

// src/app/(auth)/layout.tsx

interface LayoutProps {
  children: React.ReactNode;
}

const Layout = ({ children }: LayoutProps) => {
  return (
    <div className="min-h-screen flex items-center justify-center">
      {children}
    </div>
  );
};

export default Layout;

12. 모든 단계를 마치면 아래 화면이 나온다.

13. 로그인 관련 기능을 다양하게 제공한다.

Clerk WebHooks 적용하기

application을 선택한 후 configure -> Developers의 Webhooks 선택 -> Add Endpoint

저작자표시 동일조건 (새창열림)

'JavaScript > Next' 카테고리의 다른 글

Drizzle ORM (0)	2025.02.12
Neon (0)	2025.02.12
ShadCN/UI & Lucide React 사용하기 (0)	2025.02.12
[Next] next 시작하기(폴더 구조, use client와 server) (0)	2025.02.12
[Next/SpringBoot] Next와 Spring 연동하기 (1)	2025.01.24