Typescript에서 React Hooks를 사용한 Firebase 인증

개요

Firebase는 신규 또는 기존 프로젝트에 쉽고 간단한 인증을 연결하는 훌륭한 제공업체이며 Google Cloud Platform의 다른 기능과 쉽게 통합할 수 있습니다. 응용 프로그램에 추가하는 것은 간단할 수 있지만 많은 자습서는 대규모 응용 프로그램과 품질 보증을 염두에 두고 깔끔하게 구현하는 방법에 적합하지 않습니다.

가정된 지식

파이어베이스

타이프스크립트

반응

React Hooks(특히 useContext)

설정

GCP 및 Firebase

시작하려면 GCP 계정을 설정하고 https://console.firebase.google.com/ 에서 Firebase 콘솔에 로그인해야 합니다. 그런 다음 이 실행에서 사용할 프로젝트를 설정해야 합니다. 이 연습에서는 프로젝트 이름을 "HooksAuth"로 지정했습니다.

그런 다음 왼쪽 메뉴에서 "인증"페이지로 이동하여 이메일/비밀번호 및 Google 인증을 활성화하겠습니다.

반응

반응 프로젝트를 처음부터 설정하려면 cli에서 다음 명령을 실행하여 create-react-app을 사용할 수 있습니다. npx create-react-app hooksAuth --template typescript
다음(선택 사항) 단계는 React 앱에서 모든 상용구 콘텐츠를 제거하는 것입니다. 예를 들어 반응 이미지, 매니페스트, App.tsx 콘텐츠 등. 이것은 내 사이트에 create-react-app 콘텐츠가 없는 깨끗한 슬레이트에서 시작하는 데 도움이 됩니다.

후크 설정

우리는 useContext를 통해 Firebase 앱을 추상화하여 앱을 통해 상태를 공유할 수 있고 모든 추상화 및 액세스를 쉽게 업데이트하고 리팩토링할 수 있도록 할 것입니다.

만들기 FirebaseContext.ts

이 파일에 구성을 추가하고(firebase 콘솔에서 웹 앱을 등록하여 검색할 수 있음) 다음과 같이 표시됩니다.

import firebase from 'firebase';

const firebaseConfig = {
    apiKey: "KEY",
    authDomain: "somedomain.firebaseapp.com",
    databaseURL: "https://somedomain.firebaseio.com",
    projectId: "hooksauth-ID_HERE",
    storageBucket: "hooksauth-ID_HERE.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

이제 .env를 사용하여 이러한 값을 보호하려고 합니다(실수로 커밋하기 전에). 이렇게 하려면 프로젝트 루트에 .env.local이라는 파일을 만들고 이 파일을 .gitignore에 추가합니다. 해당 파일에서 다음 형식과 유사한 형식으로 ID를 정의할 수 있습니다.

REACT_APP_API_KEY=KEY
REACT_APP_AUTH_DOMAIN=somedomain.firebaseapp.com
REACT_APP_DB_URL=https://somedomain.firebaseio.com
REACT_APP_PROJECT_ID=hooksauth-ID_HERE
REACT_APP_STORAGE_BUCKET=hooksauth-ID_HERE.appspot.com
REACT_APP_MESSAGING_SENDER_ID=SENDER_ID
REACT_APP_APP_ID=APP_ID

구성을 다음과 같이 업데이트하십시오.

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DB_URL,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID,
};

Firebase 초기화를 이동합니다. Firebase 초기화가 여러 번 발생하지 않도록 하려면 if 문으로 래핑하여 다음과 같이 만들고 싶습니다.

// Initialize Firebase
if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
}

이제 실제로 React 작업을 하고 싶습니다. 나머지 앱에서 사용할 컨텍스트를 만들고 싶습니다. 따라서 반응 후크를 사용하여 사용할 인증 공급자와 Firebase 개체에 액세스하는 방법을 포함하는 컨텍스트를 만듭니다.

export interface IFirebaseContext {
    firebase: firebase.app.App,
    authProviders: string[]
}

export const FirebaseContext = React.createContext({} as IFirebaseContext)

그런 다음 공급자가 앱을 래핑합니다.

export const FirebaseProvider = ({ children }: any) => {
    return (
        <div>
            <FirebaseContext.Provider value={{ 'firebase': firebase.app(), authProviders } as IFirebaseContext}>
                {children}
            </FirebaseContext.Provider>
        </div>
    );
}

이제 나머지 앱을 래핑합니다. 따라서 App.tsx에서 루트 div를 <FirebaseProvider> 에 래핑하려고 합니다. 이제 나머지 앱에서 auth 개체에 액세스하려면 const firebaseContext = useContext(FirebaseContext);를 호출하고 거기에서 액세스하면 됩니다. 이것은 firebase-ui 패키지와 결합하여 인증을 즉시 실행하고 실행할 수 있습니다

.

react-firebaseui 패키지를 사용하고 사용자 데이터를 저장하는 예는 내 github 저장소를 참조하십시오. https://github.com/bmpickford/firebase-auth-example

개선 사항이 있으면 언제든지 PR 또는 문제를 제출하십시오.