React 앱에서 Firebase를 사용한 인증. 🤺🔥

이 기사에서는 웹 앱에서 사용자를 인증하는 방법을 알아봅니다. 이 기사에서는 Google 인증을 사용하고 있습니다.
따르다....

Firebase 프로젝트 만들기

간단합니다. firebase에서 Google 계정으로 로그인하고 새 프로젝트를 만드세요.


해당 프로젝트에서 인증 탭으로 이동합니다.


로그인 방법 클릭

새 공급자 추가로 이동하여 Google을 선택합니다.


이제 프로젝트에서 웹앱을 만들어야 합니다.



구성 파일을 복사합니다.
이제 좋아하는 IDE를 열고 React 프로젝트를 만드십시오.src 폴더에서 fb.config.js/.ts라는 파일 이름을 만듭니다.

또한 firebase를 설치하는 것을 잊지 마십시오.

npm i firebase

우리는 앱에서 사용자 인증 상태를 사용하기 위해 컨텍스트를 사용하고 있습니다. authContext.tsx 파일을 생성합니다.

import { createContext, ReactComponentElement, ReactElement, useContext, useEffect, useState } from 'react'
import { User, GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged } from "firebase/auth"
import { auth, app } from "./fb.config"

interface value {
    user: User | null,
    logInUser: () => void,
    logOutUser: () => void,
}

const AuthCont = createContext<User | null>(null)

export const useAuthContext = () => {
    return useContext(AuthCont)
}

export default function authContext({ children }: { children: ReactElement }) {
    const [user, setUser] = useState<null | User>(null)
    useEffect(() => {
        onAuthStateChanged(auth, (user) => {
            setUser(user)
        })
    }, [])

    const logInUser = () => {
        const provider = new GoogleAuthProvider()
        signInWithPopup(auth, provider)
            .then((res) => {
                setUser(res.user)
            })
            .catch((err) => {
                console.log(err)
            })
    }
    const logOutUser = () => {
        signOut(auth)
        setUser(null)
    }

    const value = {
        user,
        logInUser,
        logOutUser
    }
    return (
        <AuthCont.Provider value={user}>
            {children}
        </AuthCont.Provider>
    )
}

이제 이것을 app.tsx 위에 놓기만 하면 모든 하위 구성 요소에서 사용할 수 있습니다.
main.tsx 파일로 이동하여 이 코드를 입력합니다.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import AuthProvider from "./authContext"

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <AuthProvider>
      <App />
    </AuthProvider>
  </React.StrictMode>
)