initial setup with auth check

Author: typescript-any

Diff for: app/root.tsx

@@ -3,12 +3,14 @@ import {
   Links,
   Meta,
   Outlet,
+  redirect,
   Scripts,
   ScrollRestoration,
 } from "react-router";
 
-import type { Route } from "./+types/root";
 import "./app.css";
+import type { Route } from "./+types/root";
+import { getCookiesFromRequest } from "./utils/cookie-utils";
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -73,3 +75,24 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
     </main>
   );
 }
+
+// Check authentication in server side loader
+export async function loader({ request }: Route.LoaderArgs) {
+  const cookies = getCookiesFromRequest(request);
+
+  const protectedRoutes = ["/dashboard", "/profile", "/"];
+  const authRoutes = ["/login", "/signup"];
+  const url = new URL(request.url);
+
+  let isAuthenticated = cookies?.access_token ? true : false;
+
+  if (protectedRoutes.includes(url.pathname) && !isAuthenticated) {
+    return redirect("/login");
+  }
+
+  if (authRoutes.includes(url.pathname) && isAuthenticated) {
+    return redirect("/");
+  }
+
+  return { message: "Hello, world!" };
+}

Diff for: app/routes.ts

@@ -1,3 +1,4 @@
-import { type RouteConfig, index } from "@react-router/dev/routes";
+import { type RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
 
-export default [index("routes/home.tsx")] satisfies RouteConfig;
+export default flatRoutes() satisfies RouteConfig;

Diff for: app/routes/_auth.login/route.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const LoginRoute = () => {
+  return <div>LoginRoute</div>;
+};
+
+export default LoginRoute;

Diff for: app/routes/_auth.signup/route.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const SignupRoute = () => {
+  return <div>SignupRoute</div>;
+};
+
+export default SignupRoute;

Diff for: app/routes/_auth/route.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Outlet } from "react-router";
+
+const AuthLayout = () => {
+  return (
+    <div>
+      <h1>AuthLayout</h1>
+      <Outlet />
+    </div>
+  );
+};
+
+export default AuthLayout;

Diff for: app/routes/_index.tsx

@@ -0,0 +1,17 @@
+import type { Route } from "../+types/root";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Expense Tracker" },
+    { name: "description", content: "Expense Tracker" },
+  ];
+}
+
+export default function Home() {
+  return (
+    <div className="text-center space-y-4 p-4">
+      <h1 className="text-2xl">Welcome to Home</h1>
+      <button className="px-4 py-2 bg-red-500">logout</button>
+    </div>
+  );
+}

Diff for: app/routes/_main.dashboard/route.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const DashboardRoute = () => {
+  return (
+    <div>
+      <h1>Welcome to Dashboard</h1>
+    </div>
+  );
+};
+
+export default DashboardRoute;

Diff for: app/routes/_main/route.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Outlet } from "react-router";
+
+const MainLayout = () => {
+  return (
+    <div>
+      <h1>MainLayout</h1>
+      <Outlet />
+    </div>
+  );
+};
+
+export default MainLayout;

Diff for: app/routes/home.tsx

@@ -0,0 +1,24 @@
+import type { Route } from "../+types/root";
+
+export const getCookiesFromRequest = (
+  request: Route.LoaderArgs["request"]
+): Record<string, string> | undefined => {
+  const cookieHeaders = request.headers.get("Cookie");
+
+  const cookies = cookieHeaders
+    ?.split("; ")
+    .map((cookie) => cookie.split("="))
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+
+  return cookies;
+};
+
+export const removeCookie = (name: string) => {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+};
+
+export const getCookie = (name: string) => {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop()?.split(";").shift();
+};