Firebase Authentication

혜연·2023년 10월 31일

리액트

React

목록 보기

2/5

Firebase의 Authentication을 사용해 로그인 구현하기

저는 Vite와 TypeScript를 사용해 리액트 애플리케이션에 인증 서비스를 추가했습니다.

1. Firebase App 만들기

먼저 Firebase에 로그인 한 후, 프로젝트를 생성해 주세요.
생성한 프로젝트에 들어가 Apple, Android, 웹, 유니티 등 원하는 플랫폼을 선택해 앱을 추가해주세요.

저는 웹 앱을 추가했습니다.
앱 이름을 지정해주면 아래와 같은 화면이 등장합니다.

npm install firebase 명령어를 실행해주고, 파일 하나를 생성해 아래의 코드를 복사 붙여넣기 하면 끝!

firebase에서 만든 우리의 앱을 firebase에서 initailze 해줍니다. 이 앱을 통해 우리는 인증 서비스, 클라우드 서비스 등을 사용해 볼 수 있습니다.

로그인 서비스를 구현하기 위에 위의 화면에서 Authentication을 클릭해줍니다.

2. Authentication

여러가지 로그인 방법이 있습니다😙
가장 기본인 이메일/비밀번호를 선택해줍니다.

이메일/비밀번호를 사용 설정 해주고 저장을 클릭합니다.

사용 설정된 것을 확인할 수 있으며,

users에 들어가면 로그인 한 사용자의 정보를 확인할 수도 있습니다. 아직은 사용자가 없다고 뜨네요.

3. 신규 가입 && 로그인

firebase Document
위의 링크는 firebase Document로 인증 서비스 뿐만 아니라 다른 서비스의 사용 방법을 친절히 설명해주고 있어요. 문서 내용을 바탕으로 코드를 작성해봅니다 !!

3.1 기본 설정

앱 추가의 코드에 getAuth를 import 해주고, 우리가 만든 app의 인증서비스를 사용하기 위한 auth 인스턴스를 getAuth를 통해 받아옵니다. 다른 파일에서 auth를 사용하도록 export 해줍니다.

Auth 인스턴스

auth는 여러 속성과 행동 양식을 가지고 있습니다.

3.2 신규 사용자 가입

createUserWithEmailAndPassword 메서드 사용

만들어 둔 input에 submit을 한 경우 input 값이 메서드에 들어갈 수 있도록 코드를 작성했습니다.

 const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault(); // 새로고침 막기
    if (isLoading || name === '' || email === '' || password === '') return;
    try {
      //create an account
      // createUserWithEmailAndPassword을 성공하면 자격 증명을 받게 되고 즉시 로그인됨, 존재하는 이메일이거나 비밀번호가 틀렸을 시에는 실패함
      const credentials = await createUserWithEmailAndPassword(
        auth,
        email,
        password
      );
      console.log(credentials.user); // 유저의 정보를 제공함, 이름,이메일,비밀번호가 출력됨

      //redirect to the home page
      // 로그인 완료 후 홈페이지로 이동
      navigate('/');
    } catch (e) {
      //setError
      if (e instanceof FirebaseError) {
        //console.log(e.code,e.message);
        setError(e.message);
      }
    }
  };

createUserWithEmailAndPassword 메서드는 auth, email, password를 필요로 합니다. 우리의 auth를 넣어주고, 입력받은 이메일과 패스워드를 넘겨줍니다. 이후 메서드가 유효성을 검사하고 성공하면 Usercredenial를 반환해줍니다.
코드에선 credential 변수로 반환값을 받아왔고, credentials.user를 통해 가입한 유저의 이메일, 비밀번호 등 정보를 확인할 수 있습니다.

users 현황 확인

위의 createUserWithEmailAndPassword()로 신규가입을 진행해보고 앱의 Authentication에 들어가 users를 확인해보면

이렇게 새 user가 추가된 것을 볼 수 있어요😲 (대박

3.3 로그인

signInWithEmailAndPassword 메서드

신규 가입과 같은 방식으로 input을 submit을 한 경우, 입력값이 메서드에 들어갈 수 있도록 코드를 작성했습니다.

const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();// 새로고침 막기
    if (isLoading || email === '' || password === '') return; // 입력값이 없으면 안됨
    try {
      await signInWithEmailAndPassword(auth, email, password);

      //redirect to the home page
      // 로그인 완료 후 홈페이지로 이동
      navigate('/');
    } catch (e) {
      //setError
      if (e instanceof FirebaseError) {
        //console.log(e.code,e.message);
        setError(e.message);
      }
    }
  };

signInWithEmailAndPassword 메서드는 auth, email, password를 필요로 합니다. 우리의 auth를 넣어주고, 입력받은 이메일과 패스워드를 넘겨줍니다. 이후 메서드가 유효성을 검사하고 성공하면 Usercredenial를 반환해줍니다. createUserWithEmailAndPassword 메서드랑 똑같아요 !!

3.4 로그아웃

signOut()메서드

import {  useNavigate } from 'react-router-dom';
import { auth } from '../firebase';

export default function Home() {
  const navigate = useNavigate();
  const logOut = () => {
    auth.signOut(); // 로그아웃
    navigate('/login'); // 홈페이지 이동
  };
  return (
    <h1>
      <button onClick={logOut}>Log Out</button>
    </h1>
  );
}