My Boundary As Much As I Experienced

Convex & Clerk로 next.js 인증기능 연동하기 (Next.js 14) 본문

FrontEnd/Next.js

Convex & Clerk로 next.js 인증기능 연동하기 (Next.js 14)

Bumang 2024. 2. 18. 23:40

파이어베이스를 쓰려고 했는데, 지금 보는 강의에서 Convex를 사용하길래 한 번 사용해봤다.

 

 

convex란?

https://www.convex.dev/

 

Convex | The fullstack TypeScript development platform

The backend application platform with everything you need to build your product.

www.convex.dev

Convex
Convex is a Backend Application Platform that keeps you focused on building your product. Convex Functions, Database, File Storage, Scheduling, and Search fit together cohesively, and are accessible from client libraries for your favorite environment. Everything in Convex is live and realtime.

 

- Convex는 supabase/firebase와 유사한 백엔드 어플리케이션.

- Rust로 작성되어 firebase보다 빠르다.

- 그러나 firebase처럼 배포까지 지원하지 않는다.

- 블록체인 커뮤니티에서 좀 많이 쓰인다고 한다. 그들에게 굳이 선호되는 이유가 있나?

 

 

Clerk란?

https://clerk.com/

 

Clerk | Authentication and User Management

The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”.

clerk.com

convex와 함께 사용하기 좋은 인증 라이브러리로 Clerk가 있다.

- 새로 나와 해외에선 인기가 꽤 높아지고 있는 인증 라이브러리. (NextAuth의 경쟁자)

- 기능

  - 여러 소셜 로그인, 이메일 로그인 기능을 제공한다.

  - 회원 간의 권한 조정 기능도 제공한다.

  - 조직(organization) 기능을 제공한다.

  - 계정 설정, 프로필 변경, 이름 변경, 팀 변경 등 Auth와 관련된 모든 기능들을 제공한다. (대박)

 

사진이 조금 짤렸지만.. 빌트인 유저버튼과 모달이다. 별도로 모달 구현도 안했는데 이 정도 퀄리티의 작업물을 쓸 수 있다.
계정 설정도 내가 마크업하거나 기능 구현한거 1도 없다. 인증 기능뿐만 아니라 라이브러리가 제공하는 UI도 유려하다.

 

Clerk 사용법

사용방법은 JSX문법에 맞춰져 있다.

1. 상위 루트에 <ClerkProvider></ClerkProvider>로 앱을 감싼다.

2. 그 하위 페이지 들에서 <AuthLoading></AuthLoading>, <Authenticated></Authenticated> 등 컴포넌트 안에 알맞는 화면들을 넣으면 된다.

 

그러면 로그인 버튼부터 계정 설정, 로그아웃 등 모든 세부 기능들을 하위 컴포넌트에서 꺼내쓸 수 있다! (위에 올린 UI 들을 그냥 쓸 수 있다.) 기본적으로 login인증 시간이 조금 느린거 같긴한데 로딩 애니메이션도 손쉽게 설정할 수 있어서 좋다.

 

 

Clerk 사용 예시

provider/convex-client-provider.tsx

app 폴더 상에 위치하지 않고 따로 root 상에 provider란 폴더를 만들어서 convex-client-provider.tsx를 생성하였다.

"use client";

import { ClerkProvider, useAuth } from "@clerk/nextjs";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { AuthLoading, Authenticated, ConvexReactClient } from "convex/react"; // 상태들과 convex client를 임포트
import { Loading } from "@/components/auth/loading";

interface ConvexClientProviderProps {
  children: React.ReactNode;
}

const convexUrl = process.env.NEXT_PUBLIC_CONVEX_URL!; // convex 계정을 만들면 convexUrl을 제공해준다.

const convex = new ConvexReactClient(convexUrl); // 클라이언트 초기화

export const ConvexClientProvider = ({ children }: ConvexClientProviderProps) => {
  return (
    <ClerkProvider>
      <ConvexProviderWithClerk useAuth={useAuth} client={convex}>
        <Authenticated>{children}</Authenticated> // 인증됐을때만 화면을 보여주고
        <AuthLoading> // 인증 중일 땐 로딩 컴포넌트를 보여줬다.
          <Loading />
        </AuthLoading>
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
};

 

 

 

layout.tsx

ConvexClientProvider를 제공했다.

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

 

 

유저 버튼 추가

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

export default function Home() {
  return (
    <div className="flex flex-col gap-y-4">
      <div>this is a screen for authenticated User</div>
      <div>
        <UserButton /> // 유저 버튼을 꺼내 쓰기
      </div>
    </div>
  );
}

유저버튼

 

 

지금은 Clerk가 제공하는 Authenticated와 AuthLoading을 사용했지만, 사실 Suspense를 생성해서 처리할수도 있을거 같다.

강의 프로젝트 개조할 때 Suspense를 적극 활용해야겠다.

'FrontEnd > Next.js' 카테고리의 다른 글

Next.js가 제공하는 <Link>태그와 <Image> 태그가 제공하는 브라우저 최적화 이점  (0) 2024.04.22
Next.js에서 Slug 활용하기 & Shallow Routing  (0) 2024.04.20
SSG(Static-Site-Generation)의 장점은 정적사이트를 CDN에 저장할 수 있다는 것  (0) 2024.04.19
프록시 사용을 고려해볼 여러 상황 (CORS에러 해결, API KEY 숨기기)  (1) 2024.03.27
Next.js) window is not defined 오류 해결법 (Dynamic Import)  (1) 2024.03.01
'FrontEnd/Next.js' Related Articles more