Merge branch 'chore/login' into docs/swagger-autogen

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,7 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+    import auth from "@/services/auth/auth-service.ts";
+    auth.loadUser();
+</script>
 
 <template>
     <router-view />

frontend/src/config.ts

@@ -0,0 +1,5 @@
+export const apiConfig = {
+    baseUrl: window.location.hostname == "localhost" ? "http://localhost:3000" : window.location.origin
+}
+
+export const loginRoute = "/login";

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/CallbackPage.vue";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -33,6 +34,10 @@ const router = createRouter({
                 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";
+import {apiConfig} from "@/config.ts";
+
+const apiClient = axios.create({
+    baseURL: apiConfig.baseUrl,
+    headers: {
+        "Content-Type": "application/json",
+    },
+});
+export default apiClient;

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

@@ -0,0 +1,27 @@
+import apiClient from "@/services/api-client.ts";
+import type {FrontendAuthConfig} from "@/services/auth/auth.d.ts";
+
+/**
+ * Fetch the authentication configuration from the backend.
+ */
+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,132 @@
+/**
+ * Service for all authentication- and authorization-related tasks.
+ */
+
+import {computed, reactive} from "vue";
+import type {AuthState, Role, UserManagersForRoles} from "@/services/auth/auth.d.ts";
+import {User, UserManager} from "oidc-client-ts";
+import {loadAuthConfig} from "@/services/auth/auth-config-loader.ts";
+import authStorage from "./auth-storage.ts"
+import {loginRoute} from "@/config.ts";
+import apiClient from "@/services/api-client.ts";
+import router from "@/router";
+import type {AxiosError} from "axios";
+
+const authConfig = await loadAuthConfig();
+
+const userManagers: UserManagersForRoles = {
+    student: new UserManager(authConfig.student),
+    teacher: new UserManager(authConfig.teacher),
+};
+
+/**
+ * Load the information about who is currently logged in from the IDP.
+ */
+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;
+}
+
+/**
+ * Information about the current authentication state.
+ */
+const authState = reactive<AuthState>({
+    user: null,
+    accessToken: null,
+    activeRole: authStorage.getActiveRole() || null
+});
+
+const isLoggedIn = computed(() => authState.user !== null);
+
+/**
+ * Redirect the user to the login page where he/she can choose whether to log in as a student or teacher.
+ */
+async function initiateLogin() {
+    await router.push(loginRoute);
+}
+
+/**
+ * Redirect the user to the IDP for the given role so that he can log in there.
+ * Only call this function when the user is not logged in yet!
+ */
+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();
+}
+
+/**
+ * To be called when the user is redirected to the callback-endpoint by the IDP after a successful login.
+ */
+async function handleLoginCallback(): Promise<void> {
+    const activeRole = authStorage.getActiveRole();
+    if (!activeRole) {
+        throw new Error("Login callback received, but the user is not logging in!");
+    }
+    authState.user = await userManagers[activeRole].signinCallback() || null;
+}
+
+/**
+ * Refresh an expired authorization token.
+ */
+async function renewToken() {
+    const activeRole = authStorage.getActiveRole();
+    if (!activeRole) {
+        console.log("Can't renew the token: Not logged in!");
+        await initiateLogin();
+        return;
+    }
+    try {
+        return await userManagers[activeRole].signinSilent();
+    } catch (error) {
+        console.log("Can't renew the token:");
+        console.log(error);
+        await initiateLogin();
+    }
+}
+
+/**
+ * End the session of the current user.
+ */
+async function logout(): Promise<void> {
+    const activeRole = authStorage.getActiveRole();
+    if (activeRole) {
+        await userManagers[activeRole].signoutRedirect();
+        authStorage.deleteActiveRole();
+    }
+}
+
+// Registering interceptor to add the authorization header to each request when the user is logged in.
+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));
+
+// Registering interceptor to refresh the token when a request failed because it was expired.
+apiClient.interceptors.response.use(
+    response => response,
+    async (error: AxiosError<{message?: string}>) => {
+        if (error.response?.status === 401) {
+            if (error.response!.data.message === "token_expired") {
+                console.log("Access token expired, trying to refresh...");
+                await renewToken();
+                return apiClient(error.config!); // Retry the request
+            } else { // Apparently, the user got a 401 because he was not logged in yet at all. Redirect him to login.
+                await initiateLogin()
+            }
+        }
+        return Promise.reject(error);
+    }
+);
+
+export default {authState, isLoggedIn, initiateLogin, loadUser, handleLoginCallback, loginAs, logout};

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

@@ -0,0 +1,26 @@
+import type {Role} from "@/services/auth/auth.d.ts";
+
+export default {
+    /**
+     * Get the role the user is currently logged in as from the local persistent storage.
+     */
+    getActiveRole(): Role | undefined {
+        return localStorage.getItem("activeRole") as Role | undefined;
+    },
+
+    /**
+     * Set the role the user is currently logged in as from the local persistent storage.
+     * This should happen when the user logs in with another account.
+     */
+    setActiveRole(role: Role) {
+        localStorage.setItem("activeRole", role);
+    },
+
+    /**
+     * Remove the saved current role from the local persistent storage.
+     * This should happen when the user is logged out.
+     */
+    deleteActiveRole() {
+        localStorage.removeItem("activeRole");
+    }
+}

frontend/src/services/auth/auth.d.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/views/CallbackPage.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+    import {useRouter} from "vue-router";
+    import {onMounted} from "vue";
+    import auth from "../services/auth/auth-service.ts"
+
+    const router = useRouter();
+
+    onMounted(async () => {
+        try {
+            await auth.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>

frontend/src/views/HomePage.vue

@@ -1,8 +1,26 @@
-<script setup lang="ts"></script>
+<script setup lang="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>
-        <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="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></style>

frontend/src/views/LoginPage.vue

@@ -1,7 +1,32 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+    import auth from "@/services/auth/auth-service.ts";
+
+    function loginAsStudent() {
+        auth.loginAs("student");
+    }
+
+    function loginAsTeacher() {
+        auth.loginAs("teacher");
+    }
+
+    function performLogout() {
+        auth.logout();
+    }
+</script>
 
 <template>
-    <main></main>
+    <main>
+        <!-- TODO Placeholder implementation to test the login - replace by a more beautiful page later -->
+        <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="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>
 </template>
 
 <style scoped></style>