feat: added stuff

client/src/apis/hooks/auth/useAuthState.ts

@@ -1,28 +1,28 @@
+import { useNavigate } from "@tanstack/react-router";
 import { isAxiosError } from "axios";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import Firebase from "../../../integrations/firebase";
 import { useAuthStore } from "../../../store/auth";
 import { getSigninMetaData } from "../../http/endpoints/auth";
+import { useAuth } from "./useGoogleLogin";
 
 export const useAuthState = () => {
- const [isLoading, setIsLoading] = useState(false);
  const { setLogin, setPendingStatus } = useAuthStore();
+ const { signOut } = useAuth();
+ const navigate = useNavigate();
 
  useEffect(() => {
- setIsLoading(true);
  const unsubscribe = Firebase.auth.onAuthStateChanged(async (user) => {
  setPendingStatus(true);
  try {
  if (user) {
  const signInRes = await getSigninMetaData();
- if (signInRes.status === 200) console.log("Logged in!!");
- if (signInRes.status === 201) console.log("Signed up!!");
  setLogin(signInRes.data.data);
+ navigate({ to: "/dashboard" });
+ if (signInRes.status === 201) console.log("Signed up!!");
  }
  } catch (error) {
- if (isAxiosError(error)) {
- await Firebase.auth.signOut();
- }
+ if (isAxiosError(error)) await signOut();
  } finally {
  setPendingStatus(false);
  }
@@ -31,5 +31,4 @@ export const useAuthState = () => {
  unsubscribe();
  };
  }, []);
- return { isLoading };
 };

client/src/apis/hooks/auth/useGoogleLogin.ts

@@ -1,11 +1,13 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 import Firebase from "../../../integrations/firebase";
+import { useAuthStore } from "../../../store/auth";
 
 export const GOOGLE_LOGIN = "GOOGLE_LOGIN_Q_KEY" as const;
 
 export const useAuth = () => {
  const queryClient = useQueryClient();
+ const { setLogout } = useAuthStore();
  return {
  signIn: () =>
  queryClient.ensureQueryData({
@@ -20,6 +22,7 @@ export const useAuth = () => {
  }),
  signOut: async () => {
  await Firebase.auth.signOut();
+ setLogout();
  },
  };
 };

client/src/app.tsx

@@ -0,0 +1,25 @@
+import { createRouter, RouterProvider } from "@tanstack/react-router";
+import { queryClient } from "./integrations/network";
+import { routeTree } from "./routeTree.gen";
+import { useAuthStore } from "./store/auth";
+
+const router = createRouter({
+ routeTree,
+ context: {
+ queryClient,
+ auth: undefined!,
+ },
+ defaultPreload: "intent",
+ defaultPreloadStaleTime: 0,
+});
+
+declare module "@tanstack/react-router" {
+ interface Register {
+ router: typeof router;
+ }
+}
+
+export const App = () => {
+ const authState = useAuthStore();
+ return <RouterProvider router={router} context={{ auth: authState }} />;
+};

client/src/index.tsx

@@ -9,6 +9,7 @@ const router = createRouter({
  routeTree,
  context: {
  queryClient,
+ auth: undefined!,
  },
  defaultPreload: "intent",
  defaultPreloadStaleTime: 0,

client/src/routeTree.gen.ts

@@ -13,7 +13,7 @@
 import { Route as rootRoute } from './routes/__root'
 import { Route as SigninImport } from './routes/signin'
 import { Route as AuthImport } from './routes/_auth'
-import { Route as IndexImport } from './routes/index'
+import { Route as AuthDashboardImport } from './routes/_auth/dashboard'
 
 // Create/Update Routes
 
@@ -27,22 +27,15 @@ const AuthRoute = AuthImport.update({
  getParentRoute: () => rootRoute,
 } as any)
 
-const IndexRoute = IndexImport.update({
- path: '/',
- getParentRoute: () => rootRoute,
+const AuthDashboardRoute = AuthDashboardImport.update({
+ path: '/dashboard',
+ getParentRoute: () => AuthRoute,
 } as any)
 
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
- '/': {
- id: '/'
- path: '/'
- fullPath: '/'
- preLoaderRoute: typeof IndexImport
- parentRoute: typeof rootRoute
- }
  '/_auth': {
  id: '/_auth'
  path: ''
@@ -57,12 +50,22 @@ declare module '@tanstack/react-router' {
  preLoaderRoute: typeof SigninImport
  parentRoute: typeof rootRoute
  }
+ '/_auth/dashboard': {
+ id: '/_auth/dashboard'
+ path: '/dashboard'
+ fullPath: '/dashboard'
+ preLoaderRoute: typeof AuthDashboardImport
+ parentRoute: typeof AuthImport
+ }
  }
 }
 
 // Create and export the route tree
 
-export const routeTree = rootRoute.addChildren({ IndexRoute, SigninRoute })
+export const routeTree = rootRoute.addChildren({
+ AuthRoute: AuthRoute.addChildren({ AuthDashboardRoute }),
+ SigninRoute,
+})
 
 /* prettier-ignore-end */
 
@@ -72,19 +75,22 @@ export const routeTree = rootRoute.addChildren({ IndexRoute, SigninRoute })
  "__root__": {
  "filePath": "__root.tsx",
  "children": [
- "/",
  "/_auth",
  "/signin"
  ]
  },
- "/": {
- "filePath": "index.tsx"
- },
  "/_auth": {
- "filePath": "_auth.tsx"
+ "filePath": "_auth.tsx",
+ "children": [
+ "/_auth/dashboard"
+ ]
  },
  "/signin": {
  "filePath": "signin.tsx"
+ },
+ "/_auth/dashboard": {
+ "filePath": "_auth/dashboard.tsx",
+ "parent": "/_auth"
  }
  }
 }

client/src/routes/__root.tsx

@@ -1,5 +1,13 @@
-import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { QueryClient } from "@tanstack/react-query";
+import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
 import React from "react";
+import { useAuthState } from "../apis/hooks/auth";
+import { useAuthStore } from "../store/auth";
+
+interface RouterContext {
+ auth: ReturnType<typeof useAuthStore>;
+ queryClient: QueryClient;
+}
 
 const TanStackRouterDevtools =
  import.meta.env.PUBLIC_ENVIRONMENT === "production"
@@ -10,11 +18,14 @@ const TanStackRouterDevtools =
  }))
  );
 
