nextauth + firebase authentication #1

nextjs에 next-auth를 넣고 firebase authentication이랑 연동하는 걸 해봤는데 되긴 하더라구. 그래서 블로그를 남기는데 이것 저것 테스트하던 프로젝트 위에 하니까 지저분하고 그래서 새로 nextjs 프로젝트 만드는 것부터 nextauth 설정, GCP, firebase 설정까지 차근차근 가보는 글이야. github에도 깔끔하게 남겨두고 하려고 👇👇👇👇👇👇

Github: https://github.com/peter-bang/nextauth-fb-authentication

GitHub - peter-bang/nextauth-fb-authentication: Next.JS example project for nextauth and firebase authentication

 

먼저 create-next-app으로 next.js 프로젝트 생성하자고

npx create-next-app nextauth-fb-authentication

 

우리 git 기계적으로 하자고(내가 맨날 까먹어서 한번 적어보는 거임 ㅋ)

 

1. github에서 프로젝트랑 같은 이름으로 repository 만들고

2. 터미널에서 nextjs프로젝트 폴더로 이동 아래 git 명령 수행~ repository 자기껄로 하고(제발)

git remote add origin https://github.com/peter-bang/nextauth-fb-authentication.git
git branch -M main
git push -u origin main

난 vscode 사용하니까 터미널에서 바로 vscode 실행.

code .

 

vscode에서 터미널 열어주고(mac에서는 control + '~'가 단축키) 잘 동작하는 지 확인.

yarn dev / npm dev

지겹게 보는 Welcome to Next.js! 이제 그만 보자!!!

welcome to Next.js

아.... typescript 적용 안했네 ㅎ 머리가 멍충하면 몸이 고생해야지 ㅋㅋㅋ typescript 관련 파일들 만들고 서버 재구동~

(ts 쓰기 싫은 사람들은 하지말고~ 딱히 안중요해 ㅋㅋㅋ 내가 병이 있어서 그래 ㅋ)

touch tsconfig.json
yarn add --dev typescript @types/react @types/node
yarn dev

 

pages 폴더 안에 있는 js 전부 ts, tsx로 변경해주고~ 등등 하는데 그건 github를 보는 걸로 하자고!

 

이제 nextauth를 해봅시다~ 나 증말 getting started 따라하는 거야 특별한 거 없어 ㅋ 그러니까 잘하는 양반들은 next-auth.js.org로 가자고 ㅋㅋㅋ 자 일단 설치!

yarn add next-auth

 

pages/api/auth/ 경로에 [...nextauth].ts(js) 파일 생성하고 아래 코드 입력. 원래는 github였는데 google로 변경했어.

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],
});

 

 

그리고 _app.ts 파일에 useSession 훅을 사용하기 위해 main component를 sessionProvider로 감싸주자.

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { SessionProvider } from "next-auth/react";

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

 

이제 로그인 버튼 컴포넌트를 만들어 보자구. components 폴더만들고 login-btn.tsx 파일 생성 그리고 아래 코드 삽입. 간단하게 설명하자면 useSession으로 사용자 로그인 정보를 읽어와서 알맞게 버튼을 그려주는게 끝!

import { useSession, signIn, signOut } from "next-auth/react"
export default function LoginBtn() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

typescript 사용하면 session.user.email에 에러가 막 뜰건데 그건 session type이 정의가 안되어 있어서 그래. types 폴더 만들고 next-auth.d.ts 파일 생성한다음 session interface 정의에 user: {email: string} 넣어주면 에러가 없어짐.

import NextAuth from "next-auth";

declare module "next-auth" {
  /**
   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user: {
      email: string;
    };
  }
}

 

이제 index.tsx 파일에서 쓸데없는 거 싹다 지워주고 위에서 만든 버튼 하나만 딱 넣어보자구.

import LoginBtn from "../components/login-btn";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <LoginBtn />
    </div>
  );
}

 

이렇게 하고 나면 localhost:3000 화면 중앙에 아래 캡쳐처럼 버튼 하나 달랑 보일거야. 버튼 눌러봐도 괜찮아 쫄지말고 눌러봐 ㅋㅋ

LoginBtn component

버튼 누르면 동작은 하는데 google 로그인 화면까지 가지도 않을거야  동작하지 않을 거야. Google 로그인을 사용하려면 GCP에서 새 프로젝트를 만들고 GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET 같은 정보를 얻어 와야 해. 난 Firebase 통해서 프로젝트 만들거야. 어차피 authentication이랑 연동도 할거니까 말이지. 프로젝트를 만들었으면 GCP 콘솔에서 사용자 인증정보 탭으로 가자고.

사용자 인증 정보

클라이언트 ID하고 클라이언트 Secret을 얻어오려면 Oauth 클라이언트 ID를 생성해야 해. Oauth 클라이언트 ID를 선택하면 동의 화면을 구성해야 한다고 나오는데 동의 화면 구성 버튼 클릭해서 구성해보자고!

동의 화면 구성

내부, 외부 선택하는게 나오는데 내부 선택하면 자신의 구글 계정만 로그인이 가능해. 나중에 변경 가능하니깐 걍 내부 고고!

다음 화면에서 사용자 지원 이메일이랑 개발자 연락처 정보만 넣고 다음으로 고고!

동의 화면이 만들어졌으면 이제 다시 OAuth 클라이언트 ID 만들기를 시도해 보자구

OAuth 클라이언트 ID 만들기

애플리케이션 유형은 웹 애플리케이션으로 설정하고 이름, 승인된 리다이렉션 URI를 입력해야 해.

->>>> http://localhost:3000/api/auth/callback/google

Oauth 클라이언트 ID 만들기

 

아이고 GCP 설정하는게 더 지치네~ 스샷 따느라 지치는 건가? ㅎㅎ 이제 드디어 클라이언트 ID하고 클라이언트 secret을 얻었네.

OAuth 클라이언트 정보

이 두 가지 정보를 환경 변수에 저장하자구. next.js 루트 디렉토리에 .env 파일 만들고 넣기만 하면 땡이야. 아래처럼 말이지.

GOOGLE_CLIENT_ID="637775452025-xxxxxjbo8doehjqcp6ujfm7l06h1887.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="XXXXXX-55pWuUfBKzCzFo88CeefA7XKwri9"

서버 재시작하고 로그인 버튼 누르면 구글 로그인 창이 뜨는 걸 볼 수 있어. 성공적으로 로그인했다면 아래와 같은 화면을 볼 수 있을 거야.

로그인 성공 화면

여기까지 사실 10분 컷인데 캡쳐하느라 아이고 힘들다. 너무 길면 보기 힘드니까 firebase authentication 연동하는 부분은 #2에서 계속할게. 아유 지친다 ㅎ

 

2022.06.03 - [Next.js] - nextauth + firebase authentication #2

nextauth + firebase authentication #2