React, Next.js, Firebase를 사용한 Google 소셜 로그인(1) - 환경세팅

들어가기 전

firebase 연동을 주로 한 포스팅이라 react와 next.js 세팅은 앞선 포스트인

https://dolgogae.tistory.com/65

[React / Next.js] 프로젝트 생성

를 참고해주면 좋을 것 같다.

 

---

환경

• OS: macOS
• IDE: vs code
• node: v20.6.0

---

1. 시작하기

우선 구글에서 제공하는 서비스이기 때문에 구글 계정이 있어야 한다.

https://firebase.google.com/?hl=ko 

Firebase | Google’s Mobile and Web App Development Platform

가장 먼저 위의 링크를 통해 홈페이지를 들어가면 아래와 같은 페이지가 나오고 "시작하기"를 누르면 된다.

firebase 시작하기

그리고 나서  firebase 프로젝트를 만들면 된다.

firebase 프로젝트 생성

firebase 프로젝트 이름 지정

firebase google analytics

다음과 같은 단계로 프로젝트를 생성하면 되고,

나는 구글 애널리틱스같은 경우에는 테스트 프로젝트이기 때문에 별도로 생성하지는 않았다.

 

2. 코드 추가

이 프로젝트에서 서비스는 Authentication, Firestore Database, Storage 총 3개를 추가할 것이다.

그 전에 생성한 프로젝트의 코드를 알아야한다.

firebase 앱 추가

위에 보면 ios, android, web가 있고 여기서 코드를 받아야한다. 

앱 이름을 등록하고, 2번의 Firebase SDK 추가에서 다음과 같은 코드를 받고 나의 react - next.js에서 추가해주면 된다.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "",
  authDomain: "test-project-b7c8a.firebaseapp.com",
  projectId: "test-project-b7c8a",
  storageBucket: "test-project-b7c8a.appspot.com",
  messagingSenderId: "",
  appId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// firebase에서 추가했던 서비스를 사용하기 위해서
// 아래처럼 객체를 가져와야 한다.
export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);

다음과 같은 코드를 받을 수 있다.

위 소스코드에서 마지막 세줄에 주석으로 써놨듯이 다른 서비스도 동일하게 사용하고 싶으면 firebase 라이브러리를 이용해서 객체를 가져와주면 된다.

 

3. 서비스 추가

3-1. Authentication

Authentication에서는 이메일/비밀번호와 Google을 추가해준다.

여기서 Google만 추가하는 것은 구글 로그인만 구현할 것이기 때문이고,

다른 소셜로그인을 만들고 싶은 경우에는 자유롭게 추가하면 된다.

3-2. Firestore Database

현재는 테스트 모드로 만들것이기 때문에 테스트 모드를 선택해준다.

그리고 리전을 Seoul로 설정해준뒤 만들어주면 된다.

Storage는 Firestore Database와 동일한 과정을 거치기 때문에 생략하도록 하겠다.