1. Next-auth란?
Next-auth는 Next.js에서 주로 사용하는 오픈 소스 인증 라이브러리이다.
소셜 로그인을 간단하게 구현할 수 있도록 도와주는 역할을 한다고 생각하면 된다.
google, kakao, facebook, instagram, naver 등 다양한 소셜 로그인을 지원한다.
2. 사용방법(구글 로그인 연결)
next-auth를 통해 구글 로그인 연결하는 방법을 알아보자.
1) 구글 key 발급
우선, 구글 로그인을 연결하기 위해선 OAuth ID와 비밀번호가 필요하다.
우선, 구글 API로 들어간 후, Oauth 동의 화면으로 들어간다.
위 사진을 클릭하면 해당 페이지로 이동된다.
그 후, 앱 이름, 지원 메일을 적고 저장 버튼을 클릭한다.
총 4페이지가 나오는데 * 표시되어 있는 것만 적고 넘어가도 상관없다.
그 후, 사용자 인증 정보 > 사용자 인증 정보 만들기 > OAuth 클라이언트 ID를 눌러준다.
그럼 이런 화면이 나오는데, 적용할 애플리케이션 유형을 선택해 준다.
필자는 웹 사이트에 적용할 거라 웹 애플리케이션을 선택해 줬다.
그럼 밑에 이런 창이 나올 것이다.
여기서 이름을 적어주고, 승인된 자바스크립트 원본에 URI 추가를 눌러 사용할 브라우저 주소를 적어준다.
우선 local에서 작업할 것이라면 localhost 주소를 적어주면 된다.
승인된 리디렉션 URI에는 웹 서버 요청에 사용할 주소를 적어주면 된다.
http://localhost:3000/api/auth/callback/google 를 적어주면 된다.
해당 주소는 next-auth 문서에 나와있다.
https://next-auth.js.org/providers/google
그 후 만들기를 누르면 ID와 비밀번호가 생성된다.
2) next-auth 연결
https://next-auth.js.org/getting-started/example
이제 발급받은 Id를 활용해 Next-auth 로그인을 연결해 보자.
npm install next-auth
우선 npm을 통해 next-auth를 설치해 준다.
//.env
GOOGLE_CLIENT_ID = ""
GOOGLE_CLIENT_SECRET = ""
그 후 .env 파일에 CLINET_ID와 CLIENT_SECRET를 설정해 준다.
ID에 아까 구글에서 발급받은 클라이언트 ID를 넣어주고, SECRET에 보안 비밀번호를 넣어주면 된다.
혹시 까먹었다면, 사용자 인증 정보 > OAuth > 다운로드를 클릭하면, 아이디와 비밀번호를 확인할 수 있다.
//pages > api > auth > [...nextauth].js
import GoogleProvider from "next-auth/providers/google";
...
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET
})
]
...
//app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
const handler = NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_OAUTH_ID || '',
clientSecret: process.env.GOOGLE_OAUTH_SECRET || '',
}),
],
});
export { handler as GET, handler as POST };
이제 googleProvier를 연결해 보자.
pages는 13.2 이하 버전에서, app은 13.2 이상 버전에서 사용하면 된다.
//src/context/AuthContext.tex
"use client";
import { SessionProvider } from "next-auth/react";
type Props = {
children: React.ReactNode;
};
export default function AuthContext({ children }: Props) {
return <SessionProvider>{children}</SessionProvider>;
}
//src/app/layout.tsx
<AuthContext>
<body>
<header>
<Navbar />
</header>
<main> {children}</main>
</body>
</AuthContext>
그 후 하위 컴포넌트에서 세션 정보를 받아오기 위해 최상단을 Provicer로 감싸줘야 한다.
우선, AuthContext를 만들고 이를 app/layout 페이지에서 적용시켜 준다.
import { useSession, signIn, signOut } from "next-auth/react";
export default funciton Navbar(){
const { data: session } = useSession();
return (
...
{session
? <Button text="Sign out" onClick={() => signOut()}/>
: <Button text="Sign in" onClick={() => signIn()}/>
}
...
)
이제 로그인을 사용할 컴포넌트에 적용시켜 보자.
next-auth/react에서 useSession, signIn, signOut을 가져와준다.
useSession은 해당 페이지에 로그인 세션이 되어있는지 체크해 주는 역할을 한다.
첫 번째 인자로 유저 정보를 return 해준다.
이를 활용해 유저 정보가 있다면 로그아웃 버튼을, 유저 정보가 없다면 로그인 버튼이 보이도록 설정해 준다.
그리고 각각 singOut, singIn 함수를 적용시켜 준다.
이제 버튼을 클릭하면 해당 함수가 실행되면서 자동으로 로그인, 로그아웃이 된다.
'front > next.js' 카테고리의 다른 글
| [Next.js] next-themes로 Nextjs에서 간단히 다크모드 구현하기 (feat. tailwind) (0) | 2024.05.16 |
|---|---|
| Headless CMS란? (feat. Sanity) (0) | 2024.02.21 |
| [Error] Next.js & styled-components, 새로고침 시 css 초기화 에러 발생 이유와 해결방법 (0) | 2023.02.01 |
