Merge pull request 'Refactor authentication and implement password reset.' (#3) from develop/authv2 into master

Reviewed-on: #3
Reviewed-by: Lixfel <lixfel@noreply.localhost>

src/components/Login.svelte

@@ -31,8 +31,7 @@
     let error: string = $state("");
 
     async function login() {
-        let {tokenStore} = await import("./repo/repo.ts");
-        let {authRepo} = await import("./repo/auth.ts");
+        let {authV2Repo} = await import("./repo/authv2.ts");
         if (username === "" || pw === "") {
             pw = "";
             error = t("login.error");
@@ -40,15 +39,14 @@
         }
 
         try {
-            let auth = await get(authRepo).login(username, pw);
-            if (auth == undefined) {
+            let auth = await get(authV2Repo).login(username, pw);
+            if (!auth) {
                 pw = "";
                 error = t("login.error");
                 return;
             }
 
-            tokenStore.set(auth);
-            navigate(l("/dashboard"));
+            await navigate(l("/dashboard"));
         } catch (e: any) {
             pw = "";
             error = t("login.error");

src/components/Navbar.svelte

@@ -23,24 +23,35 @@
     import {t} from "astro-i18n";
     import {l} from "../util/util";
     import {onMount} from "svelte";
+    import {loggedIn} from "@repo/authv2.ts";
   interface Props {
     logo?: import('svelte').Snippet;
   }
 
   let { logo }: Props = $props();
 
-    let navbar: HTMLDivElement = $state();
+    let navbar = $state<HTMLDivElement>();
     let searchOpen = $state(false);
 
+    let accountBtn = $state<HTMLAnchorElement>();
+
+    $effect(() => {
+        if ($loggedIn) {
+            accountBtn!.href = l("/dashboard");
+        } else {
+            accountBtn!.href = l("/login");
+        }
+    })
+
     onMount(() => {
         handleScroll();
     })
 
     function handleScroll() {
         if (window.scrollY > 0) {
-            navbar.classList.add("before:scale-y-100");
+            navbar!.classList.add("before:scale-y-100");
         } else {
-            navbar.classList.remove("before:scale-y-100");
+            navbar!.classList.remove("before:scale-y-100");
         }
     }
 </script>
@@ -106,7 +117,7 @@
                 </div>
             </div>
             -->
-            <a class="btn" href={l("/login")}>
+            <a class="btn" href={l("/login")} bind:this={accountBtn}>
                 <span class="btn__text">{t("navbar.links.account")}</span>
             </a>
             <!--

src/components/admin/App.svelte

@@ -22,38 +22,40 @@
     import wrap from "svelte-spa-router/wrap";
     import Router, {replace} from "svelte-spa-router";
     import {get} from "svelte/store";
-    import {tokenStore} from "@repo/repo";
+    import {loggedIn} from "@repo/authv2.ts";
 
     const routes: RouteDefinition = {
-        "/": wrap({asyncComponent: () => import("./pages/Home.svelte"), conditions: detail => get(tokenStore) != ""}),
+        "/": wrap({asyncComponent: () => import("./pages/Home.svelte"), conditions: detail => get(loggedIn)}),
         "/perms": wrap({
             asyncComponent: () => import("./pages/Perms.svelte"),
-            conditions: detail => get(tokenStore) != ""
+            conditions: detail => get(loggedIn)
         }),
         "/login": wrap({
             asyncComponent: () => import("./pages/Login.svelte"),
-            conditions: detail => get(tokenStore) == ""
+            conditions: detail => !get(loggedIn)
         }),
         "/event/:id": wrap({
             asyncComponent: () => import("./pages/Event.svelte"),
-            conditions: detail => get(tokenStore) != ""
+            conditions: detail => get(loggedIn)
         }),
         "/event/:id/generate": wrap({
             asyncComponent: () => import("./pages/Generate.svelte"),
-            conditions: detail => get(tokenStore) != ""
+            conditions: detail => get(loggedIn)
         }),
         "/edit": wrap({
             asyncComponent: () => import("./pages/Edit.svelte"),
-            conditions: detail => get(tokenStore) != ""
+            conditions: detail => get(loggedIn)
         }),
         "/display/:event": wrap({
             asyncComponent: () => import("./pages/Display.svelte"),
-            conditions: detail => get(tokenStore) != ""
+            conditions: detail => get(loggedIn)
         }),
         "*": wrap({asyncComponent: () => import("./pages/NotFound.svelte")})
     };
 
     function conditionsFailed(event: ConditionsFailedEvent) {
+        console.log(event)
+
         if (event.detail.location === "/login") {
             replace("/");
         } else {

src/components/dashboard/UserInfo.svelte

@@ -22,9 +22,9 @@
     import type {Player} from "@type/data.ts";
     import {l} from "@utils/util.ts";
     import Statistics from "./Statistics.svelte";
-    import {authRepo} from "@repo/auth.ts";
-    import {tokenStore} from "@repo/repo.ts";
+    import {authV2Repo} from "@repo/authv2.ts";
     import Card from "@components/Card.svelte";
+    import {navigate} from "astro:transitions/client";
 
   interface Props {
     user: Player;
@@ -33,9 +33,8 @@
   let { user }: Props = $props();
 
     async function logout() {
-        await $authRepo.logout()
-        tokenStore.set("")
-        window.location.href = l("/login")
+        await $authV2Repo.logout();
+        await navigate(l("/login"));
     }
 </script>
 

src/components/repo/auth.ts

@@ -1,44 +0,0 @@
-/*
- *   This file is a part of the SteamWar software.
- *
- *   Copyright (C) 2023 SteamWar.de-Serverteam
- *
- *   This program is free software: you can redistribute it and/or modify
- *   it under the terms of the GNU Affero General Public License as published by
- *   the Free Software Foundation, either version 3 of the License, or
- *   (at your option) any later version.
- *
- *   This program is distributed in the hope that it will be useful,
- *   but WITHOUT ANY WARRANTY; without even the implied warranty of
- *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- *   GNU Affero General Public License for more details.
- *
- *   You should have received a copy of the GNU Affero General Public License
- *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {fetchWithToken, tokenStore} from "./repo.ts";
-import {derived} from "svelte/store";
-
-export class AuthRepo {
-    constructor(private token: string) {
-    }
-
-    public async login(username: string, password: string): Promise<string> {
-        return await fetchWithToken(this.token, "/auth/login", {
-            body: JSON.stringify({
-                username,
-                password,
-            }),
-            method: "POST",
-        }).then(value => value.json()).then(value => value.token);
-    }
-
-    public async logout(): Promise<void> {
-        await fetchWithToken(this.token, "/auth/tokens/logout", {
-            method: "POST",
-        });
-    }
-}
-
-export const authRepo = derived(tokenStore, ($token) => new AuthRepo($token));

src/components/repo/authv2.ts

@@ -0,0 +1,173 @@
+/*
+ *   This file is a part of the SteamWar software.
+ *
+ *   Copyright (C) 2025 SteamWar.de-Serverteam
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Affero General Public License as published by
+ *   the Free Software Foundation, either version 3 of the License, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *   GNU Affero General Public License for more details.
+ *
+ *   You should have received a copy of the GNU Affero General Public License
+ *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {readable, writable} from "svelte/store";
+import {tokenStore} from "@repo/repo.ts";
+import dayjs, {type Dayjs} from "dayjs";
+import {type AuthToken, AuthTokenSchema} from "@type/auth.ts";
+
+export class AuthV2Repo {
+    private accessToken: string | undefined;
+    private accessTokenExpires: Dayjs | undefined;
+    private refreshToken: string | undefined;
+    private refreshTokenExpires: Dayjs | undefined;
+
+    constructor() {
+        if (typeof localStorage === "undefined") {
+            return;
+        }
+
+        this.accessToken = localStorage.getItem("sw-access-token") ?? undefined;
+        if (this.accessToken) {
+            this.accessTokenExpires = dayjs(localStorage.getItem("sw-access-token-expires") ?? "");
+        }
+
+        this.refreshToken = localStorage.getItem("sw-refresh-token") ?? undefined;
+        if (this.refreshToken) {
+            loggedIn.set(true);
+            this.refreshTokenExpires = dayjs(localStorage.getItem("sw-refresh-token-expires") ?? "");
+        }
+    }
+
+    async login(name: string, password: string) {
+        if (this.accessToken !== undefined || this.refreshToken !== undefined) {
+            throw new Error("Already logged in");
+        }
+
+        try {
+            const login = await this.request("/auth", {
+                method: "POST",
+                body: JSON.stringify({
+                    name,
+                    password,
+                    keepLoggedIn: true,
+                }),
+            }).then(value => value.json()).then(value => AuthTokenSchema.parse(value));
+
+            this.setLoginState(login);
+
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    async logout() {
+        if (this.accessToken === undefined) {
+            return;
+        }
+
+        await this.request("/auth", {
+            method: "DELETE",
+        });
+
+        this.resetAccessToken();
+        this.resetRefreshToken();
+    }
+
+    private setLoginState(tokens: AuthToken) {
+        this.setAccessToken(tokens.accessToken.token, dayjs(tokens.accessToken.expires));
+        this.setRefreshToken(tokens.refreshToken.token, dayjs(tokens.refreshToken.expires));
+        loggedIn.set(true);
+    }
+
+    private setAccessToken(token: string, expires: Dayjs) {
+        this.accessToken = token;
+        this.accessTokenExpires = expires;
+        localStorage.setItem("sw-access-token", token);
+        localStorage.setItem("sw-access-token-expires", expires.toString());
+    }
+
+    private resetAccessToken() {
+        if (this.accessToken === undefined) {
+            return;
+        }
+        this.accessToken = undefined;
+        this.accessTokenExpires = undefined;
+        localStorage.removeItem("sw-access-token");
+        localStorage.removeItem("sw-access-token-expires");
+    }
+
+    private setRefreshToken(token: string, expires: Dayjs) {
+        this.refreshToken = token;
+        this.refreshTokenExpires = expires;
+        localStorage.setItem("sw-refresh-token", token);
+        localStorage.setItem("sw-refresh-token-expires", expires.toString());
+    }
+
+    private resetRefreshToken() {
+        if (this.refreshToken === undefined) {
+            return;
+        }
+        this.refreshToken = undefined;
+        this.refreshTokenExpires = undefined;
+        localStorage.removeItem("sw-refresh-token");
+        localStorage.removeItem("sw-refresh-token-expires");
+
+        loggedIn.set(false);
+    }
+
+    private async refresh() {
+        if (this.refreshToken === undefined || this.refreshTokenExpires === undefined || this.refreshTokenExpires.isBefore(dayjs().add(10, "seconds"))) {
+            this.resetRefreshToken();
+            this.resetAccessToken();
+
+            return;
+        }
+
+        try {
+            const response = await this.requestWithToken(this.refreshToken!, "/auth", {
+                method: "PUT",
+            }).then(value => value.json()).then(value => AuthTokenSchema.parse(value));
+
+            this.setLoginState(response);
+        } catch (e) {
+            this.resetRefreshToken();
+            this.resetAccessToken();
+            return;
+        }
+    }
+
+    async request(url: string, params: RequestInit = {}) {
+        if (this.accessToken !== undefined && this.accessTokenExpires !== undefined && this.accessTokenExpires.isBefore(dayjs().add(10, "seconds"))) {
+            await this.refresh();
+        }
+
+        return this.requestWithToken(this.accessToken ?? "", url, params);
+    }
+
+    private async requestWithToken(token: string, url: string, params: RequestInit = {}) {
+        return fetch(`${import.meta.env.PUBLIC_API_SERVER}${url}`, {...params,
+            headers: {
+                ...(token !== "" ? {"Authorization": "Bearer " + (token)} : {}),
+                "Content-Type": "application/json", ...params.headers,
+            },
+        })
+            .then(value => {
+                if (value.status === 401) {
+                    tokenStore.set("");
+                }
+                return value;
+            });
+    }
+}
+
+export const loggedIn = writable(false);
+
+export const authV2Repo = readable(new AuthV2Repo());

src/components/repo/repo.ts

@@ -17,31 +17,9 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {writable} from "svelte/store";
+import {get, writable} from "svelte/store";
+import {authV2Repo} from "@repo/authv2.ts";
 
-export const fetchWithToken = (token: string, url: string, params: RequestInit = {}) =>
-    fetch(`${import.meta.env.PUBLIC_API_SERVER}${url}`, {...params,
-        headers: {
-            ...(token !== "" ? {"Authorization": "Bearer " + (token)} : {}),
-            "Content-Type": "application/json", ...params.headers,
-        },
-    })
-        .then(value => {
-            if (value.status === 401) {
-                tokenStore.set("");
-            }
-            return value;
-        });
+export const fetchWithToken = (token: string, url: string, params: RequestInit = {}) => get(authV2Repo).request(url, params);
 
-export function getLocalStorage() {
-    if (typeof localStorage === "undefined") {
-        return {
-            getItem: () => "",
-            setItem: () => {},
-        };
-    }
-    return localStorage;
-}
-
-export const tokenStore = writable((getLocalStorage().getItem("sw-session") ?? ""));
-tokenStore.subscribe((value) => getLocalStorage().setItem("sw-session", value));
+export const tokenStore = writable("");

src/components/repo/stats.ts

@@ -36,7 +36,7 @@ export class StatsRepo {
     }
 
     public async getUserStats(id: string): Promise<UserStats> {
-        return await fetchWithToken(this.token, `/stats/user/${id}`).then(value => value.json()).then(UserStatsSchema.parse);
+        return await fetchWithToken(this.token, `/stats/user`).then(value => value.json()).then(UserStatsSchema.parse);
     }
 }
 

src/components/types/auth.ts

@@ -0,0 +1,34 @@
+/*
+ *   This file is a part of the SteamWar software.
+ *
+ *   Copyright (C) 2025 SteamWar.de-Serverteam
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Affero General Public License as published by
+ *   the Free Software Foundation, either version 3 of the License, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *   GNU Affero General Public License for more details.
+ *
+ *   You should have received a copy of the GNU Affero General Public License
+ *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {z} from "zod";
+
+export const TokenSchema = z.object({
+    token: z.string(),
+    expires: z.string(),
+});
+
+export type Token = z.infer<typeof TokenSchema>;
+
+export const AuthTokenSchema = z.object({
+    accessToken: TokenSchema,
+    refreshToken: TokenSchema,
+});
+
+export type AuthToken = z.infer<typeof AuthTokenSchema>;

src/i18n/common/de.json

@@ -205,7 +205,8 @@
     },
     "label": {
       "username": "Nutzername",
-      "password": "Passwort"
+      "password": "Passwort",
+      "repeat": "Passwort Wiederholen"
     },
     "setPassword": "Wie setzte ich mein Passwort?",
     "submit": "Login",

src/i18n/common/en.json

@@ -149,7 +149,8 @@
     },
     "label": {
       "username": "Username",
-      "password": "Password"
+      "password": "Password",
+      "repeat": "Repeat Password"
     },
     "setPassword": "How to set a Password",
     "submit": "Login",

src/pages/dashboard.astro

@@ -8,9 +8,11 @@ import {t} from "astro-i18n";
     <script>
         import {l} from "../util/util";
         import {navigate} from "astro:transitions/client";
+        import {get} from "svelte/store";
+        import {loggedIn} from "../components/repo/authv2";
         document.addEventListener("astro:page-load", () => {
             if (window.location.href.endsWith("/dashboard") || window.location.href.endsWith("/dashboard/")) {
-                if ((localStorage.getItem("sw-session") ?? "") === "") {
+                if (!get(loggedIn)) {
                     navigate(l("/login"), {});
                 }
             }

src/pages/login.astro

@@ -9,10 +9,12 @@ import BackgroundImage from "../components/BackgroundImage.astro";
     <script>
         import {l} from "../util/util";
         import {navigate} from "astro:transitions/client";
+        import {loggedIn} from "../components/repo/authv2";
+        import {get} from "svelte/store";
 
         document.addEventListener("astro:page-load", () => {
             if (window.location.href.endsWith("/login") || window.location.href.endsWith("/login/")) {
-                if ((localStorage.getItem("sw-session") ?? "") !== "") {
+                if (get(loggedIn)) {
                     navigate(l("/dashboard"), {history: "replace"});
                 }
             }