feat: fix authentication

src/components/Navbar/Navbar.vue

@@ -458,23 +458,23 @@ onMounted(() => {
       >
         <div class="user-widget-toggle">
           <img
-            src="url"
-            alt="name"
+            :src="user.mii?.imageUrl ?? '#'"
+						:alt="user.mii?.name ?? ''"
           >
         </div>
         <div class="user-widget">
           <div class="user-avatar">
             <img
-              src=""
-              alt="miiname"
+            	:src="user.mii?.imageUrl ?? '#'"
+              :alt="user.mii?.name ?? ''"
             >
           </div>
           <div class="user-info">
-            <div class="mii-name">
-              miiname
+            <div v-if="user.mii" class="mii-name">
+              {{ user.mii.name }}
             </div>
             <div class="pnid">
-              pnid
+              {{ user.username }}
             </div>
           </div>
           <div class="buttons">

src/layouts/default.vue

@@ -5,5 +5,5 @@
       <slot />
       <Footer />
     </div>
-  </div>
+	</div>
 </template>

src/middleware/1.auth.global.ts

@@ -1,4 +1,4 @@
-import type { GetApiAuthMe } from "~/server/api/auth/me.get";
+import type { GetApiAuthMe } from "#shared/api-types"
 
 export default defineNuxtRouteMiddleware(async () => {
 	const meStore = useMeStore();
@@ -20,6 +20,7 @@ export default defineNuxtRouteMiddleware(async () => {
 		meStore.setMe({
 			pid: res.pid,
 			username: res.username,
+			mii: res.mii,
 		});
 	} catch {
 		meStore.setMe(null);

src/middleware/2.enforce.global.ts

@@ -6,7 +6,6 @@ export default defineNuxtRouteMiddleware(async (to) => {
 	const meStore = useMeStore();
 	if (!meStore.loaded) throw new Error("Mestore must be loaded before reaching this middleware");
 
-	// NeedsAuth
 	if (to.meta.needsAuth) {
 		if (!meStore.user) return notAllowed();
 	}

src/pages/account/login/index.vue

@@ -2,6 +2,7 @@
 import { FetchError } from 'ofetch';
 
 const route = useRoute();
+const auth = useAuthStore();
 const redirect = computed(() => route.query.redirect);
 const registerURI = computed(() => `/account/register${redirect.value ? `?redirect=${redirect.value}` : ''}`);
 
@@ -14,9 +15,13 @@ async function loginSubmission() {
 			method: 'POST',
 			body: {
 				username: loginForm.username,
-				password: loginForm.password,
+				password: loginForm.password
 			}
 		});
+		auth.set({
+			accessToken: res.accessToken,
+			refreshToken: res.refreshToken
+		});
 
 		if (typeof redirect.value === 'string') {
 			await navigateTo(redirect.value);

src/stores/auth.ts

@@ -1,4 +1,4 @@
-import type { CookieOptions } from "#app";
+import type { CookieOptions } from '#app';
 
 type AuthState = {
 	accessToken: string;
@@ -17,28 +17,28 @@ type AuthState = {
 // because other services use them (and overwrite them)
 // These are not used by the website codebase for security purposes.
 
-const oldCookieTokenType = "Bearer"
-const cookieExpirySec = 7 * 24 * 60 * 60 // 7 days
+const oldCookieTokenType = 'Bearer';
+const cookieExpirySec = 7 * 24 * 60 * 60; // 7 days
 const oldCookieOptions = {
 	domain: '.pretendo.network',
 	secure: false,
 	httpOnly: false,
 	maxAge: cookieExpirySec,
 	refresh: true,
-	readonly: false,
-} satisfies CookieOptions<string> & { readonly: false }
+	readonly: false
+} satisfies CookieOptions<string> & { readonly: false };
 
 // Not actually a store, but may as well be
 export function useAuthStore() {
-	const authState = useCookie<AuthState | null>("pretendo::auth", {
-		sameSite: "strict",
+	const authState = useCookie<AuthState | null>('pretendo::auth', {
+		sameSite: 'strict',
 		secure: useRuntimeConfig().public.cookieSecure,
 		refresh: true,
-		default: () => null,
+		default: () => null
 	});
-	const accessTokenCookie = useCookie<string | null>("access_token", oldCookieOptions);
-	const refreshTokenCookie = useCookie<string | null>("refresh_token", oldCookieOptions);
-	const tokenTypeCookie = useCookie<string | null>("token_type", oldCookieOptions);
+	const accessTokenCookie = useCookie<string | null>('access_token', oldCookieOptions);
+	const refreshTokenCookie = useCookie<string | null>('refresh_token', oldCookieOptions);
+	const tokenTypeCookie = useCookie<string | null>('token_type', oldCookieOptions);
 
 	function getToken() {
 		return authState.value?.accessToken ?? null;
@@ -53,12 +53,11 @@ export function useAuthStore() {
 
 	function set(val: AuthState | null) {
 		if (val) {
-			authState.value = val
+			authState.value = val;
 			accessTokenCookie.value = val.accessToken;
 			refreshTokenCookie.value = val.refreshToken;
 			tokenTypeCookie.value = oldCookieTokenType;
-		}
-		else {
+		} else {
 			authState.value = null;
 			accessTokenCookie.value = null;
 			refreshTokenCookie.value = null;
@@ -69,6 +68,6 @@ export function useAuthStore() {
 	return {
 		getToken,
 		refresh,
-		set,
+		set
 	};
 }

src/stores/me.ts

@@ -1,18 +1,22 @@
 export type Me = {
 	pid: number;
 	username: string;
+	mii: {
+		imageUrl: string,
+		name: string,
+	} | null,
 };
 
-export const useMeStore = defineStore("me", () => {
+export const useMeStore = defineStore('me', () => {
 	const data = ref<Me | null>(null);
 	const loaded = ref(false);
 
-	function setMe(input: Me | null) {
+	function setMe(input: Me | null): void {
 		data.value = input;
 		loaded.value = true;
 	}
 
-	function clear() {
+	function clear(): void {
 		data.value = null;
 	}
 
@@ -20,6 +24,6 @@ export const useMeStore = defineStore("me", () => {
 		user: computed(() => data.value),
 		loaded: computed(() => loaded.value),
 		setMe,
-		clear,
+		clear
 	};
 });