Bump Examples Versions And Add With-AuthJS Example
OrJDev
1 year ago
parent
281b5ff9f5
commit
97312251f1
@ -0,0 +1,4 @@
|
||||
DISCORD_CLIENT_ID=
|
||||
DISCORD_CLIENT_SECRET=
|
||||
AUTH_SECRET=d40e96a10287cfcf90c6b91679f512ee
|
||||
AUTH_TRUST_HOST=true
|
||||
@ -0,0 +1,30 @@
|
||||
# SolidStart + AuthJS
|
||||
|
||||
Everything you need to build an [AuthJS](https://authjs.dev/) authenticated Solid project, powered by [`solid-start`](https://start.solidjs.com);
|
||||
|
||||
## Creating a project
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm init solid@latest
|
||||
|
||||
# create a new project in my-app
|
||||
npm init solid@latest my-app
|
||||
```
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
Solid apps are built with _adapters_, which optimise your project for deployment to different environments.
|
||||
|
||||
By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different adapter, add it to the `devDependencies` in `package.json` and specify in your `vite.config.js`.
|
||||
@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "example-with-authjs",
|
||||
"scripts": {
|
||||
"dev": "solid-start dev",
|
||||
"build": "solid-start build",
|
||||
"start": "solid-start start"
|
||||
},
|
||||
"type": "module",
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.11.18",
|
||||
"esbuild": "^0.14.54",
|
||||
"next-auth": "^4.19.2",
|
||||
"postcss": "^8.4.21",
|
||||
"solid-start-node": "^0.2.19",
|
||||
"typescript": "^4.9.4",
|
||||
"vite": "^3.2.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@auth/core": "^0.3.0",
|
||||
"@auth/solid-start": "^0.1.0",
|
||||
"@solidjs/meta": "^0.28.2",
|
||||
"@solidjs/router": "^0.7.0",
|
||||
"solid-js": "^1.6.9",
|
||||
"solid-start": "^0.2.19",
|
||||
"undici": "^5.15.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.8"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 664 B |
@ -0,0 +1,20 @@
|
||||
.increment {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 1em 2em;
|
||||
color: #335d92;
|
||||
background-color: rgba(68, 107, 158, 0.1);
|
||||
border-radius: 2em;
|
||||
border: 2px solid rgba(68, 107, 158, 0);
|
||||
outline: none;
|
||||
width: 200px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.increment:focus {
|
||||
border: 2px solid #335d92;
|
||||
}
|
||||
|
||||
.increment:active {
|
||||
background-color: rgba(68, 107, 158, 0.2);
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { createSignal } from "solid-js";
|
||||
import "./Counter.css";
|
||||
|
||||
export default function Counter() {
|
||||
const [count, setCount] = createSignal(0);
|
||||
return (
|
||||
<button class="increment" onClick={() => setCount(count() + 1)}>
|
||||
Clicks: {count()}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
import { mount, StartClient } from "solid-start/entry-client";
|
||||
|
||||
mount(() => <StartClient />, document);
|
||||
@ -0,0 +1,3 @@
|
||||
import { createHandler, renderAsync, StartServer } from "solid-start/entry-server";
|
||||
|
||||
export default createHandler(renderAsync(event => <StartServer event={event} />));
|
||||
@ -0,0 +1,69 @@
|
||||
body {
|
||||
font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
main img {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #335d92;
|
||||
text-transform: uppercase;
|
||||
font-size: 4rem;
|
||||
font-weight: 100;
|
||||
line-height: 1.1;
|
||||
margin: 4rem auto;
|
||||
max-width: 14rem;
|
||||
}
|
||||
|
||||
main button {
|
||||
width: 3.5rem;
|
||||
padding: 0.5rem;
|
||||
width: 12rem;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
background: #335d92;
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
main span {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 14rem;
|
||||
margin: 2rem auto;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
h1 {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
// @refresh reload
|
||||
import { Suspense } from "solid-js";
|
||||
import {
|
||||
A,
|
||||
Body,
|
||||
ErrorBoundary,
|
||||
FileRoutes,
|
||||
Head,
|
||||
Html,
|
||||
Meta,
|
||||
Routes,
|
||||
Scripts,
|
||||
Title
|
||||
} from "solid-start";
|
||||
import "./root.css";
|
||||
|
||||
export default function Root() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head>
|
||||
<Title>SolidStart + AuthJS</Title>
|
||||
<Meta charset="utf-8" />
|
||||
<Meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</Head>
|
||||
<Body>
|
||||
<Suspense>
|
||||
<ErrorBoundary>
|
||||
<A href="/">Home</A>
|
||||
<A href="/protected">Protected</A>
|
||||
<Routes>
|
||||
<FileRoutes />
|
||||
</Routes>
|
||||
</ErrorBoundary>
|
||||
</Suspense>
|
||||
<Scripts />
|
||||
</Body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import { Title } from "solid-start";
|
||||
import { HttpStatusCode } from "solid-start/server";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<main>
|
||||
<Title>Not Found</Title>
|
||||
<HttpStatusCode code={404} />
|
||||
<h1>Page Not Found</h1>
|
||||
<p>
|
||||
Visit{" "}
|
||||
<a href="https://start.solidjs.com" target="_blank">
|
||||
start.solidjs.com
|
||||
</a>{" "}
|
||||
to learn how to build SolidStart apps.
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
import DiscordProvider from "@auth/core/providers/discord";
|
||||
import { SolidAuth, SolidAuthConfig } from "@auth/solid-start";
|
||||
|
||||
export const authOptions: SolidAuthConfig = {
|
||||
providers: [
|
||||
// @ts-expect-error Types are wrong
|
||||
DiscordProvider({
|
||||
clientId: process.env.DISCORD_CLIENT_ID as string,
|
||||
clientSecret: process.env.DISCORD_CLIENT_SECRET as string
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
export const { GET, POST } = SolidAuth(authOptions);
|
||||
@ -0,0 +1,44 @@
|
||||
import { getSession } from "@auth/solid-start";
|
||||
import { signIn } from "@auth/solid-start/client";
|
||||
import { createSignal, onCleanup, Show } from "solid-js";
|
||||
import { Navigate, useRouteData } from "solid-start";
|
||||
import { createServerData$ } from "solid-start/server";
|
||||
import { authOptions } from "./api/auth/[...solidauth]";
|
||||
|
||||
export const routeData = () => {
|
||||
return createServerData$(async (_, event) => {
|
||||
const session = await getSession(event.request, authOptions);
|
||||
|
||||
return { session: session };
|
||||
});
|
||||
};
|
||||
export default function Home() {
|
||||
const session = useRouteData<typeof routeData>();
|
||||
const [redirectIn, setRedirectIn] = createSignal(3);
|
||||
|
||||
const int = setInterval(() => {
|
||||
setRedirectIn(prev => prev - 1);
|
||||
}, 1000);
|
||||
|
||||
onCleanup(() => clearInterval(int));
|
||||
|
||||
return (
|
||||
<main>
|
||||
<h1>Home</h1>
|
||||
<Show
|
||||
when={session()?.session}
|
||||
fallback={
|
||||
<>
|
||||
<span>You are not signed in.</span>
|
||||
<button onClick={() => signIn("discord")}>Sign In</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<span>Redirecting to protected page in {redirectIn()} seconds...</span>
|
||||
<Show when={redirectIn() <= 0}>
|
||||
<Navigate href="/protected" />
|
||||
</Show>
|
||||
</Show>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
import { getSession } from "@auth/solid-start";
|
||||
import { signOut } from "@auth/solid-start/client";
|
||||
import { Show, type VoidComponent } from "solid-js";
|
||||
import { useRouteData } from "solid-start";
|
||||
import { createServerData$, redirect } from "solid-start/server";
|
||||
import { authOptions } from "./api/auth/[...solidauth]";
|
||||
|
||||
export const routeData = () => {
|
||||
return createServerData$(async (_, event) => {
|
||||
const session = await getSession(event.request, authOptions);
|
||||
if (!session) {
|
||||
throw redirect("/");
|
||||
}
|
||||
return session;
|
||||
});
|
||||
};
|
||||
|
||||
const Protected: VoidComponent = () => {
|
||||
const session = useRouteData<typeof routeData>();
|
||||
|
||||
return (
|
||||
<Show when={session()} keyed>
|
||||
{us => (
|
||||
<main>
|
||||
<h1>Protected</h1>
|
||||
{us.user?.image ? <img src={us.user?.image} /> : null}
|
||||
<span>Hey there {us.user?.name}! You are signed in!</span>
|
||||
{/* <h1>Protected</h1>
|
||||
<p>Session: {JSON.stringify(us, null, 2)}</p> */}
|
||||
<button onClick={() => signOut()}>Sign Out</button>
|
||||
</main>
|
||||
)}
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
|
||||
export default Protected;
|
||||
@ -0,0 +1,17 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node",
|
||||
"jsxImportSource": "solid-js",
|
||||
"jsx": "preserve",
|
||||
"strict": true,
|
||||
"types": ["solid-start/env"],
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"~/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
import solid from "solid-start/vite";
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [solid()]
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue