Merge branch 'dev'

Author: deanjstone

src/Account.tsx

@@ -1,8 +1,9 @@
-import { Component, createEffect, createSignal } from "solid-js";
+import { Component } from "solid-js";
 import { Router, Route } from "@solidjs/router";
 import { Toaster } from "solid-toast";
 
-import Login from "./components/Login";
+import { AuthLayout } from "./components/auth-layout";
+import Login from "./components/login";
 import Dashboard from "./pages/dashboard";
 import Profile from "./pages/profile";
 import About from "./pages/about";
@@ -15,11 +16,36 @@ const App: Component = () => {
   return (
     <>
       <Router base={base}>
+        {/* Public routes */}
         <Route path="/login" component={Login} />
         <Route path="/" component={Login} />
-        <Route path="/dashboard" component={Dashboard} />
-        <Route path="/profile" component={Profile} />
-        <Route path="/about" component={About} />
+
+        {/* Protected routes with AuthLayout */}
+        <Route
+          path="/dashboard"
+          component={() => (
+            <AuthLayout>
+              <Dashboard />
+            </AuthLayout>
+          )}
+        />
+        <Route
+          path="/profile"
+          component={() => (
+            <AuthLayout>
+              <Profile />
+            </AuthLayout>
+          )}
+        />
+        <Route
+          path="/about"
+          component={() => (
+            <AuthLayout>
+              <About />
+            </AuthLayout>
+          )}
+        />
+        {/* 404 route */}
         <Route path="/**404" component={NotFound} />
       </Router>
       <Toaster />

src/App.tsx

@@ -24,13 +24,13 @@ const Login = () => {
   const navigate = useNavigate();
   const supaAuth = useSupabaseAuth();
 
-  // createEffect(() => {
-  //   supaAuth.getSession().then(({ data: { session } }) => {
-  //     if (session) {
-  //       navigate("/dashboard");
-  //     }
-  //   });
-  // });
+  createEffect(() => {
+    supaAuth.getSession().then(({ data: { session } }) => {
+      if (session) {
+        navigate("/dashboard");
+      }
+    });
+  });
 
   const handleSendToken = async (e: SubmitEvent) => {
     e.preventDefault();
@@ -134,12 +134,11 @@ const Login = () => {
               </p>
               <p class="truncate font-medium text-center">{email()}</p>
               <TextField class="grid gap-2">
-                {/* <TextFieldLabel>Verification Code</TextFieldLabel> */}
                 <TextFieldInput
                   id="token"
                   class="text-center text-lg tracking-wide"
                   type="text"
-                  placeholder="Enter verification code"
+                  placeholder="Verification code"
                   value={token()}
                   onChange={(e) => setToken(e.currentTarget.value)}
                   maxLength={6}

src/components/Login.tsx

@@ -0,0 +1,48 @@
+import { Show, JSX, createEffect, createSignal } from "solid-js";
+import { A, useNavigate } from "@solidjs/router";
+import { useSupabase } from "solid-supabase";
+
+import { UserNav } from "./user-nav";
+import { SiteNav } from "./site-nav";
+
+interface AuthLayoutProps {
+  children: JSX.Element;
+}
+
+export function AuthLayout(props: AuthLayoutProps) {
+  const [isAuthenticated, setIsAuthenticated] = createSignal(false);
+  const navigate = useNavigate();
+  const supabase = useSupabase();
+
+  createEffect(async () => {
+    const { data } = await supabase.auth.getSession();
+
+    if (!data.session) {
+      navigate("/login", { replace: true });
+      return;
+    }
+
+    setIsAuthenticated(true);
+  });
+
+  return (
+    <Show when={isAuthenticated()}>
+      <div class="min-h-screen flex flex-col">
+        <header class="border-b sticky top-0 z-30 bg-background">
+          <div class="container flex h-16 items-center justify-between py-4">
+            <div class="flex gap-6 items-center">
+              <A
+                href="/dashboard"
+                class="font-semibold flex items-center gap-2">
+                Supa Solid User
+              </A>
+              <SiteNav />
+            </div>
+            <UserNav />
+          </div>
+        </header>
+        <main class="flex-1">{props.children}</main>
+      </div>
+    </Show>
+  );
+}

src/components/auth-layout.tsx

@@ -0,0 +1,29 @@
+import { A } from "@solidjs/router";
+
+interface NavLinkProps {
+  href: string;
+  children: any;
+  active?: boolean;
+}
+
+const NavLink = (props: NavLinkProps) => {
+  return (
+    <A
+      href={props.href}
+      class="text-sm font-medium transition-colors hover:text-primary"
+      activeClass="text-foreground font-semibold"
+      inactiveClass="text-muted-foreground">
+      {props.children}
+    </A>
+  );
+};
+
+export function SiteNav() {
+  return (
+    <nav class="flex items-center space-x-6">
+      <NavLink href="/dashboard">Dashboard</NavLink>
+      <NavLink href="/profile">Profile</NavLink>
+      <NavLink href="/about">About</NavLink>
+    </nav>
+  );
+}