Next.js에서 Firebase를 사용한 Google 인증

안녕하세요 여러분,

저는 최근에 Next.js에서 플랫폼을 개발 중이었고 Google 인증을 통합해야 했습니다. 그러나 사용 가능한 가이드의 대부분은 오래되었거나 오류가 포함되어 있거나 불필요한 종속성에 의존했습니다. 어쨌든 나는 그것을 깨고 차근차근 적어두면 다른 사람들에게 도움이 될 것이라고 결정했습니다. 이 문서의 유일한 목적은 Firebase를 사용하여 Google 인증을 Next.js 프로젝트에 추가하는 가장 간단한 방법을 안내하는 것입니다.

시작하기 전에 프로젝트에 대한 Firebase 계정이 이미 설정되어 있다고 가정합니다. 그렇지 않은 경우 setup documentation을 참조하십시오. 아주 간단합니다. 새 프로젝트를 시작하고 앱을 등록하기만 하면 됩니다. 그런 다음 고유한 자격 증명 세트가 제공됩니다. 이는 프로젝트 설정에서 찾을 수 있으며 다음과 같이 표시됩니다.

const firebaseConfig = {
  apiKey: "your api key",
  authDomain: "your credentials",
  projectId: "your credentials",
  storageBucket: "your credentials",
  messagingSenderId: "your credentials",
  appId: "your credentials"
};

이제 Firebase 프로젝트가 설정되었으므로 코딩을 시작하겠습니다.

1단계: Next.js 프로젝트 생성

npx create-next-app _PROJECT_NAME_

2단계: Firebase 모듈 설치

npm install firebase 

제가 사용한 버전은 9.9.4였습니다.

3단계: Google 로그인 방법 사용

Firebase 프로젝트의 인증 탭으로 이동합니다. 프로젝트에 구성된 다양한 로그인 방법을 볼 수 있습니다. 여기에 새 Google 제공업체를 추가하세요.

4단계: 프로젝트에서 인증 활성화

예, 이것은 흥미로운 부분입니다. 간단하게 유지하고 모든 인증 논리를 _app.js 파일에 유지합시다.

Firebase 모듈을 가져오고 Firebase 자격 증명을 프로젝트에 추가하는 것으로 시작하겠습니다.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const firebaseConfig = {
  apiKey: "your api key",
  authDomain: "your credentials",
  projectId: "your credentials",
  storageBucket: "your credentials",
  messagingSenderId: "your credentials",
  appId: "your credentials"
};

이제 Firebase 서비스를 시작하고 Google 인증 공급자를 활성화하겠습니다.

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });

이제 auth 개체를 사용하여 로그인 및 로그아웃 기능을 정의할 수 있습니다.

const signIn = () => auth.signInWithPopup(provider);
const signOut = () => auth.signOut();

**signIn **기능을 호출하면 Google 계정을 선택할 수 있는 팝업이 나타납니다. 그리고 **signOut **기능은 사용자를 로그아웃하고 세션을 지웁니다. 너무 간단하지 않나요? ;)

이제 사용자가 로그인했는지 여부를 추적해야 합니다. 이것은 상태 변수로 남을 것입니다.

const [user, setUser] = useState(null);

이 개체에는 표시 이름 및 이메일 주소와 같은 로그인한 사용자에 대한 기본 메타데이터가 포함되어 있습니다.

그런 다음 Firebase에서 인증 변경을 수신합니다. 돌아올 때 사용자가 이미 로그인되어 있는지 확인하거나 성공적으로 로그인한 후 상태를 업데이트하는 데 필요합니다.

useEffect(() => {
  firebase.auth().onAuthStateChanged(async (user) => {
    setUser(user);
  });
}, []);

여기에 추가 논리를 포함할 수도 있습니다. 예를 들어 세션 데이터 등을 유지하기 위해 JWT 토큰을 백엔드로 보냅니다.

지금까지 작성한 _app.js 코드 전체를 참조용으로 붙여넣겠습니다.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import { useEffect, useState } from "react";

// Firebase config
const firebaseConfig = {
  apiKey: "your api key",
  authDomain: "your credentials",
  projectId: "your credentials",
  storageBucket: "your credentials",
  messagingSenderId: "your credentials",
  appId: "your credentials"
};

// Initialize firebase and google provider
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });

// Sign in and sign out functins
const signIn = () => auth.signInWithPopup(provider);
const signOut = () => auth.signOut();

function MyApp({ Component, pageProps }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    firebase.auth().onAuthStateChanged(async (user) => {
      setUser(user);
    });
  }, []);

  return (
    <Component 
      {...pageProps} 
      user={user} 
      signIn={signIn} 
      signOut={signOut} 
    />
  );
}

export default MyApp;

5단계: 시작하세요!

인증을 테스트하려면 index.js 파일에 몇 가지 간단한 논리를 추가합니다.

export default function Home(props) {
  return (
    <div>
      {props.user ? (
        <>
          <span>Signed in as : {props.user.email}</span>
          <button onClick={props.signOut}>Sign Out</button>
        </>
      ) : (
        <button onClick={props.signIn}>Sign In</button>
      )}
    </div>
  );
}

프로젝트를 시작하고 결과를 확인하십시오.

npm run dev

그게 다야!

이제 Google 인증을 사용하는 Next.js 프로젝트가 생겼습니다. 내가 놓친 것이 있으면 의견에 알려주십시오.

건배와 행복한 코딩!