Firebase 인증 + 반응

안녕! 저는 최근에 Firebase를 통해 React 애플리케이션에서 인증을 활성화하는 방법을 배웠습니다. 점을 연결하면 프로세스가 다소 간단하지만 그 점과 연결을 찾는 데 시간이 좀 걸렸습니다.

그래서 애플리케이션에서 인증을 활성화할 수 있도록 문서화하면 어떨까 하는 생각이 들었습니다. :)

이 게시물을 개선하기 위해 귀하의 피드백에 진심으로 감사드립니다. 시작하자:

1단계: Firebase 프로젝트 설정

Firebase를 React 프로젝트에 통합하기 전에 인증을 위해 Firebase에서 프로젝트를 구성하는 방법을 살펴보겠습니다. Firebase으로 이동하여 오른쪽 상단 모서리에 있는 Go to console 버튼을 클릭합니다.

Firebase 프로젝트 목록으로 리디렉션됩니다. 새 프로젝트를 만듭니다. 내 이름을 "테스트"로 지정하겠습니다.





프로젝트에 적합한 이름을 입력한 후 Continue를 클릭하면 enable Google analytics 페이지로 리디렉션됩니다. 설정에 영향을 주지 않으므로 이 기능을 활성화/비활성화하는 것은 귀하에게 달려 있습니다.

이제 Firebase가 마법을 수행하고 프로젝트를 설정할 때까지 기다립니다...

프로젝트가 준비되면 프로젝트 콘솔로 리디렉션됩니다. 사이드바에는 여러 메뉴 항목이 표시됩니다.



개발 메뉴 항목을 선택하면 하위 메뉴 항목 목록이 표시됩니다.



인증을 사용하려면 로그인 방법을 설정해야 합니다. authentication 메뉴 항목을 클릭하면 인증 페이지로 리디렉션됩니다. Sign-in method를 클릭하면 로그인 탭으로 이동합니다.



모든 로그인 방법이 비활성화되어 있음을 알 수 있습니다. React 애플리케이션에 대해 Email/Password 메서드를 활성화합니다. 아래로 스크롤하면 oAuth 리디렉션을 위한 도메인을 추가할 수 있는 승인된 도메인 섹션이 표시됩니다.

그리고 그게 다야! 프로젝트를 설정했지만 이 프로젝트를 React 애플리케이션에 어떻게 연결할까요?

요청해 주셔서 감사합니다. 구성 세부 정보를 가져오면 완료됩니다. 그 전에 firebase에서 웹 앱을 설정해야 합니다.

2단계: Firebase 웹 앱 설정

웹 앱을 설정하려면 콘솔 홈페이지로 이동하여 사이드바에서 Project Overview 메뉴 항목을 클릭해야 합니다.



기본 대시보드 페이지에서 아래 강조 표시된 대로 </> 버튼을 선택합니다.



이 버튼을 클릭하면 Add Firebase to your web app라는 제목의 창이 슬라이드 인됩니다. 내 이름을 지정하겠습니다test-app. 애플리케이션 호스팅에 Firebase를 사용하려면 체크박스를 선택하면 됩니다. 그러나 이 게시물에서는 해당 단계를 다루지 않겠습니다.
Register app 버튼을 클릭하면 Firebase 프로젝트를 React 애플리케이션에 연결하는 데 도움이 되는 중요한 구성이 포함된 두 개의 스크립트 태그가 표시됩니다.

다음과 같이 표시됩니다.

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "XXXXXX",
    authDomain: "XXXXX",
    databaseURL: "XXXXXX",
    projectId: "XXXXXX",
    storageBucket: "XXXXXX",
    messagingSenderId: "XXXXXX",
    appId: "XXXXXXX"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

완벽한! 이제 React 앱에서 Firebase 인증을 활성화하는 데 필요한 자격 증명이 있습니다. 다음으로 React 앱을 구성하겠습니다.

3단계: React 앱에서 Firebase 인증 활성화

귀하가 수행한 단계create-react-app, 응용 프로그램을 생성한 단계, 응용 프로그램을 실행하기 위해 수행할 수 있는 단계npm run start는 건너뛰겠습니다.

Firebase 패키지 설치부터 시작하겠습니다. 터미널을 사용하여 반응 앱의 루트 디렉토리 내부로 이동하고 다음을 입력하십시오.

   npm install --save firebase

3a단계: .env 파일 설정

.env 파일을 만들어 React 프로젝트의 루트 디렉토리에 배치합니다.
중요: .env 파일의 내용은 기밀이므로 .gitignore에 파일을 추가했는지 확인하십시오.

REACT_APP_API_KEY=XXX
REACT_APP_AUTH_DOMAIN=XXX
REACT_APP_DATABASE_URL=XXX
REACT_APP_PROJECT_ID=XXX
REACT_APP_STORAGE_BUCKET=XXX
REACT_APP_MESSAGING_SENDER_ID=XXX
REACT_APP_APP_ID=XXX

이러한 키의 값은 step 2에서 수집한 구성 데이터입니다.

3b단계: Firebase 구성요소 생성

Firebase 인스턴스를 초기화하는 데 사용할 Firebase.js라는 구성 요소를 만듭니다.

import firebase from "firebase/app";
import "firebase/auth";

const config = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    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_MESSAGING_SENDER_ID,
};

firebase.initializeApp(config);
export const auth = firebase.auth();

3c단계: React Context를 통해 Firebase 인증 활용

React는 컨텍스트를 통해 구성 요소 트리 간에 전역적으로 데이터를 공유할 수 있습니다. 로그인, 로그아웃 및 가입과 같은 인증과 관련된 모든 기능을 처리할 인증 컨텍스트 구성 요소를 만듭니다.

import React, {createContext, useEffect, useState} from 'react';
import {auth} from "../components/Firebase";

export const AuthContext = createContext(null);

export const AuthProvider = (props) => {
    const [userState, setUserState] = useState(null);
    const [authPending, setAuthPending] = useState(true);

    const signIn = (username, password) => {
        return auth.signInWithEmailAndPassword(username, password);
    }

    const signUp = (username, password) => {
        return auth.createUserWithEmailAndPassword(username, password);
    }

    const signOut = () => auth.signOut();

    useEffect(() => {
        return auth.onAuthStateChanged((userAuth) => {
            console.log(userAuth);
            setUserState(userAuth);
            setAuthPending(false);
        })
    }, [])

    if (authPending) {
        return (
            <div style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "100vh"}}
            >
                <div>Authentication in progress</div>
            </div>
        )
    }

    return (
        <AuthContext.Provider value={{
            signIn: signIn,
            signUp: signUp,
            signOut: signOut,
            userState: userState
        }}>
            {props.children}
        </AuthContext.Provider>
    )
}

이제 AuthProvider를 통해 글로벌 데이터와 기능을 제공해야 합니다.

이것은 index.js 파일입니다.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import {AuthProvider} from "./context/AuthContext";

ReactDOM.render(
    <React.StrictMode>
        <AuthProvider>
            <App/>
        </AuthProvider>
    </React.StrictMode>,
    document.getElementById("root")
);

그게 다야! 이제 인증을 위해 애플리케이션에서 이러한 기능을 사용할 수 있습니다.