Compare commits
3 Commits
25b2090961
...
c416057349
| Author | SHA1 | Date | |
|---|---|---|---|
c416057349
|
|||
|
aab19fa6c7
|
|||
|
1759f30358
|
@ -1 +1,5 @@
|
||||
DATABASE_URL=local.db
|
||||
AUTH_DOMAIN=auth.lab.cazzzer.com
|
||||
AUTH_CLIENT_ID=
|
||||
AUTH_CLIENT_SECRET=
|
||||
AUTH_REDIRECT_URI=http://localhost:5173/auth/authentik/callback
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
"@types/better-sqlite3": "^7.6.11",
|
||||
"@types/eslint": "^9.6.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"bits-ui": "^0.21.16",
|
||||
"clsx": "^2.1.1",
|
||||
"drizzle-kit": "^0.22.0",
|
||||
"eslint": "^9.7.0",
|
||||
@ -45,7 +46,9 @@
|
||||
"dependencies": {
|
||||
"@oslojs/crypto": "^1.0.1",
|
||||
"@oslojs/encoding": "^1.1.0",
|
||||
"arctic": "^2.2.1",
|
||||
"better-sqlite3": "^11.1.2",
|
||||
"drizzle-orm": "^0.33.0"
|
||||
"drizzle-orm": "^0.33.0",
|
||||
"lucide-svelte": "^0.454.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,6 +7,6 @@
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
<div style="display: contents" class="flex flex-col min-h-screen">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { Handle } from '@sveltejs/kit';
|
||||
import { dev } from '$app/environment';
|
||||
import * as auth from '$lib/server/auth.js';
|
||||
import * as auth from '$lib/server/auth';
|
||||
|
||||
const handleAuth: Handle = async ({ event, resolve }) => {
|
||||
const sessionId = event.cookies.get(auth.sessionCookieName);
|
||||
|
||||
30
src/lib/components/app/auth-form/auth-form.svelte
Normal file
30
src/lib/components/app/auth-form/auth-form.svelte
Normal file
@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import { LucideLoaderCircle } from 'lucide-svelte';
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let { class: className, ...rest }: {class: string | undefined | null, rest: { [p: string]: unknown }} = $props();
|
||||
|
||||
let isLoading = $state(false);
|
||||
async function onSubmit() {
|
||||
// event.preventDefault();
|
||||
isLoading = true;
|
||||
|
||||
setTimeout(() => {
|
||||
isLoading = false;
|
||||
}, 3000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class={cn("grid gap-6", className)} {...rest}>
|
||||
<a href="/auth/authentik">
|
||||
<Button disabled={isLoading} onclick={onSubmit}>
|
||||
{#if isLoading}
|
||||
<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
|
||||
{:else}
|
||||
<img class="mr-2 h-4 w-4" alt="Authentik Logo" src="https://auth.cazzzer.com/static/dist/assets/icons/icon.svg" />
|
||||
{/if}
|
||||
Authentik
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
7
src/lib/components/app/auth-form/index.ts
Normal file
7
src/lib/components/app/auth-form/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import Root from "./auth-form.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as AuthForm,
|
||||
};
|
||||
25
src/lib/components/ui/button/button.svelte
Normal file
25
src/lib/components/ui/button/button.svelte
Normal file
@ -0,0 +1,25 @@
|
||||
<script lang="ts">
|
||||
import { Button as ButtonPrimitive } from "bits-ui";
|
||||
import { type Events, type Props, buttonVariants } from "./index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
type $$Props = Props;
|
||||
type $$Events = Events;
|
||||
|
||||
let className: $$Props["class"] = undefined;
|
||||
export let variant: $$Props["variant"] = "default";
|
||||
export let size: $$Props["size"] = "default";
|
||||
export let builders: $$Props["builders"] = [];
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<ButtonPrimitive.Root
|
||||
{builders}
|
||||
class={cn(buttonVariants({ variant, size, className }))}
|
||||
type="button"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:keydown
|
||||
>
|
||||
<slot />
|
||||
</ButtonPrimitive.Root>
|
||||
49
src/lib/components/ui/button/index.ts
Normal file
49
src/lib/components/ui/button/index.ts
Normal file
@ -0,0 +1,49 @@
|
||||
import { type VariantProps, tv } from "tailwind-variants";
|
||||
import type { Button as ButtonPrimitive } from "bits-ui";
|
||||
import Root from "./button.svelte";
|
||||
|
||||
const buttonVariants = tv({
|
||||
base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline:
|
||||
"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
|
||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
});
|
||||
|
||||
type Variant = VariantProps<typeof buttonVariants>["variant"];
|
||||
type Size = VariantProps<typeof buttonVariants>["size"];
|
||||
|
||||
type Props = ButtonPrimitive.Props & {
|
||||
variant?: Variant;
|
||||
size?: Size;
|
||||
};
|
||||
|
||||
type Events = ButtonPrimitive.Events;
|
||||
|
||||
export {
|
||||
Root,
|
||||
type Props,
|
||||
type Events,
|
||||
//
|
||||
Root as Button,
|
||||
type Props as ButtonProps,
|
||||
type Events as ButtonEvents,
|
||||
buttonVariants,
|
||||
};
|
||||
29
src/lib/components/ui/input/index.ts
Normal file
29
src/lib/components/ui/input/index.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import Root from "./input.svelte";
|
||||
|
||||
export type FormInputEvent<T extends Event = Event> = T & {
|
||||
currentTarget: EventTarget & HTMLInputElement;
|
||||
};
|
||||
export type InputEvents = {
|
||||
blur: FormInputEvent<FocusEvent>;
|
||||
change: FormInputEvent<Event>;
|
||||
click: FormInputEvent<MouseEvent>;
|
||||
focus: FormInputEvent<FocusEvent>;
|
||||
focusin: FormInputEvent<FocusEvent>;
|
||||
focusout: FormInputEvent<FocusEvent>;
|
||||
keydown: FormInputEvent<KeyboardEvent>;
|
||||
keypress: FormInputEvent<KeyboardEvent>;
|
||||
keyup: FormInputEvent<KeyboardEvent>;
|
||||
mouseover: FormInputEvent<MouseEvent>;
|
||||
mouseenter: FormInputEvent<MouseEvent>;
|
||||
mouseleave: FormInputEvent<MouseEvent>;
|
||||
mousemove: FormInputEvent<MouseEvent>;
|
||||
paste: FormInputEvent<ClipboardEvent>;
|
||||
input: FormInputEvent<InputEvent>;
|
||||
wheel: FormInputEvent<WheelEvent>;
|
||||
};
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Input,
|
||||
};
|
||||
42
src/lib/components/ui/input/input.svelte
Normal file
42
src/lib/components/ui/input/input.svelte
Normal file
@ -0,0 +1,42 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLInputAttributes } from "svelte/elements";
|
||||
import type { InputEvents } from "./index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
type $$Props = HTMLInputAttributes;
|
||||
type $$Events = InputEvents;
|
||||
|
||||
let className: $$Props["class"] = undefined;
|
||||
export let value: $$Props["value"] = undefined;
|
||||
export { className as class };
|
||||
|
||||
// Workaround for https://github.com/sveltejs/svelte/issues/9305
|
||||
// Fixed in Svelte 5, but not backported to 4.x.
|
||||
export let readonly: $$Props["readonly"] = undefined;
|
||||
</script>
|
||||
|
||||
<input
|
||||
class={cn(
|
||||
"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
bind:value
|
||||
{readonly}
|
||||
on:blur
|
||||
on:change
|
||||
on:click
|
||||
on:focus
|
||||
on:focusin
|
||||
on:focusout
|
||||
on:keydown
|
||||
on:keypress
|
||||
on:keyup
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:mousemove
|
||||
on:paste
|
||||
on:input
|
||||
on:wheel|passive
|
||||
{...$$restProps}
|
||||
/>
|
||||
7
src/lib/components/ui/label/index.ts
Normal file
7
src/lib/components/ui/label/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import Root from "./label.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Label,
|
||||
};
|
||||
21
src/lib/components/ui/label/label.svelte
Normal file
21
src/lib/components/ui/label/label.svelte
Normal file
@ -0,0 +1,21 @@
|
||||
<script lang="ts">
|
||||
import { Label as LabelPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
type $$Props = LabelPrimitive.Props;
|
||||
type $$Events = LabelPrimitive.Events;
|
||||
|
||||
let className: $$Props["class"] = undefined;
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<LabelPrimitive.Root
|
||||
class={cn(
|
||||
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
||||
className
|
||||
)}
|
||||
{...$$restProps}
|
||||
on:mousedown
|
||||
>
|
||||
<slot />
|
||||
</LabelPrimitive.Root>
|
||||
@ -3,6 +3,8 @@ import { sha256 } from '@oslojs/crypto/sha2';
|
||||
import { encodeBase32LowerCaseNoPadding, encodeHexLowerCase } from '@oslojs/encoding';
|
||||
import { db } from '$lib/server/db';
|
||||
import * as table from '$lib/server/db/schema';
|
||||
import type { RequestEvent } from '@sveltejs/kit';
|
||||
import { dev } from '$app/environment';
|
||||
|
||||
const DAY_IN_MS = 1000 * 60 * 60 * 24;
|
||||
|
||||
@ -10,8 +12,7 @@ export const sessionCookieName = 'auth-session';
|
||||
|
||||
function generateSessionToken(): string {
|
||||
const bytes = crypto.getRandomValues(new Uint8Array(20));
|
||||
const token = encodeBase32LowerCaseNoPadding(bytes);
|
||||
return token;
|
||||
return encodeBase32LowerCaseNoPadding(bytes);
|
||||
}
|
||||
|
||||
export async function createSession(userId: string): Promise<table.Session> {
|
||||
@ -26,6 +27,16 @@ export async function createSession(userId: string): Promise<table.Session> {
|
||||
return session;
|
||||
}
|
||||
|
||||
export function setSessionTokenCookie(event: RequestEvent, sessionId: string, expiresAt: Date) {
|
||||
event.cookies.set(sessionCookieName, sessionId, {
|
||||
path: '/',
|
||||
sameSite: 'lax',
|
||||
httpOnly: true,
|
||||
expires: expiresAt,
|
||||
secure: !dev,
|
||||
});
|
||||
}
|
||||
|
||||
export async function invalidateSession(sessionId: string): Promise<void> {
|
||||
await db.delete(table.session).where(eq(table.session.id, sessionId));
|
||||
}
|
||||
@ -34,7 +45,7 @@ export async function validateSession(sessionId: string) {
|
||||
const [result] = await db
|
||||
.select({
|
||||
// Adjust user table here to tweak returned data
|
||||
user: { id: table.user.id, username: table.user.username },
|
||||
user: { id: table.user.id, username: table.user.username, name: table.user.name },
|
||||
session: table.session
|
||||
})
|
||||
.from(table.session)
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { drizzle } from 'drizzle-orm/better-sqlite3';
|
||||
import Database from 'better-sqlite3';
|
||||
import { env } from '$env/dynamic/private';
|
||||
if (!env.DATABASE_URL) throw new Error('DATABASE_URL is not set');
|
||||
import assert from 'node:assert';
|
||||
|
||||
assert(env.DATABASE_URL, 'DATABASE_URL is not set');
|
||||
const client = new Database(env.DATABASE_URL);
|
||||
export const db = drizzle(client);
|
||||
|
||||
@ -2,7 +2,8 @@ import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
|
||||
|
||||
export const user = sqliteTable('user', {
|
||||
id: text('id').primaryKey(),
|
||||
age: integer('age')
|
||||
username: text('username').notNull(),
|
||||
name: text('name').notNull(),
|
||||
});
|
||||
|
||||
export const session = sqliteTable('session', {
|
||||
|
||||
9
src/lib/server/oauth.ts
Normal file
9
src/lib/server/oauth.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { Authentik } from "arctic";
|
||||
import * as env from "$env/static/private"
|
||||
|
||||
const domain = env.AUTH_DOMAIN;
|
||||
const clientId = env.AUTH_CLIENT_ID;
|
||||
const clientSecret = env.AUTH_CLIENT_SECRET;
|
||||
const redirectURI = env.AUTH_REDIRECT_URI;
|
||||
|
||||
export const authentik = new Authentik(domain, clientId, clientSecret, redirectURI);
|
||||
@ -3,4 +3,17 @@
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<header class="p-4">
|
||||
<h1 class="text-2xl font-bold">My App</h1>
|
||||
<nav>
|
||||
<a href="/">Home</a>
|
||||
<a href="/about">About</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="flex-grow p-4">
|
||||
{@render children()}
|
||||
</main>
|
||||
|
||||
<footer class="p-4 text-center">
|
||||
<p>© 2024</p>
|
||||
</footer>
|
||||
|
||||
@ -1,2 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { AuthForm } from "$lib/components/app/auth-form";
|
||||
</script>
|
||||
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||
|
||||
<AuthForm />
|
||||
|
||||
30
src/routes/auth/authentik/+server.ts
Normal file
30
src/routes/auth/authentik/+server.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { generateState, generateCodeVerifier } from "arctic";
|
||||
import { authentik } from "$lib/server/oauth";
|
||||
|
||||
import type { RequestEvent } from "@sveltejs/kit";
|
||||
|
||||
export async function GET(event: RequestEvent): Promise<Response> {
|
||||
const state = generateState();
|
||||
const codeVerifier = generateCodeVerifier();
|
||||
const url = authentik.createAuthorizationURL(state, codeVerifier, ["openid", "profile"]);
|
||||
|
||||
event.cookies.set("authentik_oauth_state", state, {
|
||||
path: "/",
|
||||
httpOnly: true,
|
||||
maxAge: 60 * 10, // 10 minutes
|
||||
sameSite: "lax"
|
||||
});
|
||||
event.cookies.set("authentik_code_verifier", codeVerifier, {
|
||||
path: "/",
|
||||
httpOnly: true,
|
||||
maxAge: 60 * 10, // 10 minutes
|
||||
sameSite: "lax"
|
||||
});
|
||||
|
||||
return new Response(null, {
|
||||
status: 302,
|
||||
headers: {
|
||||
Location: url.toString()
|
||||
}
|
||||
});
|
||||
}
|
||||
78
src/routes/auth/authentik/callback/+server.ts
Normal file
78
src/routes/auth/authentik/callback/+server.ts
Normal file
@ -0,0 +1,78 @@
|
||||
import { createSession, setSessionTokenCookie } from "$lib/server/auth";
|
||||
import { authentik } from "$lib/server/oauth";
|
||||
import { decodeIdToken } from "arctic";
|
||||
|
||||
import type { RequestEvent } from "@sveltejs/kit";
|
||||
import type { OAuth2Tokens } from "arctic";
|
||||
import { db } from '$lib/server/db';
|
||||
import { eq } from 'drizzle-orm';
|
||||
|
||||
import * as table from '$lib/server/db/schema';
|
||||
|
||||
export async function GET(event: RequestEvent): Promise<Response> {
|
||||
const code = event.url.searchParams.get("code");
|
||||
const state = event.url.searchParams.get("state");
|
||||
const storedState = event.cookies.get("authentik_oauth_state") ?? null;
|
||||
const codeVerifier = event.cookies.get("authentik_code_verifier") ?? null;
|
||||
if (code === null || state === null || storedState === null || codeVerifier === null) {
|
||||
return new Response(null, {
|
||||
status: 400
|
||||
});
|
||||
}
|
||||
if (state !== storedState) {
|
||||
return new Response(null, {
|
||||
status: 400
|
||||
});
|
||||
}
|
||||
|
||||
let tokens: OAuth2Tokens;
|
||||
try {
|
||||
tokens = await authentik.validateAuthorizationCode(code, codeVerifier);
|
||||
} catch (e) {
|
||||
// Invalid code or client credentials
|
||||
return new Response(null, {
|
||||
status: 400
|
||||
});
|
||||
}
|
||||
const claims = decodeIdToken(tokens.idToken());
|
||||
console.log("claims", claims);
|
||||
const userId: string = claims.sub;
|
||||
const username: string = claims.preferred_username;
|
||||
|
||||
const [existingUser] = await db.select().from(table.user).where(eq(table.user.id, userId));
|
||||
|
||||
if (existingUser) {
|
||||
const session = await createSession(existingUser.id);
|
||||
setSessionTokenCookie(event, session.id, session.expiresAt);
|
||||
return new Response(null, {
|
||||
status: 302,
|
||||
headers: {
|
||||
Location: "/"
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const user: table.User = {
|
||||
id: userId,
|
||||
username,
|
||||
name: claims.name as string,
|
||||
};
|
||||
|
||||
try {
|
||||
await db.insert(table.user).values(user);
|
||||
const session = await createSession(user.id);
|
||||
setSessionTokenCookie(event, session.id, session.expiresAt);
|
||||
} catch (e) {
|
||||
console.error('failed to create user', e);
|
||||
return new Response(null, {
|
||||
status: 500
|
||||
});
|
||||
}
|
||||
|
||||
return new Response(null, {
|
||||
status: 302,
|
||||
headers: {
|
||||
Location: "/"
|
||||
}
|
||||
});
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user