Improve panel auth handling

You are now forced to log in again if your token expires

Author: TheEpicBlock

panel/src/app/(authenticated)/template.tsx

@@ -13,10 +13,10 @@ export default function Template({ children }: { children: React.ReactNode }) {
 	useEffect(() => {
 		if (!auth) {
 			const a = readAuthData()
-			if (!a) {
-				router.push("/auth/login")
-			} else {
+			if (a && a.isValid()) {
 				setAuth(a)
+			} else {
+				router.push("/auth/login")
 			}
 		}
 	}, [auth])

panel/src/app/auth/callback/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import { getRedirectUrl } from "../auth";
 import { getToken } from "./server_handler";
-import { LOCALSTORAGE_KEY } from "@/auth_context";
+import { ModfestAuth } from "@/auth_context";
 
 export default function Home() {
 	const [failed, setFailed] = useState(false)
@@ -34,14 +34,14 @@ async function authWithModrinthOAuth(setFailed: (v: boolean) => void) {
 	const urlParams = new URLSearchParams(window.location.search);
 	const code = urlParams.get("code")
 
-	var token = await getToken(code!, getRedirectUrl())
-	if (!("access_token" in token)) {
-		// Fail!
+	var modrinthToken = await getToken(code!, getRedirectUrl())
+	if (!("access_token" in modrinthToken) || !("expires_in" in modrinthToken)) {
 		setFailed(true)
 		return
 	}
 
-	localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(token))
+	const token = new ModfestAuth(modrinthToken["access_token"], modrinthToken["expires_in"])
+	token.saveLocalStorage()
 
 	// TODO redirect anywhere on site
 	window.location.replace(window.location.origin)

panel/src/auth_context.ts

@@ -1,15 +1,23 @@
 "use client"
 
-export const LOCALSTORAGE_KEY = "mr-token"
+const LOCALSTORAGE_KEY = "mr-token"
 
 export class ModfestAuth {
+	/**
+	 * A modrinth token, which platform accepts as a valid means of authentication
+	 */
 	private mrToken: string
+	/**
+	 * Unix timestamp
+	 */
+	private validUntil: number
 
-	private constructor(mrToken: string) {
+	public constructor(mrToken: string, validUntil: number) {
 		this.mrToken = mrToken
+		this.validUntil = validUntil
 	}
 
-	static readAuthData(): ModfestAuth | undefined {
+	static readLocalStorage(): ModfestAuth | undefined {
 		const token = localStorage.getItem(LOCALSTORAGE_KEY)
 		if (token == null) {
 			return undefined
@@ -19,8 +27,26 @@ export class ModfestAuth {
 		if (typeof mrToken !== "string") {
 			return undefined
 		}
+		var validUntil = tokenData["valid_until"]
+		if (typeof validUntil !== "number") {
+			return undefined
+		}
 
-		return new ModfestAuth(mrToken)
+		return new ModfestAuth(mrToken, validUntil)
+	}
+
+	public saveLocalStorage() {
+		localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify({
+			"access_token": this.mrToken,
+			"valid_until": this.validUntil,
+		}));
+	}
+
+	/**
+	 * The modfest auth data
+	 */
+	public isValid(): boolean {
+		return this.validUntil > Date.now()
 	}
 
 	public configureFetch(): {headers: Record<string, string>} {
@@ -37,5 +63,5 @@ export function logout() {
 }
 
 export function readAuthData(): ModfestAuth | undefined {
-	return ModfestAuth.readAuthData()
+	return ModfestAuth.readLocalStorage()
 }