Authenticating Users In Firebase and managing Auth state using react-query-firebase

this is part 2 to the set up process here

This tutorial's course files on the initial commit + adding auth course files

First step is to set up react-router-dom routes,

typescript

1import React from 'react';
2import './App.css';
3import { Routes, Route } from "react-router-dom";
4import { BrowserRouter } from 'react-router-dom';
5import { Toolbar } from './components/Toolbar/Toolbar';
6import { Project } from './components/Projects/Project';
7import { Home } from './components/Home/Home';
8
9function App() {
10  return (
11    <div className="h-screen w-screen overflow-x-hidden ">
12      <BrowserRouter>
13      <div className="fixed top-[0px] right-1 w-full z-30">
14      <Toolbar />
15      </div>
16      <div className="w-full h-full mt-16 ">
17        <Routes>
18          <Route path="/" element={<Home />} />
19          <Route path="/project" element={<Project />} />
20         </Routes>
21      </div>
22      </BrowserRouter>
23    </div>
24  );
25}
26
27export default App;

adding two routes , home.tsx and projects.tsx . notice toolbar.txt doesn't need a route since it'll be available evey where making iy a good place to place the user profile pic

typescript

1
2import React from 'react'
3import { GrHome } from "react-icons/gr";
4import { IconContext } from "react-icons/lib";
5import { Link} from "react-router-dom";
6import { FaUserCircle } from 'react-icons/fa';
7import { useAuthSignOut} from '@react-query-firebase/auth';
8import { auth } from '../../firebase/firebaseConfig';
9import { User } from 'firebase/auth';
10interface ToolbarProps {
11user?:User|null
12}
13
14export const Toolbar: React.FC<ToolbarProps> = ({user}) => {
15const mutation = useAuthSignOut(auth);
16const userImg =user?.photoURL;
17const image =userImg?userImg:'https://picsum.photos/id/237/100/100'
18return (
19 <div className='w-full bg-slate-500 h-16'>
20<IconContext.Provider value={{ size: "25px", className: "table-edit-icons" }} >
21 <div className='flex flex-grow flex-3'>
22<div className='m-1 w-full p-3 bg-slate-800'>
23     <Link to="/"><GrHome /></Link>
24     </div>
25     <div className='m-1 w-full p-3 bg-slate-600'>
26     <Link to="/project">Project</Link>
27     </div>
28     <div className='m-1 w-fit p-3 bg-slate-700'>
29      {!user?<FaUserCircle />
30       :<img  
31    //   @ts-ignore 
32       src={image} 
33       alt={'no'}
34       onClick={()=>{mutation.mutate()}}
35       className="rounded-[50%] h-full  w-[70px]"
36       />}
37     </div>
38
39</div>   
40</IconContext.Provider>
41 </div>
42);
43}
44

since this app will need to know who is who to display relevant data , we'll need to auth guard the routes to only show when authed else redirect to a login page

typescript

1import { Navigate } from 'react-router-dom';
2
3//@ts-ignore
4export const ProtectedRoute = ({ user, children }) => {
5    if (!user) {
6      return <Navigate to="/login" replace />;
7    }
8  
9    return children;
10  };

Authenticating Users In Firebase and managing Auth state using react-query-firebase

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

Authenticating Users In Firebase and managing Auth state using react-query-firebase

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

More posts

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

More posts

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider