요즘은 소셜로그인이 대세다. 왠만한 곳들은 회원가입하기를 들어가보면 카카오톡, 페이스북, 구글 등의 소셜회원가입이 가능하다.
그중에서 오늘은 가장 쉽게 붙여볼 수 있는 github 로그인을 nextjs에 붙여보자
소셜로그인이라는건
예를 들면 철수가 내가 만든사이트(A.com)에 회원가입 페이지에 있는 '카카오톡으로 회원가입하기' 버튼을 누르면
카카오톡 아이디랑 비번을 넣어서 로그인 하라는 페이지를 보여주고,
거기서 철수가 카카오톡 아이디랑 비번을 입력하고 '카카오톡 로그인하기' 버튼을 누르면 카카오톡은 철수에게 '야 A.com에 님 정보 주는거 동의함?' 이라고 물어 볼 것이다.
거기서 동의를 하면 이제 철수의 카카오톡은 A.com에 철수의 이메일, 이름, access token 등의 정보를 넘겨주게 된다.
그러면 이것들을 가지고 회원가입 및 로그인 처리를 하면 그게 소셜로그인 중 카카오톡으로 로그인 하기이다.
그걸 대충 그림으로 보면 아래와 같다.
거의 모든 소셜로그인이나 회원가입이 위와 같은 방식이고 이럴때 사용자의 권한을 OAuth라고하며, 소셜로그인이나 회원가입을 붙이려는 사이트에서는 이 OAuth를 가져와서 구현하는 개념이다.
자자 거두절미하고, Github 로그인을 붙여보자.
환경은 NextJs v13, node v^18, React v^18 이며 Next-Auth라는 아주아주 기똥찬 라이브러리로 쉽게 구현해보자
1. Github OAuth 가져오기
깃헙에서 권한을 등록하고 가져와야한다.
1. 깃헙로그인 후 우측상단에 자기 프로필을 누르면 나오는 메뉴들 중 settings를 클릭하자.
2. 이동된 페이지 좌측메뉴 최하단에 'Developer settings'로 진입
3. 누가봐도 여기요 하고 손흔드는 메뉴로 진입
처음이면 긍정적으로 초록버튼을 누르자
개발중 또는 연습중일때는
로컬이 아니고 서비스하거나 배포할 사이트에는 Homepage URL에 해당 URL넣어주고
callback URL도 원하는 URL입력해주고 등록하기 버튼 누르자
그러면 다음과 같은 화면으로 넘어 갈껀데
비번 보여주는 버튼도 누르고 인증과정 거치면
자 이제 발급이 끝났으니 id와 비번을 까먹지 않게 어디 꼭 적어두자
2. Next-Auth로 연결하기
NextAuth.js
Authentication for Next.js
next-auth.js.org
1. 설치하기
npm install next-auth
또는
yarn add next-auth
2. api 만들어주기
https://next-auth.js.org/getting-started/example
Getting Started | NextAuth.js
The example code below describes how to add authentication to a Next.js app.
next-auth.js.org
현재 NextJS 13에서는 app폴더 하위에 api를 만드는 것을 권장하고 있지만 next-auth 라이브러리는 NextJS 12버전에서 사용하던 page폴더 하위에 api폴더를 만들고 auth 폴더 > [...nextauth].js(ts)를 만들라고 한다.
그리고 [...nextauth].ts에서 다음과 같이 적고 저장해주자
//[...nextauth].ts
import nextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
export const authOptions = {
providers: [
GithubProvider({
clientId: "아까 적어둔 깃허브에서 발급받은 id",
clientSecret: "아까 적어둔 깃허브에서 발급받은 비밀번호",
}),
],
secret: "jwt만들때 쓸 암호",
};
export default nextAuth(authOptions);
기본적으로 OAuth는 jwt방식으로 진행되기 때문에 secret에 토큰 만들때 사용할 보안수준 높은 비밀번호를 정해주자.
3. 준비 끝, 로그인 해보자
로그인 버튼은 onClick이벤트에 의해 작동할테니 server component로 만들 수 없다.
따라서 client component로 만들어서 layout파일에 넣자.
//LoginButton.tsx
"use client";
import { signIn } from "next-auth/react";
export const LoginButton = () => {
const handleLogin = () => {
signIn();
};
return <div onClick={handleLogin}>로그인</div>;
};
next-auth에서는 signIn이라는 함수를 제공해주는데 이 함수를 사용하면 그냥 로그인 기능이 작동된다.
(signOut이라는 함수도 있는데 이건 로그아웃 시켜주는 개꿀함수)
앙개꿀띠
//layout.tsx
import { LoginButton } from "@/app/LoginButton";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
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}>
<LoginButton />
{children}
</body>
</html>
);
}
자 이제 버튼을 눌러보면
누르면
아까 개념정리할때 얘기했던 4번 '님 진짜 정보넘길꺼임?'을 물어본다.
긍정적으로 우측버튼을 누르면
아까 callback URL에 기입해뒀던 곳으로 돌아가게된다.
4. 근데 이거 로그인 된거임?
뭔가 로그인 됐는지 않됐는지 모를정도로 아무 변화가 없을 것이다.
하지만 로그인된 상태이다.
확인해보려면
또 다음과 같은 함수를 가져다 사용하면 된다.
import { LoginButton } from "@/app/LoginButton";
import type { Metadata } from "next";
import { getServerSession } from "next-auth";
import { Inter } from "next/font/google";
import { authOptions } from "../../pages/api/auth/[...nextauth]";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
// next-auth에서 제공해주는 서버세션정보를 가져오는 함수
// Promise를 반환하니까 async await ㄱㄱ
const loginData = await getServerSession(authOptions);
console.log(loginData);
return (
<html lang="en">
<body className={inter.className}>
<LoginButton />
{children}
</body>
</html>
);
}
getServerSession이라는 서버 서버세션정보를 가져다 주는 함수에 아까 [...nextauth].ts에 만들었던 options를 넣어주면 끝이다.
자 이걸 콘솔찍어보면 터미널에 짠하고 다음과 같은 정보가 넘어온다!
바로 님 깃헙에 등록해둔 email과 이름 그리고 깃헙은 프로필 이미지까지 보내준다!!
와 진짜 개편해
그럼 이제 이걸로 로그인 로그아웃을 구현해보면 아주 간단한 깃허브 소셜로그인을 만들어 볼 수 있겠제?
docs보면 다양한 옵션들도 많으니까 필요하면 가져다 사용해서 강려크한 로그인기능으로 업그레이드도 해보셈
'NextJS' 카테고리의 다른 글
| NextJS 정리(v13 이전) (0) | 2023.01.30 |
|---|---|
| NextJS 개인 메모 (1) | 2022.11.04 |