OAuth

Next.js

회원가입/로그인 기능 + JWT

패스워드 암호화 1. 라이브러리 설치 npm install bcrypt 2. import 라이브러리 import bcrypt from "bcrypt"; 3. 패스워드 암호화 const hash = await bcrypt.hash(req.body.pw, 10); => 회원가입 시 pw를 해쉬 작업 4. DB에 넣기 req.body.pw = hash; await db.collection("user").insertOne(req.body); 5. DB 확인 => DB관리자도 클라이언트의 pw를 확인할 수 없게 해쉬화 하는 용도 => 클라이언트가 원래 pw로 로그인을 하면 정상적으로 로그인 가능. Credentials provider 설정 1. import 라이브러리 import CredentialsProvide..

Next.js

Next-Auth + Session 방식

DB adapter 설정 => session방식은 DB에 데이터를 저장해야 함. 1. 라이브러리 설치 npm install @next-auth/mongodb-adapter 2. auth 파일에 코드 추가 ([...nextauth].js 파일) import { connectDB } from "/util/database"; //추가 import { MongoDBAdapter } from "@next-auth/mongodb-adapter"; //추가 import NextAuth from "next-auth"; import GithubProvider from "next-auth/providers/github"; export const authOptions = { providers: [ GithubProvider..

Next.js

Next-Auth를 통한 소셜로그인

깃허브 OAuth 설정 1. github 로그인을 한다. 2. setting을 들어간다. 3. 왼쪽 메뉴에서 젤 아래 있는 Developer settings에 들어간다. 4. OAuth Apps 버튼을 누른다. 5. 새로운 어플리케이션을 만든다. 6. 앱 이름과 URL을 기입한다. => URL의 경우 배포하지 않은 개발 중인 사이트라면 아래와 같이 기입한다. 7. Client ID/PW 발급 =>PW 발급은 Generate a new clint secret을 누르면 된다. 소셜로그인 구현 1. 라이브러리 설치 npm install next-auth 2. 폴더 생성 후 js파일 생성 pages/api/auth/[...nextauth]. js 파일을 만든다. 3. 코드 작성 => github가 아닌 다른 소..

www.seok.com
'OAuth' 태그의 글 목록