[React] Firebase 로그인 - Authentication

지난 게시물에서 Firebase 를 사용하여 회원가입하는 것을 구현하였다.

그러면 로그인은 어떻게 하면 될까?

Firebase 세팅 방법은 아래에 있는 게시물을 확인하면 된다.

[React] 리액트 Firebase Authentication 회원가입

 

로그인 하기

모듈 가져오기

Firebase의 Authentication 모듈에서

• 현재 Firebase 앱의 인증 객체를 가져오는 getAuth
• 이메일과 비밀번호로 로그인하는 signInWithEmailAndPassword

Firebase 설정 파일인 firebase.js 의 app 을 가져온다.

import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
import app from '../../firebase';

 

인증 객체 가져오기

기능을 구현하기 위해 Firebase 앱을 통해 인증 객체를 가져와야 한다.

이 객체를 통해 Firebase Authentication 을 사용하여 사용자를 관리, 생성, 세부 정보 접근을 할 수 있다.

 

인증 객체를 가져오기 위해

Firebase Authentication 의 getAuth 함수를 사용하고, 인자로 초기화한 Firebase 설정 파일의 app 을 넣는다.

그리고 반환된 auth 를 사용하여 Firebase Authentication 의 다양한 기능을 사용할 수 있게 된다.

const auth = getAuth(app);

 

이메일/비밀번호 로그인

함수가 비동기로 실행되게 만들고, 발생할 수 있는 오류를 처리하기 위해 try-catch 구문을 사용하였다.

 

입력받은 사용자의 이메일과 비밀번호를 signInWithEmailAndPassword 함수를 사용해 로그인을 한다.

이때 auth 도 같이 인자로 넣는 이유는 Firebase Authentication 과 연결되고 작동하도록 하는 데 필수적이기 때문이다.

const onSubmit = async (data) => {
  try {
    await signInWithEmailAndPassword(auth, data.email, data.password);
    console.log("success");
  } catch (error) {
    console.log(error);
  }
};

 

로그인 폼 내용을 작성하고 로그인 버튼을 누르면 정상적으로 로그인이 성공하는 것을 볼 수 있다.

 

로그인 후 페이지 이동

로그인을 하고 메인 페이지로 이동해야 한다.

그러나 실제 웹 페이지에서 로그인이 되어 있지 않으면 메인 페이지가 아니라 로그인 페이지 먼저 보여주고,

로그인되어 있으면 메인 페이지로 이동이 된다.

 

이를 구현하기 위해 Firebase 에 내장되어 있는 onAuthStateChanged 함수를 사용하여 손쉽게 구현할 수 있다.

 

onAuthStateChanged 는 리스너(listener)이므로,

이벤트가 발생할 때마다 자동으로 호출이 되기 때문에 상위 파일인 App.jsx 에서 구현해야 한다.

 

모듈 가져오기

다른 페이지로 이동하는 useNavigate (React-Router-Dom useNavigate 설명)

React 컴포넌트가 렌더링 될 때 특정 작업을 수행하도록 하는 useEffect

Firebase의 Authentication 모듈에서

• 현재 Firebase 앱의 인증 객체를 가져오는 getAuth
• 사용자의 인증 상태 변화를 감지하는 onAuthStateChanged

Firebase 설정 파일인 firebase.js 의 app 을 가져온다.

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

 

 

사용자 인증 상태 감지

Firebase 인증 객체 auth 와 네비게이션 함수 navigate 를 가져온다.

 

그리고 컴포넌트가 렌더링 될 때, 클린업 함수인 return() => {} 를 사용하여 컴포넌트가 언마운트 될 때 실행되기 때문에 불필요한 메모리 사용을 막을 수 있다.

 

onAuthStateChanged 에 첫 번째 인자로 auth 를 받고, 사용자의 인증 상태가 변경될 때마다 콜백 함수인 user 를 호출한다.

 

user 객체에는 사용자의 정보가 담겨 있으며, 로그아웃 하거나 로그인을 하지 않으면 user 값이 null 이 된다.

그래서 이를 사용해서 사용자가 로그인을 했으면 '/' 페이지로 이동하고, 그렇지 않으면 '/login' 페이지로 이동시킨다.

function App() {
  const auth = getAuth(app);
  const navigate = useNavigate();

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        navigate('/');
      } else {
        navigate('/login');
      }
    });
    return () => {
      unsubscribe();
    };
  }, []);

  return (
    ...
  );
}

export default App;

 

---

 

이처럼 React 에서 Firebase 를 사용하여 이메일/비밀번호로 로그인하고, 사용자의 로그인 여부에 따라 페이지를 이동하는 것도 구현하였다.