개요

현재 내가 만들어 놓은 페이지에 업데이트가 없는 것 같기도 하고,
회사에서 개발 호소인으로 사는 느낌이라 공부도 할 겸
이전에 적용한 Firebase를 이용해서 로그인 기능을 만들어 보기로 했다.
Firebase를 이용하는 이유는 구글이나 깃허브를 이용한 로그인을 실행할 때, 계정 정보를 Firebase DB에 쉽게 저장할 수 있다고 판단되어 사용하게 되었다.

Firebase Console 설정

먼저 firebase에 들어가서 프로젝트를 생성한다.
프로젝트에 접속해서 빌드 > Authentication을 클릭

Sign-In Method 탭에 들어가서 원하는 로그인 방식을 등록

구글의 경우에는 프로젝트 이름과 프로젝트 지원 이메일은 디폴트값을 선택
Github의 경우에는 추후 과정 업데이트..

Firebase protocol(?) Code

이제 설정을 마쳤으니 코드를 작성
이전에 작성했던 firebase-config.js 파일에

import { getAuth } from 'firebase/auth';
// ...
const auth = getAuth(firebase);

export { ..., auth };

를 추가해 준다.
현재 내 code 기준,

import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APIKEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGIN_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};

// Initialize Firebase
const firebase = initializeApp(firebaseConfig);
getAnalytics(firebase);
// getAuth and getDB from Firebase
const auth = getAuth(firebase);
const db = getFirestore(firebase);

export { db, auth };

이렇게 작성되어 있다.
Firebase Console에서 통신할 준비를 마쳤으니, 본격적으로 페이지에 적용을 해보자.

Typescript Code

이제 우리가 설정한 google과 github를 이용한 로그인 기능을 구현할 것이다.
아래의 예시는 google을 이용한 팝업 로그인인데, 이름만 다르고 나머지도 같은 방식이다.
먼저, 이전에 firebase와 연동한 인증 code를 불러온다.

import { auth } from '../../configs/firebase-config';

google로 로그인을 하는데 팝업창을 띄워서 로그인을 하는 방식을 채택할 것이다.

import { GithubAuthProvider, GoogleAuthProvider, UserCredential, signInWithPopup } from 'firebase/auth';
import { auth } from '../../configs/firebase-config';


const GoogleLogin = (): void => {
  const GoogleProvider = new GoogleAuthProvider();
  signInWithPopup(auth, GoogleProvider)
    .then((result: UserCredential): void => {
      // const credential = GoogleAuthProvider.credentialFromResult(result);
      // const token = credential?.accessToken;
      // const user = result.user;
      console.log('Success!!!');
      console.log(result.providerId);
      // console.log(credential, token, user);
      // setUserData(data);
    })
    .catch((err) => {
      // const errorCode = err.code;
      // const errorMessage = err.message;
      // The email of the user's account used.
      // const email = err.customData.email;
      // The AuthCredential type that was used.
      // const credential = GoogleAuthProvider.credentialFromError(err);
      // console.log('Fail!!!');
      // console.log(errorCode, errorMessage, email, credential);
      console.log(err);
    });
};

GoogleAuthProvider 객체를 생성하여 로그인 인증을 할 준비를 하고
signInWithPopup(auth, GoogleProvider)을 통해 팝업을 띄워 로그인하는 걸 기능을 추가한다.
로그인을 성공하면 then을 실행하고
실패하면 catch를 실행
UserCredential 내부에는 로그인한 유저의 정보가 들어 있으니 이를 어떻게 활용할지는 고민해 보는 걸로…