javascript mastery에 새로 뜬 클론코딩 중 스레드가 눈에 띄여서 한 번 도전해보기루 했다.
Next.js와 타입스크립트를 쓴다해서 냉큼~ 5시간 짜리지만 천천히 보면서 학습중이다.
사실 아직 1시간밖에 안봤찌만 벌써 고난;
https://youtu.be/O5cmLDVTgAs?si=h6mn8wllnyTw5lJe
로그인 기능은 멀로쓰지? 봤더니 Clerk이라는 라이브러리를 쓰는 듯 싶옸따
Clerk 공식 문서
Welcome to Clerk Docs | Clerk
Add complete user management to your application in minutes.
clerk.com
문서에 보면 친절하게 설명 잘 해놨음
물론 영어를 몰라서 걍 꾸역꾸역 했지만 ㅇㅇ
Next.js에서 적용하는 방법
오옹 React 외에도 여러가지 있나본데.. ?
암튼 사용해보러 ㄱㄱ
1. clerk 설치
npm i @clerk/nextjs
or
yarn add @clerk/nextjs
설치해주세요.
2. 대시보드 만들기
아무거나 로그인 ㄱㄱ
전 깃헙 연동했습니다
그럼 이렇게 대시보드 만들 수 있습니다.
어플의 이름을 써주고, 여러가지 간편로그인 할 수 있는 옵션들이 있어요!
전 구글이랑 깃허브 정도 했습니다.
그리고 생성하면
이런식으로 API key가 주어집니다!
3. 환경변수 설정하기
이렇게 주어진 API는 .env.local 파일에 복붙하면 됩니다
4. 레이아웃 감싸기
import { ClerkProvider } from '@clerk/nextjs'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<ClerkProvider>
<html lang="en">
<body>{children}</body>
</html>
</ClerkProvider>
)
}
이런식으로 ClerkProvider로 html를 감싸줘야해요!
import 잊지마시고요 ㅎㅎ
5. middleware.ts파일 만들기
중간에 ts파일을 만들어서 뭘 복붙하던데 뭔지 몰라서 gpt한테 물어봤따
authMiddleware는 Clerk for Next.js에서 제공되는 미들웨어 함수로, 웹 애플리케이션의 라우팅 경로에서 인증 및 권한을 관리하는 데 사용됩니다. 이 코드 스니펫은 Next.js 애플리케이션의 서버 사이드 코드에서 사용되며, Clerk를 사용하여 사용자의 로그인 상태를 확인하고, 특정 경로에 대한 접근 권한을 관리하는 데 도움을 줍니다.
대충 인증에 필요한 경로 설정하는 코드인가보다..
파일 위치는 env파일 칭구로 생성해주면 된다.
import { authMiddleware } from "@clerk/nextjs";
export default authMiddleware();
export const config = {
matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};
하지만 자바스크립트 아재는
퍼블릭이랑 이그노어를 구분지어서 설정해놨다
import { authMiddleware } from "@clerk/nextjs";
export default authMiddleware({
publicRoutes: ["/", "/api/webhook/clerk"],
ignoredRoutes: ["/api/webhook/clerk"],
});
export const config = {
matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};
요런식으루!
6. 로그인, 로그아웃 페이지 만들기
일단 auth폴더에 sign-in과 sign-up 폴더를 각각 만들어줬다.
오, 문서를 보니 굳이? 굳이 귀찮게
경로를
app/sign-up/[[...sign-up]]/page.tsxapp/sign-up/[[...sign-in]]/page.tsx
이런식으로 설정해야한다고 나와있네요
뭐 따라해야지 ^^;
요런식으로 각각 로그인과 로그아웃에 page.tsx를 생성해줍니당
그리고 아래의 코드를 붙여넣으면 끝!
🔒sign-in
import { SignIn } from "@clerk/nextjs";
export default function Page() {
return <SignIn />;
}
🔓sign-up
import { SignUp } from "@clerk/nextjs";
export default function Page() {
return <SignUp />;
}
그리고 여기서 .env 파일을 다시 가서 아래의 코드도 넣어줘야한다.
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=/
7. UserButton 추가하기
UserButton을 추가해서 로그아웃하면 설정 경로로 이동할 수 있게 해줍니당
import { UserButton } from "@clerk/nextjs";
export default function Home() {
return (
<div>
<UserButton afterSignOutUrl="/"/>
</div>
)
}
이렇게 해주면 기본적인 로그인 끝!
이런식으로 sign-in 페이지로 이동하면 깔끔한 UI를 확인할 수 있습니다 ㅎㅎ
요런식으로 구현할 수 있습니다~ 입맛에 맞게 커스텀하면 쓸만할듯?
