react-query-firebase를 사용하여 Firebase에서 사용자 인증 및 인증 상태 관리

설정 프로세스의 2부입니다.

초기 커밋에 대한 이 자습서의 과정 파일 + 인증 추가course files

첫 번째 단계는 react-router-dom 경로를 설정하는 것입니다.

import React from 'react';
import './App.css';
import { Routes, Route } from "react-router-dom";
import { BrowserRouter } from 'react-router-dom';
import { Toolbar } from './components/Toolbar/Toolbar';
import { Project } from './components/Projects/Project';
import { Home } from './components/Home/Home';

function App() {
  return (
    <div className="h-screen w-screen overflow-x-hidden ">
      <BrowserRouter>
      <div className="fixed top-[0px] right-1 w-full z-30">
      <Toolbar />
      </div>
      <div className="w-full h-full mt-16 ">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/project" element={<Project />} />
         </Routes>
      </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

두 개의 경로 home.tsx 및 projects.tsx를 추가합니다. 참고 toolbar.txt는 사용자 프로필 사진을 배치하기에 좋은 장소를 만드는 모든 곳에서 사용할 수 있기 때문에 경로가 필요하지 않습니다.

import React from 'react'
import { GrHome } from "react-icons/gr";
import { IconContext } from "react-icons/lib";
import { Link} from "react-router-dom";
import { FaUserCircle } from 'react-icons/fa';
import { useAuthSignOut} from '@react-query-firebase/auth';
import { auth } from '../../firebase/firebaseConfig';
import { User } from 'firebase/auth';
interface ToolbarProps {
user?:User|null
}

export const Toolbar: React.FC<ToolbarProps> = ({user}) => {
const mutation = useAuthSignOut(auth);
const userImg =user?.photoURL;
const image =userImg?userImg:'https://picsum.photos/id/237/100/100'
return (
 <div className='w-full bg-slate-500 h-16'>
<IconContext.Provider value={{ size: "25px", className: "table-edit-icons" }} >
 <div className='flex flex-grow flex-3'>
<div className='m-1 w-full p-3 bg-slate-800'>
     <Link to="/"><GrHome /></Link>
     </div>
     <div className='m-1 w-full p-3 bg-slate-600'>
     <Link to="/project">Project</Link>
     </div>
     <div className='m-1 w-fit p-3 bg-slate-700'>
      {!user?<FaUserCircle />
       :<img  
    //   @ts-ignore 
       src={image} 
       alt={'no'}
       onClick={()=>{mutation.mutate()}}
       className="rounded-[50%] h-full  w-[70px]"
       />}
     </div>

</div>   
</IconContext.Provider>
 </div>
);
}

이 앱은 관련 데이터를 표시할 사람이 누구인지 알아야 하므로 인증된 경우에만 표시되도록 경로를 보호하고 로그인 페이지로 리디렉션해야 합니다.

import { Navigate } from 'react-router-dom';

//@ts-ignore
export const ProtectedRoute = ({ user, children }) => {
    if (!user) {
      return <Navigate to="/login" replace />;
    }

    return children;
  };

위의 구성 요소로 경로를 래핑합니다.

import React from "react";
import "./App.css";
import { Routes, Route} from "react-router-dom";
import { BrowserRouter} from "react-router-dom";
import { Toolbar } from "./components/Toolbar/Toolbar";
import { Project } from "./components/Projects/Project";
import { Home } from "./components/Home/Home";
import { useAuthUser } from "@react-query-firebase/auth";
import { auth } from "./firebase/firebaseConfig";
import { Login } from "./components/auth/Login";
import { ProtectedRoute } from "./components/auth/PrivateRoutes";

function App() {
const user= {}
 return (
    <div className="h-screen w-screen overflow-x-hidden ">
      <BrowserRouter>
        <div className="fixed top-[0px] right-1 w-full z-30">
          <Toolbar user={user} />
        </div>
        <div className="w-full h-full mt-16 ">
          <Routes>
            <Route
              path="/"
              element={
                <ProtectedRoute user={user}>
                  <Home />
                </ProtectedRoute>
              }
            />

            <Route
              path="/project"
              element={
                <ProtectedRoute user={user}>
                  <Project />
                </ProtectedRoute>
              }
            />
            {/* @ts-ignore */}
            <Route path="/login" element={<Login user={user} />} />
          </Routes>
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

우리는 또한 로그인 경로를 추가했습니다.

인증 부분을 설정하는 것은 매우 간단합니다. firebaseConfig.ts 파일에서 getAuth()에서 인증을 내보냅니다.

import { initializeApp } from "firebase/app";
import { getAuth} from "firebase/auth";


const firebaseConfig = {
//your firebase app credentials go here
  };

const app = initializeApp(firebaseConfig);

export const provider = new GoogleAuthProvider();
export const auth = getAuth(app)

react-query-firebase 후크를 사용하여 한 줄로 인증 상태를 쿼리할 수 있습니다.

  const query = useAuthUser("user", auth);
  const user = query.data;
  if (query.isFetching) {
return <div className="w-full h-full flex-center ">Loading...</div>;
  }

사용자 개체를 app.tsx에서 필요한 하위 구성 요소로 전달합니다.

사용자 추가에 관해서는 Google signinwithRedirect를 선택했습니다.

import { GoogleAuthProvider, signInWithRedirect } from "firebase/auth";
import { auth} from "../../firebase/firebaseConfig";

const provider = new GoogleAuthProvider();
provider.addScope('https://mail.google.com/');
export const loginUser= () => {
signInWithRedirect(auth, provider)
.then((result:any) => {
console.log("sign in successful result  === ",result)
// The signed-in user info.
    const user = result.user;
  }).catch((error) => {
// Handle Errors here.
console.log("sign in error  === ",error)

 });



}

저장소에서 프로필 사진을 클릭하면 로그아웃할 수 있음을 알 수 있습니다.

후크를 사용하여const mutation = useAuthSignOut(auth);
그런 다음 전화mutation.mutate();
프로필 사진 클릭

이것이 다음 부분의 인증을 위한 것입니다. firestore로 기능 부분을 시작하겠습니다.

참조:
react-query-firebase auth
firebase auth using google