-
728x90
[Next] Next.js13 Next Auth로 구글 로그인 구현하기 (1)
Next.js에서 Next Auth 라이브러리를 사용해서 구글, 카카오, 라인 등 로그인 기능을 쉽게 구현할 수 있다. 1. 설치 터미널에 아래 명령어 입력해서 라이브러리 설치하기 npm install next-auth 2. API Route 추
jisilver-k.tistory.com
1. SessionProvider
Next.js 13에선 _app.js대신 layout.js 또는 tsx파일에 <SessionProvider /> 컴포넌트를 최상위 레벨에 감싸야한다.
근데 직접 감싸는것보다 SSR 컴포넌트를 분리해서 따로 컴포넌트를 만들어서 감싸주거나 최상단에 'use client' 코드를 넣어하는데
컴포넌트를 따로 만들어서 한 번 더 감싸주기 위해 Provider.tsx 파일을 생성했다.
// Provider.tsx 'use client'; import { SessionProvider } from "next-auth/react" interface Props { children: React.ReactNode } function Provider({ children }: Props) { return ( <SessionProvider> {children} </SessionProvider> ) } export default Provider// layout.tsx import './globals.css' import Provider from './Provider' export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body> <Provider> {children} </Provider> </body> </html> ) }2. useSession
useSession훅은 사용자 세션 정보를, signIn은 로그인, signOut은 로그아웃 할 수 있도록 유도하는 함수로 모듈을 불러오기
'use client' import { useSession, signIn, signOut } from "next-auth/react" function Login() { const { data: session } = useSession() const router = useRouter(); return ( <div> <button onClick={() => signIn("google", { callbackUrl: "/" })} /> </div> ) } export default LoginuseSession()을 호출해서 사용자 세션 정보 가져오기.
로그인 버튼을 만들고 클릭 시 signIn()함수 호출, 파라미터로 소셜 정보 'google' 넣어주고
뒤에 callbakUrl을 넣어주면 리다이렉트 할 수 있다.
로그인 시 세션 정보를 확인해보고 싶을 때 console로 session을 찍어보면 잘 가져와진다.
'React, Next' 카테고리의 다른 글
[Next] Firebase Storage 이미지 업로드 / URL 받아오기 (0) 2023.09.12 [Next] Next.js에 Firebase 연동하기 (0) 2023.09.05 [Next] Next.js13 Next Auth로 구글 로그인 구현하기 (1) (0) 2023.09.01 [Next] 이미지 최적화 next/image (0) 2023.08.25 [Next] Next.js 13 서버 컴포넌트 (0) 2023.08.22 댓글
Written by Jieun
👩🏻💻 내 마음대로 Today I Learned
