원래 회사에서 사용자 인증 ,권한 관리 서비스로 사용하던 IDaaS(Identity-as-a-Service)는 auth0였는데,
비용 문제 등등 해서 Clerk로 변경을 할 수 있다고 해서, 일단 전체 변경했던 부분을 정리해본다!
이 회사에서 쓰는건 죄다 한글문서는 거의 존재하지 않았는데 Clerk도 마찬가지였다 :O
개인적으로 문서도 auth0에 비해 훨씬 깔끔하고
UI컴포넌트도 다양하고 설명도 잘 되어 있어서 적용하는데 문서만으로 충분했다
🔗 QuickStart 🔗 공식문서 > 🔗 UI컴포넌트 관련 페이지 >
참고로 저는 app router 기반으로 설정한부분을 정리해둡니다.
( Clerk Dashboard 설정, 가입과 nextjs는 되어 있는걸로 생각하고 넘어갑니다 )
1. Install Clerk 설치
npm install @clerk/nextjs2. Setup .env
env파일을 설정해준다.
루트경로에서 .env.local
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<YOUR_CLERK_PUBLIC_KEY>
CLERK_SECRET_KEY=<YOUR_CLERK_SECRET_KEY>
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
3. Provider 삽입
루트 레이아웃 파일에 <ClerkProvider> 추가하기 🔗 ClerkProvider docs
/app/layout.tsx
import React from "react";
import { ClerkProvider } from "@clerk/nextjs";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
</head>
<ClerkProvider>
<body>{children}</body>
</ClerkProvider>
</html>
);
}ClerkProvider는 서버컴포넌트이니, 이 부분과 위 코드 참고해서 본인 코드에 붙여 넣으면 된다!
4. middleware 추가
루트경로에서 middleware.ts 혹은 middleware.js 🔗middleware docs
import { authMiddleware } from "@clerk/nextjs";
export default authMiddleware();
export const config = {
matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};로그인 이전, 이후 등 에 middleware에서 설정할 수 있는 내용이 있으니 필요하면 문서에서 확인하는게 좋다.
afterAuth, apiRoutes, beforeAuth, publicRoutes 등등 옵션이 많다.
위 코드가 기본으로 제공하는 코드고, 본인이 특정 경로 접근 등의 처리가 필요하면 추가해서 사용하면 됨!
아래 코드는 afterAuth를 추가한 부분이다.
import { authMiddleware, redirectToSignIn } from '@clerk/nextjs';
export default authMiddleware({
afterAuth(auth, req, evt) {
if (!auth.userId && !auth.isPublicRoute) {
// 인증 안된 유저 처리!
return redirectToSignIn({ returnBackUrl: req.url });
}
}
});
5. Sign-in, Sign-up 페이지 추가
파일을 경로에 맞게 생성하고, 아래코드들을 넣어주면 이미지처럼 페이지에 컴포넌트가 추가됩니다!
css 설정이 필요할경우 부모element를 하나 감싸주고 그 element에 스타일을 주면 됨
/app/sign-up/[[…sign-up]]/page.tsx
import { SignUp } from "@clerk/nextjs";
export default function Page() {
return <SignUp />;
}
/app/sign-in/[[…sign-in]]/page.tsx
import { SignIn } from "@clerk/nextjs";
export default function Page() {
return <SignIn />;
}
6. Sign-in, Sign-up, Sign-out 버튼 추가
원하는 위치에 넣어주면 된다!
아래는 베이직한 사용 방법이니
Sign up을 모달로 사용하는 옵션이라던가, custom 사용법은 문서에서 확인하는게 좋다.
// Sign in
import { SignInButton } from "@clerk/nextjs";
export default function Home() {
return (
<div>
<h1> Sign in </h1>
<SignInButton />
</div>
);
}
// Sign up
import { SignUpButton } from "@clerk/nextjs";
export default function Home() {
return (
<div>
<h1> Sign up </h1>
<SignUpButton />
</div>
);
}
// Sign out
import { SignOutButton } from "@clerk/nextjs";
export default function Home() {
return (
<div>
<h1> Sign out </h1>
<SignOutButton />
</div>
);
}
7. UserProfile 페이지 추가
필수는 아니고 이번에 제 경우에 필요해서 추가한 내용입니다.
위에서 페이지 만든것과 똑같이 코드 넣어주면 아래 이미지처럼 페이지가 생성되어
따로 유저정보 페이지를 만들어주지 않아도 탈퇴, 로그인관리까지 내부에서 다 가능해 편리합니다!
/app/user-profile/[[...user-profile]]/page.tsx
import { UserProfile } from "@clerk/nextjs";
const UserProfilePage = () => (
<UserProfile path="/user-profile" routing="path" />
);
export default UserProfilePage;
기존 코드 갈아끼우는거라 이래저래 하루를 꼬박 갈아 넣었는데
정작 기존 유저정보랑 연동이 안되서 테스트는 못한다 : X
사용할지 안할지 모르지만
불금과 주말 갈아넣은게 아까워서 정리해둔다.
token등 세팅은 해뒀으니 문제 없기를......
혹시나 내 뒤에 누군가가 clerk를 적용하게 된다면 도움이 되었음 좋겟다 : )
✔ 참고
https://whateverittech.medium.com/authentication-nextjs-13-with-clerk-b4048d9d4949
'FrontEnd' 카테고리의 다른 글
| vscode 테마 적용이 갑자기 안되는 경우 (0) | 2022.11.17 |
|---|---|
| 프록시 패턴, 프록시 서버, CORS, 이터레이터 패턴 간단 정리 (0) | 2022.11.17 |
| [Storybook] 테마&로고 변경 , 공통 스타일 적용, 파비콘 변경 (0) | 2022.09.01 |
| [알고리즘] 탐욕, 그리디 (greedy) (0) | 2022.09.01 |
| [자료구조] 트라이 (Trie) (0) | 2022.08.26 |
