React + Firebase Authentication으로 로그인 기능을 쉽게 구현

소개

Firebase의 Authentication을 사용하여 React 애플리케이션의 로그인(인증) 기능을 매우 쉽게 구현할 수 있습니다.
몇가지 이미 기사는 있을까 생각합니다만, 조금 낡거나 움직이지 않았기 때문에 기사에 남겨 옵니다.
참고가되면 다행입니다!

전제

npx create-react-app 등으로 React 프로젝트 작성이 완료되었습니다

Firebase 콘솔에서 프로젝트 생성 및 등록이 완료되었습니다.

Firebase상에서의 작업이 아직의 분은, 하기등을 참고로 진행해 주세요.
htps : // 야노. jp / Rea ct-Fuebase-Aute Penchikachion /

흐르는 흐름

Firebase SDK를 React 애플리케이션으로로드

사용자 등록, 로그인 기능 구현

덧붙여 기사가 길어지지 않도록,
※CSS는 쓰고 있지 않습니다
※사용자 등록과 로그인 버튼이 동일 컴포넌트 내에 있습니다만 용서해 주세요...

그럼 자세한 내용을 살펴보겠습니다.

절차 ① Firebase SDK를 React 애플리케이션으로 불러오기

SDK의 위치는 아래의 설정 마크 → 프로젝트 설정 → 페이지 하단에 있습니다.

1. firebase 설치

npm i firebase

2. src 아래에 firebase 파일 만들기

firebaseConfig.ts

import firebase from 'firebase/app'
import 'firebase/auth'

const firebaseConfig = {
  apiKey: "hogehoge",
  authDomain: "hoge.firebaseapp.com",
  projectId: "hoge",
  storageBucket: "hoge.com",
  messagingSenderId: "hoge",
  appId: "hogehogehoge"
}

const fire = firebase.initializeApp(firebaseConfig)

export default fire

절차② 사용자 등록, 로그인 기능 구현

import React, { useState } from "react";
// firebaseConfigからfireをインポートする
import fire from "./firebaseConfig";

export const App: React.FC = () => {
  //ユーザー管理用state
  const [user, setUser] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  //ログインメソッド
  const handleLogin = () => {
    fire
      .auth()
      .signInWithEmailAndPassword(email, password)
  };

  //ユーザー登録メソッド
  const handleSignup = () => {
    fire
      .auth()
      .createUserWithEmailAndPassword(email, password)
  };

  //ログインしているかをチェックするメソッド
  const isLogin = () => {
    fire.auth().onAuthStateChanged((user) => {
      if (user) {
        setUser(user);
      } else {
        setUser("");
      }
    });
  };

  //レンダー後にisLoginを実行する
  useEffect(() => {
    isLogin();
  }, []);

  return (
    <div>
      {/* userのstateでコンポーネントを切り替えている */}
      { user ? (
         {/* ログイン後に表示したいコンポーネントを書く */}
      ) : (
        <div>
          <label htmlFor="email">メールアドレス</label>
          <input
            id="email"
            type="text"
            placeholder="メールアドレス"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="password">パスワード</label>
          <input
            id="password"
            type="password"
            placeholder="パスワード"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <div>
          <button
            type="button"
            onClick={handleSignup}
          >
            ユーザー登録する
          </button>
          <button
            type="button"
            onClick={handleLogin}
          >
            ログインする
          </button>
      </div>
      )}
    </div>
  );
};

이것으로 완료입니다 🙌

끝에

이것만의 기술로 인증 기능을 구현할 수 있는 것은 정말 편하네요.
긴 기사로 하고 싶지 않았기 때문에, 코드의 상세는 단단히 하고 있습니다. 궁금한 점이 있으면 댓글을 달아주세요!