feat(frontend): Added functionality to the frontend to log in.

frontend/package.json

@@ -18,7 +18,9 @@
     "dependencies": {
         "vue": "^3.5.13",
         "vue-router": "^4.5.0",
-        "vuetify": "^3.7.12"
+        "vuetify": "^3.7.12",
+        "oidc-client-ts": "^3.1.0",
+        "axios": "^1.8.1"
     },
     "devDependencies": {
         "@playwright/test": "^1.50.1",

frontend/src/App.vue

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

frontend/src/config.ts

@@ -0,0 +1,14 @@
+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"
+    }
+};

frontend/src/router/index.ts

@@ -15,6 +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";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -29,6 +30,10 @@ const router = createRouter({
             name: "LoginPage",
             component: () => {return import("../views/LoginPage.vue")}
         },
+        {
+            path: "/callback",
+            component: CallbackPage
+        },
         {
             path: "/student/:id",
             component: MenuBar,

frontend/src/services/api-client.ts

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+const apiClient = axios.create({
+    baseURL: window.location.hostname == "localhost" ? "http://localhost:3000" : window.location.origin,
+    headers: {
+        "Content-Type": "application/json",
+    },
+});
+
+export default apiClient;

frontend/src/services/auth-service.ts

@@ -0,0 +1,106 @@
+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/store/auth-store.ts

@@ -0,0 +1,40 @@
+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/HomePage.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-
+    import {isLoggedIn, authState} from "@/store/auth-store.ts";
 </script>
 
 <template>
     <main>
-        <b> Welcome to the dwengo homepage</b>
+        <!-- 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>
     </main>
 </template>
 <style scoped>

frontend/src/views/LoginPage.vue

@@ -1,8 +1,33 @@
 <script setup lang="ts">
+
+import {isLoggedIn, loginAs, logout, authState} from "@/store/auth-store.ts";
+
+    function loginAsStudent() {
+        loginAs("student");
+    }
+
+    function loginAsTeacher() {
+        loginAs("teacher");
+    }
+
+    function performLogout() {
+        logout();
+    }
 </script>
 
 <template>
-    <main></main>
+    <main>
+        <!-- TODO Placeholder implementation to test the login - replace by a more beautiful page later -->
+        <div v-if="!isLoggedIn">
+            <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>
+            <v-btn @click="performLogout">Logout</v-btn>
+        </div>
+    </main>
 </template>
 
 <style scoped>

frontend/src/views/discussions/CallbackPage.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+    import {useRouter} from "vue-router";
+    import {onMounted} from "vue";
+    import {handleLoginCallback} from "@/store/auth-store.ts";
+
+    const router = useRouter();
+
+    onMounted(async () => {
+        try {
+            await handleLoginCallback();
+            await router.replace("/"); // Redirect to home (or dashboard)
+        } catch (error) {
+            console.error("OIDC callback error:", error);
+        }
+    });
+</script>
+
+<template>
+    <p>Logging you in...</p>
+</template>
+
+<style scoped>
+
+</style>