chore(frontend): Refactoring

Refactoring zodat de structuur van de authenticatieservice in de client duidelijker is.

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-    import {loadUser} from "@/store/auth-store.ts";
-    loadUser();
+    import auth from "@/services/auth/auth-service.ts";
+    auth.loadUser();
 </script>
 
 <template>

frontend/src/config.ts

@@ -1,14 +1,5 @@
-export const authConfig = {
-    student: {
-        authority: import.meta.env.VITE_STUDENT_AUTH_AUTHORITY || "https://auth.sel2-1.ugent.be/realms/student",
-        clientId: import.meta.env.VITE_STUDENT_AUTH_CLIENT_ID || "dwengo",
-        redirectUri: window.location.origin + "/callback",
-        scope: import.meta.env.VITE_STUDENT_AUTH_SCOPE || "openid profile email"
-    },
-    teacher: {
-        authority: import.meta.env.VITE_TEACHER_AUTH_AUTHORITY || "https://auth.sel2-1.ugent.be/realms/teacher",
-        clientId: import.meta.env.VITE_TEACHER_AUTH_CLIENT_ID || "dwengo",
-        redirectUri: window.location.origin + "/callback",
-        scope: import.meta.env.VITE_TEACHER_AUTH_SCOPE || "openid profile email"
-    }
-};
+export const apiConfig = {
+    baseUrl: window.location.hostname == "localhost" ? "http://localhost:3000" : window.location.origin
+}
+
+export const loginRoute = "/login";

frontend/src/router/index.ts

@@ -15,7 +15,7 @@ import NotFound from "@/components/errors/NotFound.vue";
 import CreateClass from "@/views/classes/CreateClass.vue";
 import CreateAssignment from "@/views/assignments/CreateAssignment.vue";
 import CreateDiscussion from "@/views/discussions/CreateDiscussion.vue";
-import CallbackPage from "@/views/discussions/CallbackPage.vue";
+import CallbackPage from "@/views/CallbackPage.vue";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),

frontend/src/services/api-client.ts

@@ -1,7 +1,8 @@
 import axios from "axios";
