목차
Next-auth v5 버전 설치
npm install next-auth@beta
next-auth v4 와 달라진 점
https://authjs.dev/guides/upgrade-to-v5
파일 세팅
시작 전 함께 보면 좋은 공식 문서
https://authjs.dev/reference/nextjs
src/auth.ts
import NextAuth from 'next-auth';
import KakaoProvider from 'next-auth/providers/kakao';
export const {
handlers: { GET, POST },
auth,
} = NextAuth({
pages: {
signIn: '/login',
},
providers: [
KakaoProvider({
clientId: process.env.AUTH_KAKAO_CLIENT_ID!,
clientSecret: process.env.AUTH_KAKAO_CLIENT_SECRET!,
}),
],
secret: process.env.AUTH_SECRET,
});pages 속성은 next-auth에서는 기본적으로 http://localhost:3000/api/auth/signin 경로에 로그인 페이지를 제공한다.
하지만 나는 내가 만든 로그인 페이지를 쓸 것이기 때문 signIn 경로를 /login 페이지로 적용해 준다는 뜻이다.
src/app/api/auth/[...nextauth]/route.ts
export { GET, POST } from '@/auth';
src/app/components/AuthSession.tsx
'use client';
import { SessionProvider } from 'next-auth/react';
type Props = {
children: React.ReactNode;
};
export default function AuthSession({ children }: Props) {
return <SessionProvider>{children}</SessionProvider>;
}클라이언트 환경에서 session을 사용하려면 SessionProvider로 감싸줘야 한다.
https://authjs.dev/reference/nextjs/react
src/app/layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import AuthSession from '@/components/AuthSession';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={inter.className}>
<AuthSession>{children}</AuthSession>
</body>
</html>
);
}모든 컴포넌트에서 사용하기 위해서는 위에서 만든 AuthSession을 최상단 layout.tsx에 감싸준다.
.env.loacal
AUTH_KAKAO_CLIENT_ID=카카오 REST API 키
AUTH_KAKAO_CLIENT_SECRET=카카오 Client Secret 키
AUTH_SECRET=아무 secret 키 만들어서 적으면 됨카카오 Client Secret 키는 따로 발급 받지 않으면 아무키나 적어주면 된다.
보안을 더 적용하고 싶으면 카카오 디벨로퍼 > 내 애플리케이션 > 카카오 로그인 > 보안에서 발급받아 쓰면 된다.
위 코드만으로 아래 이미지 처럼 복잡한 로직을 걸치지 않고 next-auth로 쉽게 로그인을 구현할 수 있다.
로그인하기
src/app/login/page.tsx
'use client';
import { signIn } from 'next-auth/react';
export default function LoginPage() {
const onClick = async () => {
await signIn('kakao', {
redirect: true,
callbackUrl: '/',
});
};
return (
<button className="border-2 p-2" onClick={onClick}>
카카오 로그인
</button>
);
}로그인이 성공하면 쿠키에 authjs.session-token 라는 이름으로 값이 들어오게 된다.
로그인 정보 가져오기
Server Component
import { auth } from '@/auth';
export default async function Home() {
const session = await auth();
console.log(session);
return <div>Home</div>;
}서버에서 동작하는 거라 브라우저에 찍히는 게 아니라 IDE 콘솔에 찍히는 거 주의하자.
Client Component
'use client';
import { useSession } from 'next-auth/react';
export default function Home() {
const { data: session } = useSession();
console.log(session);
return <div>Home</div>;
}
권한별로 접근 페이지 제어
로그인하지 않은 사용자가 /mypage 페이지에 접근할 경우, /login 페이지로 보내주기
src/middleware.ts
import { auth } from './auth';
import { NextResponse } from 'next/server';
export async function middleware() {
const session = await auth();
if (!session) {
return NextResponse.redirect('http://localhost:3000/login');
}
}
export const config = {
matcher: ['/mypage/:path*'],
};session 값을 가져와 로그인 여부를 검사하고 로그인하지 않은 유저가 config의 matcher에 적힌 경로로 들어가면 login 페이지로 리다이렉트 시킨다.
공식 문서
https://nextjs.org/docs/app/building-your-application/routing/middleware
로그아웃 구현
src/app/mypage/page.tsx
'use client';
import { signOut } from 'next-auth/react';
export default function MyPage() {
const handleLogOut = async () => {
await signOut({ redirect: true, callbackUrl: '/' });
};
return <button onClick={handleLogOut}>LogOutButton</button>;
}
깃허브 코드
https://github.com/msm0748/next-auth-5-study/commit/f913a78da704c6d78a337650ec322d95837a5650
유저 정보를 데이터베이스 저장하고 서버에서 jwt를 발급받아 쿠키에 심는 방법
https://msm1307.tistory.com/152
Next-auth v5 데이터베이스에 유저 정보 추가 - NestJS
만약 next에서 서버와 데이터베이스를 사용하려면 next-auth의 adapters 함수를 사용하면 되는데 나는 서버를 따로 두었기에 다른 방법으로 시도를 하려고 한다. next에서 풀스택으로 사용하려면 아래
msm1307.tistory.com
반응형
'Project > 코하루 마켓' 카테고리의 다른 글
| Next-auth v5 session 커스텀 - NestJS (0) | 2024.01.02 |
|---|---|
| Next-auth v5 데이터베이스에 유저 정보 추가 - NestJS (4) | 2023.12.28 |
| Nextjs 공통 레이아웃 만들기 (0) | 2023.12.12 |
