public/owltide
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Refactor demo login as an authentication method

Browse source 
Use the authentication method system for the demo login and the
generated accounts.  This makes it possible to toggle it off on
production systems as these shouldn't have it enabled at all.
This commit is contained in:
Hornwitser 2025-07-09 17:57:49 +02:00
parent a33c8e9dac
commit 0d0e38e4b6
14 changed files with 212 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

29
components/LogIn.vue Normal file
View file

@ -0,0 +1,29 @@
<!--
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div>
<LogInDemo v-if="authDemoEnabled" />
<LogInTelegram v-if="authTelegramEnabled" />
<template v-if="noAuth">No authentication method has been enabled in the configuration.</template>
</div>
</template>
<script lang="ts" setup>
const runtimeConfig = useRuntimeConfig();
const authDemoEnabled = runtimeConfig.public.authDemoEnabled;
const authTelegramEnabled = runtimeConfig.public.authTelegramEnabled;
const noAuth =
!authDemoEnabled
&& !authTelegramEnabled
;
</script>
<style lang="css" scoped>
div>* + *::before {
content: "\2013 or \2013 ";
display: block;
margin-block: 0.5rem;
}
</style>

41
components/LogInDemo.vue Normal file
View file

@ -0,0 +1,41 @@
<!--
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<form @submit.prevent="logIn">
<label>
Demo:
<input v-model="name" type="text" placeholder="Name" required>
<button type="submit">Log In</button>
</label>
</form>
</template>
<script lang="ts" setup>
const sessionStore = useSessionStore();
const route = useRoute();
const name = ref("");
async function logIn() {
try {
const session = await $fetch("/api/auth/ap/demo-login", {
method: "POST",
body: { name: name.value },
});
await sessionStore.update(session);
if (!session.account) {
await navigateTo("/register");
} else if (route.path === "/register") {
await navigateTo("/");
}
} catch (err: any) {
alert(err.data?.message ?? err.message);
}
}
</script>
<style>
</style>

6
docs/admin/config.md
View file

@ -20,6 +20,12 @@ Time in seconds before a session is deleted from the client and server, resultin
This should be several times greater that `NUXT_SESSION_ROTATES_TIMEOUT`.
### NUXT_AUTH_DEMO_ENABLED
Boolean indicating if the demo authentication provider should be enabled. This allows logging in using only a name with no additional checks or security and should _never_ be enabled on a production system. The purpose of this is to make it easier to demo the system.
Defaults to `false`.
### NUXT_TELEGRAM_BOT_TOKEN_FILE
Path to a file containing the token for the Telegram bot used for authenticating users via Telegram.

1
nuxt.config.ts
View file