+import {apiConfig} from "@/config.ts";
 
 const apiClient = axios.create({
-    baseURL: window.location.hostname == "localhost" ? "http://localhost:3000" : window.location.origin,
+    baseURL: apiConfig.baseUrl,
     headers: {
         "Content-Type": "application/json",
     },

frontend/src/services/auth-service.ts

@@ -1,106 +0,0 @@
-import {User, UserManager} from "oidc-client-ts";
-import apiClient from "@/services/api-client.ts";
-
-type FrontendAuthConfig = {
-    student: FrontendIdpConfig,
-    teacher: FrontendIdpConfig
-}
-
-type FrontendIdpConfig = {
-    authority: string,
-    clientId: string,
-    scope: string,
-    responseType: string
-}
-
-export type Role = "student" | "teacher";
-type UserManagersForRoles = {student: UserManager, teacher: UserManager};
-
-class AuthService {
-    constructor(private userManagers: UserManagersForRoles) {}
-
-    public async loginAs(role: Role) {
-        // Storing it in local storage so that it won't be lost when redirecting outside of the app.
-        this.setActiveRole(role);
-        await this.userManagers[role].signinRedirect();
-    }
-
-    public async logout() {
-        const activeRole = this.getActiveRole();
-        if (activeRole) {
-            await this.userManagers[activeRole].signoutRedirect();
-            this.deleteActiveRole();
-        }
-    }
-
-    public async getUser(): Promise<User | null> {
-        const activeRole = this.getActiveRole();
-        if (!activeRole) {
-            return null;
-        }
-        return await this.userManagers[activeRole].getUser();
-    }
-
-    public async getAccessToken(): Promise<string | null> {
-        const user = await this.getUser();
-        return user?.access_token || null;
-    }
-
-    async renewToken() {
-        const activeRole = this.getActiveRole();
-        if (!activeRole) {
-            throw new Error("Can't renew the token: Not logged in!");
-        }
-        return this.userManagers[activeRole].signinSilent();
-    }
-
-    public getActiveRole(): Role | undefined {
-        return localStorage.getItem("activeRole") as Role | undefined;
-    }
-
-    public async handleRedirectCallback(): Promise<User | undefined> {
-        const activeRole = this.getActiveRole();
-        if (!activeRole) {
-            throw new Error("Can't renew the token: Not logged in!");
-        }
-        return this.userManagers[activeRole].signinCallback();
-    }
-
-    private setActiveRole(role: Role) {
-        localStorage.setItem("activeRole", role);
-    }
-
-    private deleteActiveRole() {
-        localStorage.removeItem("activeRole");
-    }
-}
-
-async function initAuthService() {
-    const authConfig = await apiClient.get<FrontendAuthConfig>("auth/config").then(it => it.data);
-
-    const oidcConfig = {
-        student: {
-            authority: authConfig.student.authority,
-            client_id: authConfig.student.clientId,
-            redirect_uri: window.location.origin + "/callback",
-            response_type: authConfig.student.responseType,
-            scope: authConfig.student.scope,
-            post_logout_redirect_uri: window.location.origin,
-        },
-        teacher: {
-            authority: authConfig.teacher.authority,
-            client_id: authConfig.teacher.clientId,
-            redirect_uri: window.location.origin + "/callback",
-            response_type: authConfig.teacher.responseType,
-            scope: authConfig.teacher.scope,
-            post_logout_redirect_uri: window.location.origin,
-        }
-    };
-
-    return new AuthService({
-        student: new UserManager(oidcConfig.student),
-        teacher: new UserManager(oidcConfig.teacher)
-    });
-}
-
-export default await initAuthService();

frontend/src/services/auth/auth-api-client-interceptors.ts

@@ -0,0 +1,24 @@
+import apiClient from "@/services/api-client.ts";
+import type {AuthState} from "@/services/auth/auth-types.ts";
+
+export function configureApiClientAuthInterceptors(authState: AuthState, renewToken: () => Promise<any>) {
+    apiClient.interceptors.request.use(async (reqConfig) => {
+        const token = authState?.user?.access_token;
+        if (token) {
+            reqConfig.headers.Authorization = `Bearer ${token}`;
+        }
+        return reqConfig;
+    }, (error) => Promise.reject(error));
+
+    apiClient.interceptors.response.use(
+        response => response,
+        async (error) => {
+            if (error.response?.status === 401) {
+                console.log("Access token expired, trying to refresh...");
+                await renewToken();
+                return apiClient(error.config); // Retry the request
+            }
+            return Promise.reject(error);
+        }
+    );
+}

frontend/src/services/auth/auth-config-loader.ts

@@ -0,0 +1,24 @@
+import apiClient from "@/services/api-client.ts";
+import type {FrontendAuthConfig} from "@/services/auth/auth-types.ts";
+
+export async function loadAuthConfig() {
+    const authConfig = (await apiClient.get<FrontendAuthConfig>("auth/config")).data;
+    return {
+        student: {
+            authority: authConfig.student.authority,
+            client_id: authConfig.student.clientId,
+            redirect_uri: window.location.origin + "/callback",
+            response_type: authConfig.student.responseType,
+            scope: authConfig.student.scope,
+            post_logout_redirect_uri: window.location.origin,
+        },
+        teacher: {
+            authority: authConfig.teacher.authority,
+            client_id: authConfig.teacher.clientId,
+            redirect_uri: window.location.origin + "/callback",
+            response_type: authConfig.teacher.responseType,
+            scope: authConfig.teacher.scope,
+            post_logout_redirect_uri: window.location.origin,
+        }
+    };
+}

frontend/src/services/auth/auth-service.ts

@@ -0,0 +1,77 @@
+/**
+ * Service for all authentication- and authorization-related tasks.
+ */
+
+import {computed, reactive} from "vue";
+import type {AuthState, Role, UserManagersForRoles} from "@/services/auth/auth-types.ts";
+import {User, UserManager} from "oidc-client-ts";
+import {loadAuthConfig} from "@/services/auth/auth-config-loader.ts";
+import {configureApiClientAuthInterceptors} from "@/services/auth/auth-api-client-interceptors.ts";
+import authStorage from "./auth-storage.ts"
+
+const authConfig = await loadAuthConfig();
+
+const userManagers: UserManagersForRoles = {
+    student: new UserManager(authConfig.student),
+    teacher: new UserManager(authConfig.teacher),
+};
+
+async function loadUser(): Promise<User | null> {
+    const activeRole = authStorage.getActiveRole();
+    if (!activeRole) {
+        return null;
+    }
+    let user = await userManagers[activeRole].getUser();
+    authState.user = user;
+    authState.accessToken = user?.access_token || null;
+    authState.activeRole = activeRole || null;
+    return user;
+}
+
+const authState = reactive<AuthState>({
+    user: null,
+    accessToken: null,
+    activeRole: authStorage.getActiveRole() || null
+});
+
+const isLoggedIn = computed(() => authState.user !== null);
+
+async function loginAs(role: Role): Promise<void> {
+    // Storing it in local storage so that it won't be lost when redirecting outside of the app.
+    authStorage.setActiveRole(role);
+    await userManagers[role].signinRedirect();
+}
+
+async function handleLoginCallback(): Promise<void> {
+    const activeRole = authStorage.getActiveRole();
+    if (!activeRole) {
+        throw new Error("Can't renew the token: Not logged in!");
+    }
+    authState.user = await userManagers[activeRole].signinCallback() || null;
+}
+
+async function renewToken() {
+    const activeRole = authStorage.getActiveRole();
+    if (!activeRole) {
+        throw new Error("Can't renew the token: Not logged in!");
+    }
+    try {
+        return await userManagers[activeRole].signinSilent();
+    } catch (error) {
+        console.log("Can't renew the token:");
+        console.log(error);
+        await loginAs(activeRole);
+    }
+}
+
+async function logout(): Promise<void> {
+    const activeRole = authStorage.getActiveRole();
+    if (activeRole) {
+        await userManagers[activeRole].signoutRedirect();
+        authStorage.deleteActiveRole();
+    }
+}
+
+configureApiClientAuthInterceptors(authState, renewToken);
+
+export default {authState, isLoggedIn, loadUser, handleLoginCallback, loginAs, logout};

frontend/src/services/auth/auth-storage.ts

@@ -0,0 +1,13 @@
+import type {Role} from "@/services/auth/auth-types.ts";
+
+export default {
+    getActiveRole(): Role | undefined {
+        return localStorage.getItem("activeRole") as Role | undefined;
+    },
+    setActiveRole(role: Role) {
+        localStorage.setItem("activeRole", role);
+    },
+    deleteActiveRole() {
+        localStorage.removeItem("activeRole");
+    }
+}

frontend/src/services/auth/auth-types.ts

@@ -0,0 +1,22 @@
+import {type User, UserManager} from "oidc-client-ts";
+
+export type AuthState = {
+    user: User | null,
+    accessToken: string | null,
+    activeRole: Role | null
+};
+
+export type FrontendAuthConfig = {
+    student: FrontendIdpConfig,
+    teacher: FrontendIdpConfig
+};
+
+export type FrontendIdpConfig = {
+    authority: string,
+    clientId: string,
+    scope: string,
+    responseType: string
+};
+
+export type Role = "student" | "teacher";
+export type UserManagersForRoles = {student: UserManager, teacher: UserManager};

frontend/src/store/auth-store.ts

@@ -1,40 +0,0 @@
-import {computed, reactive} from "vue";
-import authService, {type Role} from "@/services/auth-service.ts";
-import type {User} from "oidc-client-ts";
-
-type AuthState = {
-    user: User | null,
-    accessToken: string | null,
-    activeRole: Role | null
-};
-
-export const authState = reactive<AuthState>({
-    user: null,
-    accessToken: null,
-    activeRole: authService.getActiveRole() || null
-});
-
-export const isLoggedIn = computed(() => authState.user !== null);
-
-export async function loadUser(): Promise<void> {
-    const user = await authService.getUser();
-    authState.user = user;
-    authState.accessToken = user?.access_token || null;
-    authState.activeRole = authService.getActiveRole() || null;
-}
-
-export async function handleLoginCallback(): Promise<void> {
-    console.log("Hallooo");
-    authState.user = await authService.handleRedirectCallback() || null;
-}
-
-export async function loginAs(role: Role): Promise<void> {
-    await authService.loginAs(role);
-}
-
-export async function logout(): Promise<void> {
-    await authService.logout();
-    authState.user = null;
-    authState.accessToken = null;
-    authState.activeRole = null;
-}

frontend/src/views/CallbackPage.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
     import {useRouter} from "vue-router";
     import {onMounted} from "vue";
-    import {handleLoginCallback} from "@/store/auth-store.ts";
+    import auth from "../services/auth/auth-service.ts"
 
     const router = useRouter();
 
     onMounted(async () => {
         try {
-            await handleLoginCallback();
+            await auth.handleLoginCallback();
             await router.replace("/"); // Redirect to home (or dashboard)
         } catch (error) {
             console.error("OIDC callback error:", error);

frontend/src/views/HomePage.vue

@@ -1,15 +1,26 @@
 <script setup lang="ts">
-    import {isLoggedIn, authState} from "@/store/auth-store.ts";
+    import auth from "@/services/auth/auth-service.ts";
+    import apiClient from "@/services/api-client.ts";
+    import {ref} from "vue";
+
+    const testResponse = ref(null);
+
+    async function testAuthenticated() {
+        testResponse.value = await apiClient.get("/auth/testAuthenticatedOnly")
+    }
 </script>
 
 <template>
     <main>
         <!-- TODO Placeholder implementation to test the login - replace by a more beautiful page later -->
         <b>Welcome to the dwengo homepage</b>
-        <div v-if="isLoggedIn">
-            <p>Hello {{authState.user?.profile.name}}!</p>
-            <p>Your access token for the backend is: <code>{{authState.user?.access_token}}</code></p>
+        <div v-if="auth.isLoggedIn.value">
+            <p>Hello {{auth.authState.user?.profile.name}}!</p>
+            <p>Your access token for the backend is: <code>{{auth.authState.user?.access_token}}</code></p>
         </div>
+
+        <v-btn @click="testAuthenticated">Send test request</v-btn>
+        <p v-if="testResponse">Response from the test request: {{ testResponse }}</p>
     </main>
 </template>
 <style scoped>

frontend/src/views/LoginPage.vue

@@ -1,30 +1,29 @@
 <script setup lang="ts">
-
-import {isLoggedIn, loginAs, logout, authState} from "@/store/auth-store.ts";
+    import auth from "@/services/auth/auth-service.ts";
 
     function loginAsStudent() {
-        loginAs("student");
+        auth.loginAs("student");
     }
 
     function loginAsTeacher() {
-        loginAs("teacher");
+        auth.loginAs("teacher");
     }
 
     function performLogout() {
-        logout();
+        auth.logout();
     }
 </script>
 
 <template>
     <main>
         <!-- TODO Placeholder implementation to test the login - replace by a more beautiful page later -->
-        <div v-if="!isLoggedIn">
+        <div v-if="!auth.isLoggedIn.value">
             <p>You are currently not logged in.</p>
             <v-btn @click="loginAsStudent">Login as student</v-btn>
             <v-btn @click="loginAsTeacher">Login as teacher</v-btn>
         </div>
-        <div v-if="isLoggedIn">
-            <p>You are currently logged in as {{ authState.user!.profile.name }} ({{ authState.activeRole }})</p>
+        <div v-if="auth.isLoggedIn.value">
+            <p>You are currently logged in as {{ auth.authState.user!.profile.name }} ({{ auth.authState.activeRole }})</p>
             <v-btn @click="performLogout">Logout</v-btn>
         </div>
     </main>