updated with-auth example

Author: thomasbuilds

examples/pnpm-lock.yaml

@@ -0,0 +1,3 @@
+SESSION_SECRET = myverylonguniquesecretthatkeepsthingssafe
+DISCORD_ID = 
+DISCORD_SECRET = 

examples/with-auth/.env.example

@@ -23,6 +23,31 @@ npm run dev
 npm run dev -- --open
 ```
 
+## Env Vars
+
+Rename the example file and add your Discord OAuth credentials:
+
+```bash
+# rename example environment file
+cp .env.example .env
+```
+
+Edit `.env` with your values:
+
+```dotenv
+DISCORD_ID=your-discord-client-id
+DISCORD_SECRET=your-discord-client-secret
+```
+
+1. Create an application at [https://discord.com/developers/applications](https://discord.com/developers/applications) to obtain your client ID and secret.
+2. In the app's **OAuth2 → Redirects** settings, add:
+
+   ```text
+   http://localhost:3000/api/oauth/discord
+   ```
+
+For more details on the [start-oauth](https://github.com/thomasbuilds/start-oauth) integration, see the repository.
+
 ## Building
 
 Solid apps are built with _presets_, which optimise your project for deployment to different environments.

examples/with-auth/README.md

@@ -1,3 +1,6 @@
 import { defineConfig } from "@solidjs/start/config";
+import tailwindcss from "@tailwindcss/vite";
 
-export default defineConfig({});
+export default defineConfig({
+  vite: { plugins: [tailwindcss()] }
+});

examples/with-auth/app.config.ts

@@ -6,15 +6,17 @@
     "build": "vinxi build",
     "start": "vinxi start"
   },
-  "devDependencies": {
-    "@types/node": "^20.12.7"
-  },
   "dependencies": {
-    "@solidjs/router": "^0.15.0",
-    "@solidjs/start": "^1.1.0",
-    "solid-js": "^1.9.5",
-    "unstorage": "1.10.2",
-    "vinxi": "^0.5.7"
+    "@solidjs/router": "^0.15.3",
+    "@solidjs/start": "^1.1.7",
+    "solid-js": "^1.9.7",
+    "start-oauth": "^1.2.0",
+    "unstorage": "1.16.1",
+    "vinxi": "^0.5.8"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.11",
+    "tailwindcss": "^4.1.11"
   },
   "engines": {
     "node": ">=22"

examples/with-auth/package.json

@@ -1,39 +1 @@
-body {
-  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-}
-
-a {
-  margin-right: 1rem;
-}
-
-main {
-  text-align: center;
-  padding: 1em;
-  margin: 0 auto;
-}
-
-h1 {
-  color: #335d92;
-  text-transform: uppercase;
-  font-size: 4rem;
-  font-weight: 100;
-  line-height: 1.1;
-  margin: 4rem auto;
-  max-width: 14rem;
-}
-
-p {
-  max-width: 14rem;
-  margin: 2rem auto;
-  line-height: 1.35;
-}
-
-@media (min-width: 480px) {
-  h1 {
-    max-width: none;
-  }
-
-  p {
-    max-width: none;
-  }
-}
+@import "tailwindcss";

examples/with-auth/src/app.css

@@ -1,18 +1,26 @@
 // @refresh reload
-import { Router } from "@solidjs/router";
+import { type RouteDefinition, Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
+import { querySession } from "./lib";
+import Session from "./lib/Context";
+import Nav from "./components/Nav";
 import "./app.css";
 
+export const route: RouteDefinition = {
+  preload: ({ location }) => querySession(location.pathname)
+};
+
 export default function App() {
   return (
     <Router
       root={props => (
-        <>
-          <a href="/">Index</a>
-          <a href="/about">About</a>
-          <Suspense>{props.children}</Suspense>
-        </>
+        <Session>
+          <Suspense>
+            <Nav />
+            {props.children}
+          </Suspense>
+        </Session>
       )}
     >
       <FileRoutes />

examples/with-auth/src/app.tsx

@@ -0,0 +1,14 @@
+import { createSignal } from "solid-js";
+
+export default function Counter() {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <button
+      class="w-[200px] rounded-full bg-gray-100 border-2 border-gray-300 focus:border-gray-400 active:border-gray-400 px-[2rem] py-[1rem]"
+      onClick={() => setCount(count() + 1)}
+    >
+      Clicks: {count()}
+    </button>
+  );
+}

examples/with-auth/src/components/Counter.tsx

@@ -0,0 +1,33 @@
+import { useLocation } from "@solidjs/router";
+import { Show } from "solid-js";
+import { useSession } from "~/lib/Context";
+
+export default function Nav() {
+  const location = useLocation();
+  const { signedIn, signOut } = useSession();
+
+  const active = (path: string) =>
+    path === location.pathname
+      ? "border-b-2 border-sky-400 text-white"
+      : "border-b-2 border-transparent text-gray-200 hover:border-sky-400";
+
+  return (
+    <nav class="fixed top-0 left-0 w-full bg-sky-800 shadow-md z-50">
+      <ul class="container mx-auto flex items-center p-3">
+        <li class={`mx-2 sm:mx-6 ${active("/")}`}>
+          <a href="/">Home</a>
+        </li>
+        <li class={`mx-2 sm:mx-6 ${active("/about")}`}>
+          <a href="/about">About</a>
+        </li>
+        <li class="ml-auto px-2 sm:px-6 text-white">
+          <Show when={signedIn()} fallback={<a href="/login">Login</a>}>
+            <button onclick={signOut} class="cursor-pointer">
+              Logout
+            </button>
+          </Show>
+        </li>
+      </ul>
+    </nav>
+  );
+}

examples/with-auth/src/components/Nav.tsx

@@ -0,0 +1,29 @@
+import { createContext, useContext, type ParentProps } from "solid-js";
+import { type AccessorWithLatest, useLocation, createAsync, useAction } from "@solidjs/router";
+import { querySession, logout } from ".";
+import type { Session } from "./server";
+
+const Context = createContext<{
+  session: AccessorWithLatest<Session | null | undefined>;
+  signedIn: () => boolean;
+  signOut: () => Promise<never>;
+}>();
+
+export default function Session(props: ParentProps) {
+  const location = useLocation();
+  const session = createAsync(() => querySession(location.pathname), {
+    deferStream: true
+  });
+  const signOut = useAction(logout);
+  const signedIn = () => Boolean(session()?.id);
+
+  return (
+    <Context.Provider value={{ session, signedIn, signOut }}>{props.children}</Context.Provider>
+  );
+}
+
+export function useSession() {
+  const context = useContext(Context);
+  if (!context) throw new Error("useSession must be used within Session context");
+  return context;
+}