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 fb282da07..000000000 Binary files a/examples/with-auth/public/favicon.ico and /dev/null differ diff --git a/examples/with-auth/public/favicon.svg b/examples/with-auth/public/favicon.svg new file mode 100644 index 000000000..e9a615cff --- /dev/null +++ b/examples/with-auth/public/favicon.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ 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 ( ( - - -