From 012ecdce8921abe7da65bc549dbe33933a4fa478 Mon Sep 17 00:00:00 2001 From: Thomas Giudici Date: Fri, 29 Aug 2025 18:46:46 +0200 Subject: [PATCH 1/2] chore: Updated with-auth example --- examples/with-auth/.env.example | 5 +- examples/with-auth/README.md | 60 +++++------- examples/with-auth/app.config.ts | 2 + examples/with-auth/package.json | 11 ++- examples/with-auth/public/favicon.ico | Bin 664 -> 0 bytes examples/with-auth/public/favicon.svg | 92 ++++++++++++++++++ examples/with-auth/src/app.css | 16 +++ examples/with-auth/src/app.tsx | 22 +++-- examples/with-auth/src/{lib => auth}/db.ts | 0 examples/with-auth/src/{lib => auth}/index.ts | 14 +-- examples/with-auth/src/auth/server.ts | 74 ++++++++++++++ examples/with-auth/src/components/Context.tsx | 28 ++++++ examples/with-auth/src/components/Counter.tsx | 2 +- examples/with-auth/src/components/Error.tsx | 33 +++++++ examples/with-auth/src/components/Icons.tsx | 22 +++++ examples/with-auth/src/components/Nav.tsx | 65 ++++++++----- examples/with-auth/src/entry-client.tsx | 1 - examples/with-auth/src/entry-server.tsx | 4 +- examples/with-auth/src/lib/Context.tsx | 29 ------ examples/with-auth/src/lib/server.ts | 38 -------- examples/with-auth/src/routes/[...404].tsx | 30 +++--- examples/with-auth/src/routes/about.tsx | 31 +++--- .../src/routes/api/oauth/[...oauth].ts | 17 ++-- examples/with-auth/src/routes/index.tsx | 23 ++--- examples/with-auth/src/routes/login.tsx | 82 ++++++++-------- 25 files changed, 446 insertions(+), 255 deletions(-) delete mode 100644 examples/with-auth/public/favicon.ico create mode 100644 examples/with-auth/public/favicon.svg rename examples/with-auth/src/{lib => auth}/db.ts (100%) rename examples/with-auth/src/{lib => auth}/index.ts (67%) create mode 100644 examples/with-auth/src/auth/server.ts create mode 100644 examples/with-auth/src/components/Context.tsx create mode 100644 examples/with-auth/src/components/Error.tsx create mode 100644 examples/with-auth/src/components/Icons.tsx delete mode 100644 examples/with-auth/src/lib/Context.tsx delete mode 100644 examples/with-auth/src/lib/server.ts diff --git a/examples/with-auth/.env.example b/examples/with-auth/.env.example index 63def6c5c..81cb71f57 100644 --- a/examples/with-auth/.env.example +++ b/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 = diff --git a/examples/with-auth/README.md b/examples/with-auth/README.md index cfa58c8fa..42bfa99d3 100644 --- a/examples/with-auth/README.md +++ b/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 diff --git a/examples/with-auth/app.config.ts b/examples/with-auth/app.config.ts index 23629d1fc..1405382b2 100644 --- a/examples/with-auth/app.config.ts +++ b/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()] } }); diff --git a/examples/with-auth/package.json b/examples/with-auth/package.json index f0d25d1d4..00d3a6faa 100644 --- a/examples/with-auth/package.json +++ b/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" diff --git a/examples/with-auth/public/favicon.ico b/examples/with-auth/public/favicon.ico deleted file mode 100644 index fb282da0719ef6ab4c1732df93be6216b0d85520..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 664 zcmV;J0%!e+P)m9ebk1R zejT~~6f_`?;`cEd!+`7(hw@%%2;?RN8gX-L?z6cM( zKoG@&w+0}f@Pfvwc+deid)qgE!L$ENKYjViZC_Zcr>L(`2oXUT8f0mRQ(6-=HN_Ai zeBBEz3WP+1Cw`m!49Wf!MnZzp5bH8VkR~BcJ1s-j90TAS2Yo4j!J|KodxYR%3Numw zA?gq6e`5@!W~F$_De3yt&uspo&2yLb$(NwcPPI-4LGc!}HdY%jfq@AFs8LiZ4k(p} zZ!c9o+qbWYs-Mg zgdyTALzJX&7QXHdI_DPTFL33;w}88{e6Zk)MX0kN{3DX9uz#O_L58&XRH$Nvvu;fO zf&)7@?C~$z1K<>j0ga$$MIg+5xN;eQ?1-CA=`^Y169@Ab6!vcaNP=hxfKN%@Ly^R* zK1iv*s1Yl6_dVyz8>ZqYhz6J4|3fQ@2LQeX@^%W(B~8>=MoEmBEGGD1;gHXlpX>!W ym)!leA2L@`cpb^hy)P75=I!`pBYxP7<2VfQ3j76qLgzIA0000 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/with-auth/src/app.css b/examples/with-auth/src/app.css index f1d8c73cd..591cb1901 100644 --- a/examples/with-auth/src/app.css +++ b/examples/with-auth/src/app.css @@ -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; +} diff --git a/examples/with-auth/src/app.tsx b/examples/with-auth/src/app.tsx index 66b99b713..8a2ec4c38 100644 --- a/examples/with-auth/src/app.tsx +++ b/examples/with-auth/src/app.tsx @@ -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 ( ( - - -