김민태의 데브캠프 2기 - firebase를 사용한 로그인 구현

 

이번 포스트에는 firebase의 Auth를 사용한 로그인 기능 구현에 대해 알아보고자 한다.

 

우선 다음의 파일을 import 한다.

 

import React from 'react'
import { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import {getAuth, signInWithPopup, GoogleAuthProvider, onAuthStateChanged } from 'firebase/auth';
import app from '../firebase'

 

그다음 함수로 부터 값을 받아올 변수를 설정한다.

 

    const auth = getAuth(app);
    const provider = new GoogleAuthProvider(); // new 생성자에 주의

 

로그인한 기록에 근거하여, 로그인 처리를 한다 

기록이 있다면 최상위 '/'로 이동하고, 아니라면 /login으로 이동한다.

 

const navigate = useNavigate();

    useEffect(() => {
        onAuthStateChanged(auth, (user) => {
            if(user){
                navigate("/");
            }else{
                navigate("/login");
            }
            console.log(user);
        })
      return () => {
      }
    }, [])
    

    const handleAuth = () => {
        signInWithPopup(auth, provider)
        .then((result) => {
            console.log(result);
        })
        .catch(error => {
            console.error(error);
        })
    }

 

하지만, 위 코드를 실행해보면 다른 페이지로 이동하려 해도, '/' 최상위 디렉토리로 이동하게 된다

 

왜냐하면 다른 페이지로 이동해서  URL이 변경되면, useEffect가 호출되어 다시 '/'로 이동하게 되기 때문.

 

그렇다면 어떻게 수정해야 할까?

 

            if(user){
                navigate("/");
            }else if (!user && pathname === '/'){
                navigate("/login");
            }

 

위 코드와 같이 login 페이지인 경우에만으로 설정하면 된다