@ -31,6 +31,7 @@ export default defineNuxtConfig({
public: {
defaultTimezone: "Europe/Oslo",
defaultLocale: "en-GB",
authDemoEnabled: false,
authTelegramEnabled: false,
telegramBotUsername: "",
vapidPublicKey: "",

88
pages/login.vue
View file

@ -5,32 +5,10 @@
<template>
<main>
<h1>Log In</h1>
<form @submit.prevent="logIn">
<input v-model="name" type="text" placeholder="Name" required>
<button type="submit">Log In</button>
</form>
<LogInTelegram v-if="authTelegramEnabled" />
<h2 id="create-account">Create Account</h2>
<p>If you don't have an account you may create one</p>
<form @submit.prevent="createAccount">
<fieldset>
<legend>Regular Account</legend>
<label>
Name:
<input v-model="createName" type="text" placeholder="Name" required />
</label>
<button type="submit">Create account</button>
</fieldset>
</form>
<LogIn />
<p>
If you do not wish to deal with logins you may create an anonymous account tied to this device.
If you don't have an account you may <NuxtLink to="/register">register for one</NuxtLink>.
</p>
<fieldset>
<legend>Anonymous Account</legend>
<button type="button" @click="createAnonymousAccount">Create anonymous account</button>
</fieldset>
<pre><code>{{ result }}</code></pre>
<pre><code>Session: {{ ({ id: sessionStore.id, account: sessionStore.account, push: sessionStore.push }) }}</code></pre>
</main>
</template>
@ -38,66 +16,4 @@
useHead({
title: "Login",
});
const runtimeConfig = useRuntimeConfig();
const authTelegramEnabled = runtimeConfig.public.authTelegramEnabled;
const sessionStore = useSessionStore();
const { getSubscription, subscribe } = usePushNotification();
const name = ref("");
const result = ref("")
async function logIn() {
try {
result.value = await sessionStore.logIn(name.value);
// Resubscribe push notifications if the user was subscribed before.
const subscription = await getSubscription();
if (subscription) {
await subscribe();
}
// XXX Remove the need for this.
await sessionStore.fetch();
} catch (err: any) {
console.log(err);
console.log(err.data);
result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
}
}
const createName = ref("");
async function createAccount() {
try {
const res = await $fetch.raw("/api/auth/account", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: new URLSearchParams({ name: createName.value })
});
result.value = `Server replied: ${res.status} ${res.statusText}`;
await sessionStore.fetch();
} catch (err: any) {
console.log(err);
console.log(err.data);
result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
}
}
async function createAnonymousAccount() {
try {
const res = await $fetch.raw("/api/auth/account", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
});
result.value = `Server replied: ${res.status} ${res.statusText}`;
await sessionStore.fetch();
} catch (err: any) {
console.log(err);
console.log(err.data);
result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
}
}
</script>

71
pages/register.vue
View file

@ -5,43 +5,74 @@
<template>
<main>
<h1>Register</h1>
<form @submit.prevent="register">
<h2>User Details</h2>
<div class="card">
<h2>Regular User</h2>
<p>
<label>
Username
<input type="text" v-model="username">
</label>
Set up an authentication method and choose a username to register a new user.
</p>
<h2>Authentication Method</h2>
<h3>Authentication Method</h3>
<p v-if="sessionStore.authenticationProvider">
Provider: {{ sessionStore.authenticationProvider }}
<br>Identifier: {{ sessionStore.authenticationName }}
<br><button type="button" @click="clearProvider">Clear Method</button>
</p>
<p v-else>
<LogInTelegram />
<LogIn v-else />
<form @submit.prevent="register(false)">
<h3>User Details</h3>
<p>
<label>
Username
<input type="text" v-model="username" required>
</label>
</p>
<p>
<button
type="submit"
:disabled="!sessionStore.authenticationProvider"
>
Register new user
</button>
</p>
</form>
</div>
<div class="alternatively">
&ndash; or &ndash;
</div>
<div class="card">
<h2>Anonymous User</h2>
<p>
If you do not wish to deal with logins you may create an
anonymous user authenticated with a session cookie stored on
this device. Since there's no persistent authentication for the
user should you lose the session cookie you will also lose
access to the user.
</p>
<p>
<button type="submit">Register new account</button>
<button type="button" @click="register(true)">
Create anonymous user
</button>
</p>
</form>
</div>
</main>
</template>
<script setup lang="ts">
useHead({
title: "Register",
});
const sessionStore = useSessionStore();
const username = ref("");
async function clearProvider() {
sessionStore.logOut();
}
async function register() {
async function register(anonymous: boolean) {
let session;
try {
session = await $fetch("/api/auth/account", {
method: "POST",
body: {
body: anonymous ? undefined : {
name: username.value,
},
});
@ -55,3 +86,17 @@ async function register() {
}
}
</script>
<style scoped>
.alternatively {
margin-block: 1rem;
}
.card {
background: color-mix(in oklab, var(--background), grey 20%);
padding: 0.5rem;
border-radius: 0.5rem;
}
.card h2 {
margin-block-start: 0;
}
</style>

13
server/api/admin/database-import-demo.post.ts
View file

@ -2,10 +2,19 @@
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
SPDX-License-Identifier: AGPL-3.0-or-later
*/
import { writeSchedule, writeUsers } from "~/server/database";
import { nextAuthenticationMethodId, writeAuthenticationMethods, writeNextAuthenticationMethodId, writeSchedule, writeUsers } from "~/server/database";
import { generateDemoSchedule, generateDemoAccounts } from "~/server/generate-demo-schedule";
export default defineEventHandler(async (event) => {
await requireServerSessionWithAdmin(event);
await writeUsers(generateDemoAccounts());
const accounts = generateDemoAccounts();
await writeUsers(accounts);
await writeSchedule(generateDemoSchedule());
await writeAuthenticationMethods(accounts.map((user, index) => ({
id: index,
userId: user.id,
provider: "demo",
slug: user.name!,
name: user.name!,
})));
await writeNextAuthenticationMethodId(Math.max(await nextAuthenticationMethodId(), accounts.length));
})

15
server/api/auth/account.post.ts
View file

@ -15,8 +15,8 @@ export default defineEventHandler(async (event): Promise<ApiSession> => {
});
}
const formData = await readBody(event);
const name = formData.name;
const body = await readBody(event);
const name = body?.name;
const users = await readUsers();
let user: ServerUser;
@ -42,7 +42,7 @@ export default defineEventHandler(async (event): Promise<ApiSession> => {
name,
};
} else if (name === null) {
} else if (name === undefined) {
user = {
id: await nextUserId(),
updatedAt: new Date().toISOString(),
@ -55,7 +55,14 @@ export default defineEventHandler(async (event): Promise<ApiSession> => {
});
}
if (session?.authenticationProvider) {
if (user.type !== "anonymous") {
if (!session?.authenticationProvider) {
throw createError({
statusCode: 409,
statusMessage: "Conflict",
message: "User account need an authentication method associated with it.",
});
}
const authMethods = await readAuthenticationMethods();
const method = authMethods.find(method => (
method.provider === session.authenticationProvider

38
server/api/auth/ap/demo-login.post.ts Normal file
View file

@ -0,0 +1,38 @@
/*
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
SPDX-License-Identifier: AGPL-3.0-or-later
*/
import { readAuthenticationMethods, readUsers } from "~/server/database";
export default defineEventHandler(async (event) => {
const runtimeConfig = useRuntimeConfig(event);
if (!runtimeConfig.public.authDemoEnabled) {
throw createError({
statusCode: 403,
statusMessage: "Forbidden",
message: "Demo authentication is disabled",
});
}
const { name: slug } = await readBody(event);
if (typeof slug !== "string" || !slug) {
throw createError({
statusCode: 400,
statusMessage: "Bad Request",
message: "Missing name",
});
}
const authMethods = await readAuthenticationMethods();
const method = authMethods.find(method => method.provider === "demo" && method.slug === slug);
let session;
if (method) {
const users = await readUsers();
const account = users.find(user => !user.deleted && user.id === method.userId);
session = await setServerSession(event, account);
} else {
session = await setServerSession(event, undefined, "demo", slug, slug);
}
return await serverSessionToApi(event, session);
})

22
server/api/auth/login.post.ts
View file

@ -1,22 +0,0 @@
/*
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
SPDX-License-Identifier: AGPL-3.0-or-later
*/
import { readUsers } from "~/server/database";
export default defineEventHandler(async (event) => {
const { name } = await readBody(event);
if (!name) {
return new Response(undefined, { status: 400 })
}
const accounts = await readUsers();
const account = accounts.find(a => a.name === name);
if (!account) {
return new Response(undefined, { status: 403 })
}
await setServerSession(event, account);
})

10
server/database.ts
View file

@ -3,14 +3,14 @@
SPDX-License-Identifier: AGPL-3.0-or-later
*/
import { readFile, unlink, writeFile } from "node:fs/promises";
import type { ApiSchedule, ApiSubscription, ApiUserType } from "~/shared/types/api";
import type { ApiAuthenticationProvider, ApiSchedule, ApiSubscription, ApiUserType } from "~/shared/types/api";
import type { Id } from "~/shared/types/common";
export interface ServerSession {
id: Id,
access: ApiUserType,
accountId?: number,
authenticationProvider?: "telegram",
authenticationProvider?: ApiAuthenticationProvider,
authenticationSlug?: string,
authenticationName?: string,
rotatesAtMs: number,
@ -33,7 +33,7 @@ export interface ServerUser {
export interface ServerAuthenticationMethod {
id: Id,
provider: "telegram",
provider: ApiAuthenticationProvider,
slug: string,
name: string,
userId: Id,
@ -157,6 +157,10 @@ export async function nextAuthenticationMethodId() {
return nextId;
}
export async function writeNextAuthenticationMethodId(nextId: number) {
await writeFile(nextAuthenticationMethodIdPath, String(nextId), "utf-8");
}
export async function readAuthenticationMethods() {
return readJson<ServerAuthenticationMethod[]>(authMethodPath, [])
}

4
server/utils/session.ts
View file

@ -14,7 +14,7 @@ import {
writeSubscriptions
} from "~/server/database";
import { broadcastEvent } from "../streams";
import type { ApiSession } from "~/shared/types/api";
import type { ApiAuthenticationProvider, ApiSession } from "~/shared/types/api";
async function removeSessionSubscription(sessionId: number) {
const subscriptions = await readSubscriptions();
@ -54,7 +54,7 @@ export async function clearServerSession(event: H3Event) {
export async function setServerSession(
event: H3Event,
account: ServerUser | undefined,
authenticationProvider?: "telegram",
authenticationProvider?: ApiAuthenticationProvider,
authenticationSlug?: string,
authenticationName?: string,
) {

7
shared/types/api.ts
View file

@ -67,10 +67,15 @@ export const apiSubscriptionSchema = z.object({
});
export type ApiSubscription = z.infer<typeof apiSubscriptionSchema>;
export type ApiAuthenticationProvider =
| "demo"
| "telegram"
;
export interface ApiSession {
id: Id,
account?: ApiAccount,
authenticationProvider?: "telegram",
authenticationProvider?: ApiAuthenticationProvider,
authenticationName?: string,
push: boolean,
}

8
stores/session.ts
View file

@ -44,14 +44,6 @@ export const useSessionStore = defineStore("session", () => {
state.id.value = session?.id;
state.push.value = session?.push ?? false;
},
async logIn(name: string) {
const res = await $fetch.raw("/api/auth/login", {
method: "POST",
body: { name },
});
await actions.fetch();
return `/api/auth/login replied: ${res.status} ${res.statusText}`;
},
async logOut() {
try {
await $fetch.raw("/api/auth/session", {