Firebase 인증으로 React에서 인증

인증은 거의 모든 최신 웹 앱에 필요한 것입니다. 사용자 Auth0 및 다음 인증이 있지만 Firebase가 인증을 시작하고 실행하는 가장 쉬운 방법을 제공하는 것 같습니다.

Firebase 앱 등록

이제 Firebase에 새 프로젝트를 만들어야 합니다. Firebase Console으로 이동하여 Add project를 클릭합니다.


이 프로젝트를 만든 후 프로젝트 콘솔에서 웹 아이콘을 클릭하여 새 웹앱을 만듭니다. 지침에 따라 다음과 같은 구성을 복사합니다.


이 프로젝트를 생성한 후 인증 탭으로 이동하고 Get Started를 클릭합니다. 그런 다음 Google를 클릭합니다.

시작하기

npm install firebase

/src라는 새 폴더를 /lib/auth에 만듭니다. 이 인증 폴더 안에 파일을 만듭니다index.js.

먼저 필요한 것을 가져오고 상수를 초기화합니다.

import {getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged} from 'firebase/auth'
import {initializeApp} from 'firebase/app'
import { createContext, useContext, useEffect, useState } from 'react'


const app = initializeApp({
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId
})


const auth = getAuth()

const googleProvider = new GoogleAuthProvider()

const UserContext = createContext()

모든 구성 요소에서 사용자 개체에 액세스할 수 있도록 공급자context를 생성해야 합니다.

/src/lib/auth/index.js

export const AuthProvider = ({children}) => {

    const [user, setUser] = useState()

    useEffect(() => {
        onAuthStateChanged(auth, (user) => {
            if(user) {
                setUser(user)
            } else {
                setUser(undefined)
            }
        })
    }, [])

    return (
        <UserContext.Provider value={user}>
            {children}
        </UserContext.Provider>
    )
}

export const googleSignIn = () => {
    signInWithPopup(auth, googleProvider)
}

onAuthStateChanged는 사용자의 로그인 상태 변경에 대한 관찰자를 만듭니다.

이제 이것으로 기본 수준 구성 요소를 마무리할 수 있습니다AuthProvider.

index.js

ReactDOM.render(
  <React.StrictMode>
    <AuthProvider>

      <App />

    </AuthProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

마지막으로 signInGoogle , signOut 및 useAuth 함수를 만들 수 있습니다.

export const useAuth = () => {
    return useContext(UserContext)
}

export const googleSignIn = () => {
    signInWithPopup(auth, googleProvider)
        .then(value => {})
        .catch(reason => {console.error(reason)})
}

export const signOut = () => {
    auth.signOut()
        .then(value => {})
        .catch(reason => {console.error(reason)})
}

이제 App.js에서 이러한 기능을 사용할 수 있습니다.

import {googleSignIn, signOut, useAuth} from './lib/auth'

function App() {

  const user = useAuth()

  return (
    <div>
      {JSON.stringify(user)}
      <button onClick={(e) => {
        e.preventDefault()
        googleSignIn()
      }}>Sign in with google</button>
      <button onClick={(e) => {
        e.preventDefault()
        signOut()
      }}>Sign Out</button>
    </div>
  );
}

export default App;

전체 코드 here .