chore: Updated with-auth example (#1963)

Author: thomasbuilds

examples/with-auth/.env.example

@@ -1,3 +1,6 @@
-SESSION_SECRET = myverylonguniquesecretthatkeepsthingssafe
+# Generate using `openssl rand -hex 32`
+SESSION_SECRET = myverylongsessionsecretkeythatishouldchange
+
+# Get credentials by creating an application at https://discord.com/developers/applications
 DISCORD_ID = 
 DISCORD_SECRET = 

examples/with-auth/README.md

@@ -1,55 +1,41 @@
-# SolidStart
+# SolidStart Template
 
-Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
+The **with-auth** example demonstrates native, context-based authentication featuring OAuth and email-password login.
 
-## Creating a project
+## Installation
 
-```bash
-# create a new project in the current directory
-npm init solid@latest
+Generate the **with-auth** template using your preferred package manager
 
-# create a new project in my-app
-npm init solid@latest my-app
+```bash
+# using npm
+npm create solid@latest -- -s -t with-auth
 ```
 
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
 ```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+# using pnpm
+pnpm create solid@latest -s -t with-auth
 ```
 
-## Env Vars
-
-Rename the example file and add your Discord OAuth credentials:
-
 ```bash
-# rename example environment file
-cp .env.example .env
+# using bun
+bun create solid@latest --s --t with-auth
 ```
 
-Edit `.env` with your values:
+## Configuration
 
-```dotenv
-DISCORD_ID=your-discord-client-id
-DISCORD_SECRET=your-discord-client-secret
-```
+1. Rename `.env.example` to `.env`
 
-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:
+2. For Discord OAuth2 to work, update `.env` with your credentials:
 
-   ```text
-   http://localhost:3000/api/oauth/discord
+   ```dotenv
+   DISCORD_ID=your-discord-client-id
+   DISCORD_SECRET=your-discord-client-secret
    ```
 
-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.
+   - Create a Discord application at [discord.com/developers/applications](https://discord.com/developers/applications) to get your Client ID and Secret.
+   - In the app's **OAuth2 → URL Generator** or **Redirects** section, add the following redirect URI:
+     ```
+     http://localhost:3000/api/oauth/discord
+     ```
 
-By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.
+3. To configure additional providers, refer to the [start-oauth](https://github.com/thomasbuilds/start-oauth#README) documentation

examples/with-auth/app.config.ts

@@ -2,5 +2,7 @@ import { defineConfig } from "@solidjs/start/config";
 import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
+  ssr: true, // false for client-side rendering only
+  server: { preset: "" }, // your deployment
   vite: { plugins: [tailwindcss()] }
 });

examples/with-auth/package.json

@@ -7,16 +7,17 @@
     "start": "vinxi start"
   },
   "dependencies": {
+    "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.15.3",
     "@solidjs/start": "^1.1.7",
-    "solid-js": "^1.9.7",
-    "start-oauth": "^1.2.4",
-    "unstorage": "1.16.1",
+    "solid-js": "^1.9.9",
+    "start-oauth": "^1.3.0",
+    "unstorage": "1.17.1",
     "vinxi": "^0.5.8"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.11",
-    "tailwindcss": "^4.1.11"
+    "@tailwindcss/vite": "^4.1.13",
+    "tailwindcss": "^4.1.13"
   },
   "engines": {
     "node": ">=22"

examples/with-auth/public/favicon.ico

@@ -1 +1,17 @@
 @import "tailwindcss";
+
+#app {
+  user-select: none;
+}
+
+main {
+  @apply flex flex-col items-center justify-center min-h-screen bg-gray-50 gap-8 px-4;
+}
+
+h1 {
+  @apply uppercase text-6xl text-sky-700 font-thin;
+}
+
+button {
+  cursor: pointer;
+}

examples/with-auth/public/favicon.svg

@@ -1,10 +1,11 @@
-// @refresh reload
 import { type RouteDefinition, Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
+import { MetaProvider } from "@solidjs/meta";
 import { Suspense } from "solid-js";
-import { querySession } from "./lib";
-import Session from "./lib/Context";
+import { querySession } from "./auth";
+import Auth from "./components/Context";
 import Nav from "./components/Nav";
+import ErrorNotification from "./components/Error";
 import "./app.css";
 
 export const route: RouteDefinition = {
@@ -15,12 +16,15 @@ export default function App() {
   return (
     <Router
       root={props => (
-        <Session>
-          <Suspense>
-            <Nav />
-            {props.children}
-          </Suspense>
-        </Session>
+        <MetaProvider>
+          <Auth>
+            <Suspense>
+              <Nav />
+              {props.children}
+              <ErrorNotification />
+            </Suspense>
+          </Auth>
+        </MetaProvider>
       )}
     >
       <FileRoutes />

examples/with-auth/src/app.css

@@ -1,10 +1,10 @@
 import { action, query, redirect } from "@solidjs/router";
-import { getSession, passwordSignIn } from "./server";
+import { getSession, passwordLogin } from "./server";
 
-// Define which routes require authentication
+// Define routes that require being logged in
 const PROTECTED_ROUTES = ["/"];
 
-const isProtectedRoute = (path: string) =>
+const isProtected = (path: string) =>
   PROTECTED_ROUTES.some(route =>
     route.endsWith("/*")
       ? path.startsWith(route.slice(0, -2))
@@ -16,17 +16,17 @@ export const querySession = query(async (path: string) => {
   const { data } = await getSession();
   if (path === "/login" && data.id) return redirect("/");
   if (data.id) return data;
-  if (isProtectedRoute(path)) throw redirect(`/login?redirect=${path}`);
+  if (isProtected(path)) throw redirect(`/login?redirect=${path}`);
   return null;
 }, "session");
 
-export const passwdSignIn = action(async (formData: FormData) => {
+export const formLogin = action(async (formData: FormData) => {
   "use server";
   const email = formData.get("email");
   const password = formData.get("password");
   if (typeof email !== "string" || typeof password !== "string")
     return new Error("Email and password are required");
-  return await passwordSignIn(email.trim().toLowerCase(), password);
+  return await passwordLogin(email.trim().toLowerCase(), password);
 });
 
 export const logout = action(async () => {