매번 OAuth 를 사용하지 않고, 이메일, 비밀번호 로그인을 주로 사용해보았다.
남들 다하는 OAuth 도 해보고 싶어서, 간편하기도 하고 보안성도 더 좋아보여 도전해본다.
하나씩 하나씩 기록해가며 해보자.
1. TypeScript + Next.js 의 구성
https://nextjs.org/docs/basic-features/typescript#create-next-app-support
Basic Features: TypeScript | Next.js
Next.js supports TypeScript by default and has built-in types for pages and the API. You can get started with TypeScript in Next.js here.
nextjs.org
npx create-next-app@latest --ts간단하게 설치해보자.
이번에 Next.js 13버젼이 되어 무언가 많이 바뀌었다고 한다.
저번에 Next.js 12버젼을 사용하면서, 서버측 코드를 사용하며 약간의 불편함을 느꼈었는데,
그것이 개선되고 Image 의 최적화가 더 나아지고, 뭐가 하여튼 많이 바뀌었다고 한다.
찾아보긴 했는데 정확히 기억나지는 않는다. 다시 찾아보면서 해야지.
2. next-auth 의 설치
https://next-auth.js.org/getting-started/example#existing-project
Getting Started | NextAuth.js
The example code below describes how to add authentication to a Next.js app.
next-auth.js.org
npm install next-auth어려울게 있나. 간단하게 설치해보자.
3. next-auth 의 설정
https://next-auth.js.org/getting-started/example#add-api-route
Getting Started | NextAuth.js
The example code below describes how to add authentication to a Next.js app.
next-auth.js.org
기본적으로 pages / api / auth / [...nextauth].ts 위치에, 인증에 관련된 설정을 하게 되어있다.
제공하는 코드를 참조하여, 원하는 provider 를 생성하고, 값을 넣는다.
<pages/api/auth/[...nextauth].ts>
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google"; // 원하는 OAuth 를 선택
export default NextAuth({
providers: [
GoogleProvider({ // 원하는 OAuth 를 선택, 더 추가도 가능
clientId: String(process.env.GOOGLE_CLIENT_ID),
clientSecret: String(process.env.GOOGLE_CLIENT_SECRET),
}),
],
});이제 Google 의 Provider 가 생성되었다.
4. SessionProvider 의 설정
앞서 만든 next-auth 의 설정을 Provider 를 통해, 앱 전역에 사용되게 만들어야한다.
next-auth/react 가 제공하는 SessionProvider 를 통해, 앱 전역을 감싸준다.
< pages/_app.tsx >
import type { AppProps } from "next/app";
import {SessionProvider} from 'next-auth/react';
const App = ({Component, pageProps}:AppProps) => {
return (
<SessionProvider session={pageProps.session}>
<Component {...pageProps} />
</SessionProvider>
);
}
export default App;
5. 로그인, 로그아웃, 세션정보의 접근
next-auth/react 가 제공하는 signIn, signOut, useSession 을 통해, 구현이 가능하다.
간단한 SignIn 버튼과 SignOut 버튼, 그리고 useSession 을 이용하여 값을 받아와본다.
< comonents / user-auth.tsx >
import { signIn, signOut, useSession } from "next-auth/react";
const SignInComponent = () => {
const { data, status } = useSession();
return (
<div>
<div>
<h1> 로그인</h1>
<button type="button" onClick={() => signIn()}>
SignIn
</button>
</div>
<div>
<h1> 로그아웃</h1>
<button type="button" onClick={() => signOut()}>
SignOut
</button>
</div>
</div>
);
};
export default SignInComponent;
6. 기본 세팅은 끝났다. 이제, Google 에 들어가서, OAuth 를 활성화시킨다.
구글 디벨로퍼 API 서비스에 들어가서, 프로젝트를 만든다.
Google 클라우드 플랫폼
로그인 Google 클라우드 플랫폼으로 이동
accounts.google.com
7. 프로젝트를 만든다.
프로젝트 이름은 마음대로 만든다.
나는 dogs 라고 그냥 지었다.
8. 만든 프로젝트를 눌러, API 및 서비스 탭을 들어간다.
9. 사용자 인증 정보 탭에 들어가, API 키를 만든다.
만들어진 API 키는 잘 적어두자.
나의 경우에는 .config 파일을 따로 만들어, gitignore 에 등록하고, 모든 정보를 두는 편이다.
10. API 키를 만들었다면, 동의화면 구성에 들어가, 동의화면을 구성한다.
우리는 모든 구글 계정 사용자가 이용 가능해야 하므로, "User Type" 을 [ 외부 ]로 지정한다.
11. 필수적인 구성만 적어주고 넘어간다.
앱 이름은 그럴듯 하게 지어보았다.
사용자 지원 이메일에는, 안될시 문의 메일이 올 내 메일 주소를 적어보았다.
12. 범위를 지정한다.
사용자에 대한 기본 정보만 필요하므로, 필요한 두개만 체크해보았다.
13. 마지막으로 테스트 사용자만 지정해두면 화면 구성은 끝난다.
14. 동의 화면 구성이 끝났으니, 이제 진짜 클라이언트 ID 를 만들어본다.
15. 웹 애플리케이션으로 지정하면 아래 쭉 나온다.
Google OAuth 를 사용할 오리진을 적어준다.
추후, 배포하게 된다면, 배포되는 곳의 오리진을 반드시 적어어야 할 것이다.
현재는 개발서버를 적어놓았다.
리디렉션 URI 는 Next-auth 를 보고 그대로 가져간다.
물론, 이것역시 배포하게 된다면, 배포되는 곳의 오리진을 적고 뒤의 주소를 적어야 하겠다.
https://next-auth.js.org/providers/google#configuration
Google | NextAuth.js
Documentation
next-auth.js.org
16. 짜잔. 적고나면 OAuth 를 사용할 수 있는 클라이언트의 ID 가 생성된다.
반드시 적어두자.
next.js 의 루트폴더에 .env 를 만들어서, 그 안에 적어두어야
미리 생성했던 next-auth 의 provider 옵션에 적어두었던 환경변수에
그 값이 들어가서 사용이 가능해진다.
17. 끝났다. 이제 로그인을 해보자
기가맥히게 로그인이 되었다.
심지어 새로고침을 해도 풀리지가 않아!! 우와!!
자동으로, 쿠키에 token이 저장되는 모습이다.
expire date 가 있는 지속적 쿠키로,
이 쿠키는 일부로 지우지 않는다면 탭을 닫아도 만료날짜까지 삭제가 되지 않을것이다.
이렇게 Google로그인을 해보았다.
스타일링도 바꿔보자 다음 시간에
'메인-프로젝트 > Next.js - 심리검사와 강아지 프로젝트' 카테고리의 다른 글
| 5. POST 를 이용한 데이터 가져오기, 로컬스토리지에 저장하기 (0) | 2023.02.03 |
|---|---|
| 4. Redux-toolkit을 사용해 "비동기함수(fetch)" 를 이용한 DB 의 값 받아와서 넣기 + Thunk 생성자 + action.ts (0) | 2023.01.29 |
| 3. DB의 데이터를 fetch - "API" 를 통한 GET 과 "사전 데이터페칭"을 통한 GET (0) | 2023.01.28 |
| 2. MongoDB 연결과 API 를 통한 fetch(1) - MongoDB 연결 (0) | 2023.01.28 |
| 0. 프로젝트를 시작해보자! (0) | 2023.01.27 |
댓글