♻️ minimize auth, avoid storing discord credentials client side

Author: haliphax

eslint.config.mjs

@@ -18,6 +18,7 @@ export default tseslint.config(
 			globals: {
 				console: true,
 				document: true,
+				localStorage: true,
 			},
 			parserOptions: {
 				parser: tseslint.parser,

src/app/app.vue

@@ -1,21 +1,12 @@
 <script lang="ts" setup>
-import DiscordClient from "@/lib/discord";
 import RealmClient from "@/lib/realm";
 import { onMounted, provide } from "vue";
 import GlobalMenu from "./components/global-menu.vue";
 
-// make sure we're logged into discord
-const discord = new DiscordClient();
+// make sure we're logged into realm
+const realm = await RealmClient.create();
 
-// get discord user info
-const user = await discord.getDiscordUser();
-
-// log into realm
-const realm = await RealmClient.create(user, discord.token);
-
-provide("discordClient", discord);
 provide("realmClient", realm);
-provide("user", user);
 
 onMounted(() => {
 	document.getElementById("apploading")!.remove();

src/app/lib/discord.ts

@@ -1,5 +1,3 @@
-import Cookies from "js-cookie";
-
 export interface Thing {
 	id: string;
 }
@@ -23,31 +21,16 @@ export default class DiscordClient {
 		const urlToken = urlMatch ? urlMatch[1] : null;
 		const redirectUri = window.location.href.replace(/[#?].*$/, "");
 
-		if (urlToken) {
-			Cookies.set("discordToken", urlToken, {
-				expires: 30,
-				sameSite: "strict",
-				secure: true,
-			});
-			window.location.assign(redirectUri);
-
-			throw "Reloading page to use Discord token from URL";
-		}
-
-		const token = Cookies.get("discordToken");
-
-		if (!token) {
+		if (!urlToken) {
 			const oauthScope = ["identify", "guilds", "guilds.members.read"];
-
-			Cookies.remove("discordToken");
 			window.location.assign(
 				`https://discord.com/oauth2/authorize?client_id=${this.clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${oauthScope.join("+")}`,
 			);
 
 			throw "Retrieving Discord token";
 		}
 
-		this.token = token;
+		this.token = urlToken;
 	}
 
 	async discordApi(url: string): Promise<Response> {
@@ -57,12 +40,7 @@ export default class DiscordClient {
 			if (r.status === 429) {
 				alert("Too many requests. Slow down.");
 				throw "Too many requests";
-			} else if (r.status >= 400 && r.status < 500) {
-				Cookies.remove("discordToken");
-				console.error(r);
-				window.location.reload();
-				throw "Discord API error; reloading page";
-			} else if (r.status >= 500) {
+			} else if (r.status >= 400) {
 				alert("Error contacting Discord API");
 				throw "Error contacting Discord API";
 			}
@@ -71,11 +49,6 @@ export default class DiscordClient {
 		});
 	}
 
-	async logout() {
-		this.token = "";
-		Cookies.remove("discordToken");
-	}
-
 	async getDiscordUser(): Promise<User> {
 		return await this.discordApi("/oauth2/@me")
 			.then((r) => r.json())

src/app/lib/realm.ts

@@ -1,47 +1,69 @@
 import Cookies from "js-cookie";
-import { User } from "./discord";
+import DiscordClient from "./discord";
 
 const realmApi = import.meta.env.VITE_APP_REALM_API;
 
+export type RealmUser = {
+	id: string;
+	name: string;
+	avatar: string;
+};
+
 /** Realm REST API client */
 export default class RealmClient {
 	private token: string;
-	private readonly user_id: string;
+	private readonly user: RealmUser;
 
-	constructor(user: User, token: string) {
+	constructor(user: RealmUser, token: string) {
 		this.token = token;
-		this.user_id = user.id;
+		this.user = user;
 	}
 
-	static async create(user: User, discordToken: string) {
+	static async create() {
 		let realmToken = Cookies.get("realmToken");
+		let userInfo: RealmUser | null = JSON.parse(
+			localStorage.getItem("realm.user") ?? "null",
+		);
+
+		if (!realmToken || !userInfo) {
+			const discord = new DiscordClient();
+			const user = await discord.getDiscordUser();
 
-		if (!realmToken) {
-			realmToken = await fetch(`${realmApi}/auth/login`, {
+			const loginResponse = await fetch(`${realmApi}/auth/login`, {
 				body: JSON.stringify({
-					token: discordToken,
+					token: discord.token,
 					user_id: user.id,
 				}),
 				headers: { "Content-Type": "application/json" },
 				method: "POST",
-			})
-				.then((r) => {
-					if (r.status !== 200) {
-						alert("Error logging into Realm");
-						throw "Error logging into Realm";
-					}
+			}).then((r) => {
+				if (r.status !== 200) {
+					alert("Error logging into Realm");
+					throw "Error logging into Realm";
+				}
 
-					return r.json();
-				})
-				.then((d) => d.token);
+				return r.json();
+			});
+			realmToken = loginResponse.token;
+			userInfo = {
+				id: loginResponse.user.id,
+				name: loginResponse.user.name,
+				avatar: loginResponse.user.avatar,
+			};
+			localStorage.setItem("realm.user", JSON.stringify(userInfo));
 			Cookies.set("realmToken", realmToken!, {
 				expires: 30,
 				sameSite: "strict",
 				secure: true,
 			});
+
+			const redirectUri = window.location.href.replace(/[#?].*$/, "");
+			window.location.assign(redirectUri);
+
+			throw "Reloading page to use new session";
 		}
 
-		return new RealmClient(user, realmToken!);
+		return new RealmClient(userInfo, realmToken!);
 	}
 
 	async realmApi(url: string, opts?: Partial<RequestInit>): Promise<Response> {
@@ -51,7 +73,7 @@ export default class RealmClient {
 			headers: {
 				...opts?.headers,
 				"Content-Type": "application/json",
-				"X-Realm-User": this.user_id,
+				"X-Realm-User": this.user.id,
 				"X-Realm-Token": this.token,
 			},
 		}).then((r) => {

src/app/views/main.vue

@@ -1,12 +1,10 @@
 <script lang="ts" setup>
 import DiscordAvatar from "@/components/discord-avatar.vue";
-import { User } from "@/lib/discord";
 import { doneLoading } from "@/lib/global";
 import RealmClient from "@/lib/realm";
 import { inject, onMounted } from "vue";
 
 const realm: RealmClient = inject("realmClient")!;
-const user: User = inject("user");
 
 // filter to guilds shared with the bot
 const sharedGuilds = await realm.getSharedGuilds();
@@ -18,8 +16,12 @@ onMounted(() => doneLoading());
 	<h1>Realm TTRPG</h1>
 	<p>
 		You are logged in as
-		<DiscordAvatar class="am di mr-xxs" :user="user" :size="32"></DiscordAvatar>
-		<strong>{{ user.username }}</strong
+		<DiscordAvatar
+			class="am di mr-xxs"
+			:user="realm.user"
+			:size="32"
+		></DiscordAvatar>
+		<strong>{{ realm.user.name }}</strong
 		>.
 	</p>
 	<p>