-export const Route = createRootRoute({
- component: () => (
- <>
- <Outlet />
- <TanStackRouterDevtools />
- </>
- ),
+export const Route = createRootRouteWithContext<RouterContext>()({
+ component: () => {
+ useAuthState();
+ return (
+ <>
+ <Outlet />
+ <TanStackRouterDevtools />
+ </>
+ );
+ },
 });

client/src/routes/_auth.tsx

@@ -1,5 +1,13 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/_auth")({
- component: () => <div>Hello /_auth!</div>,
+ beforeLoad: ({ context }) => {
+ if (!context.auth.isAuthenticated)
+ throw redirect({
+ to: "/signin",
+ search: {
+ redirect: location.href,
+ },
+ });
+ },
 });

client/src/routes/_auth/dashboard.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useAuth } from "../../apis/hooks/auth";
+
+export const Route = createFileRoute("/_auth/dashboard")({
+ component: Dashboard,
+});
+
+function Dashboard() {
+ const { signOut } = useAuth();
+
+ return (
+ <div>
+ <button onClick={signOut}>SignOut</button>
+ </div>
+ );
+}

client/src/routes/signin.tsx

@@ -1,9 +1,16 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { useAuth } from "../apis/hooks/auth";
 
 export const Route = createFileRoute("/signin")({
- component: Login,
+ component: SignIn,
 });
 
-function Login() {
- return <div>Login</div>;
+function SignIn() {
+ const { signIn } = useAuth();
+
+ return (
+ <div>
+ <button onClick={signIn}>Google Login</button>
+ </div>
+ );
 }

client/src/store/auth/index.ts

@@ -1,18 +1,19 @@
 import { create } from "zustand";
 import { IUser } from "./types";
 
-interface State {
+export interface IAuthState {
  isAuthenticated: boolean;
  user: IUser | null;
  isPending: boolean;
 }
 
-interface Action {
+export interface IAuthAction {
  setLogin: (payload: IUser) => void;
  setPendingStatus: (pendingStatus: boolean) => void;
+ setLogout: () => void;
 }
 
-const useRootState = create<State & Action>((set) => ({
+const useRootState = create<IAuthState & IAuthAction>((set) => ({
  isPending: false,
  isAuthenticated: false,
  user: null,