Consolidate authentication code

web/app/routes/logbook.flights.$id/route.tsx

@@ -1,12 +1,11 @@
 import { client } from "@/util/api";
 import { List, Stack, Text } from "@mantine/core";
 import { useParams } from "@remix-run/react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 
 export default function Flight() {
   const params = useParams();
 
-  const queryClient = useQueryClient();
   const flight = useQuery({
     queryKey: [params.id],
     queryFn: async () =>

web/app/routes/logbook.flights/flights-list.tsx

@@ -1,20 +1,11 @@
 import { client } from "@/util/api";
-import {
-  Divider,
-  NavLink,
-  Text,
-  Container,
-  Button,
-  ScrollArea,
-  Stack,
-} from "@mantine/core";
+import { Flight } from "@/util/types";
+import { NavLink, Text, Button, ScrollArea, Stack } from "@mantine/core";
 import { Link, useLocation } from "@remix-run/react";
 import { IconPlus } from "@tabler/icons-react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 
 export function FlightsList() {
-  const queryClient = useQueryClient();
-
   const flights = useQuery({
     queryKey: ["flights-list"],
     queryFn: () => client.get(`/flights`).then((res) => res.data),
@@ -30,7 +21,7 @@ export function FlightsList() {
       </Button>
       <ScrollArea>
         {flights.data ? (
-          flights.data.map((flight, index) => (
+          flights.data.map((flight: Flight, index: number) => (
             <NavLink
               key={index}
               component={Link}
@@ -48,8 +39,6 @@ export function FlightsList() {
 }
 
 export function MobileFlightsList() {
-  const queryClient = useQueryClient();
-
   const flights = useQuery({
     queryKey: ["flights-list"],
     queryFn: () => client.get(`/flights`).then((res) => res.data),
@@ -62,7 +51,7 @@ export function MobileFlightsList() {
     <Stack p="0" m="0" justify="space-between" h="calc(100vh - 95px)">
       <ScrollArea h="calc(100vh - 95px - 50px">
         {flights.data ? (
-          flights.data.map((flight, index) => (
+          flights.data.map((flight: Flight, index: number) => (
             <NavLink
               key={index}
               component={Link}

web/app/routes/logbook.me/route.tsx

@@ -1,12 +1,12 @@
-import { useMe } from "@/util/hooks";
+import { useAuth } from "@/util/auth";
 import { Container, Title } from "@mantine/core";
 
 export default function Me() {
-  const me = useMe();
+  const { user } = useAuth();
 
   return (
     <Container>
-      <Title order={2}>{me.data?.username}</Title>
+      <Title order={2}>{user}</Title>
     </Container>
   );
 }

web/app/routes/logbook/route.tsx

@@ -1,6 +1,8 @@
 import { TailfinAppShell } from "@/ui/nav/app-shell";
+import { useAuth } from "@/util/auth";
 import type { MetaFunction } from "@remix-run/node";
-import { Outlet } from "@remix-run/react";
+import { Outlet, useNavigate } from "@remix-run/react";
+import { useEffect } from "react";
 
 export const meta: MetaFunction = () => {
   return [
@@ -10,11 +12,20 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
+  const { user, loading } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    console.log("loading: " + loading);
+    console.log("user: " + user);
+    if (!loading && !user) {
+      navigate("/login");
+    }
+  }, [user, loading, navigate]);
+
   return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
-      <TailfinAppShell>
-        <Outlet />
-      </TailfinAppShell>
-    </div>
+    <TailfinAppShell>
+      <Outlet />
+    </TailfinAppShell>
   );
 }

web/app/routes/login/route.tsx

@@ -1,5 +1,4 @@
-import { client } from "@/util/api";
-import { useLogin } from "@/util/hooks";
+import { useAuth } from "@/util/auth";
 import {
   Box,
   Button,
@@ -19,7 +18,7 @@ export default function Login() {
     },
   });
 
-  const signInMutation = useLogin();
+  const { signin } = useAuth();
 
   return (
     <Stack gap="md" h="100%" justify="center" align="stretch">
@@ -29,7 +28,7 @@ export default function Login() {
       <Box maw={340} mx="auto">
         <form
           onSubmit={form.onSubmit((values) => {
-            signInMutation(values);
+            signin(values);
           })}
         >
           <TextInput