Final httpOnly JWT token implementation front+back

web/admin-gui/src/components/Navbar.vue

@@ -2,13 +2,20 @@
 import { useAuthStore } from '@/stores/AuthStore';
 import { deleteCookie } from '@/utils/cookies';
 import { RouterLink, useRouter } from 'vue-router'
+import { baseApiUrl } from "@/utils/api"
 
 const router = useRouter()
 
 function logout() {
-	deleteCookie('JWTtoken')
-	deleteCookie('JWTexpire')
+	deleteCookie('jwt_expire')
 	useAuthStore().clearAll()
+
+	fetch(`${baseApiUrl}/logout`, {
+		method: 'POST',
+		credentials: 'include'
+	})
+		.catch(error => console.error(error))
+
 	router.push('/')
 }
 </script>

web/admin-gui/src/router/index.ts

@@ -1,7 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useAuthStore } from '@/stores/AuthStore'
 import { nextTick } from 'vue'
-import Debug from '@/views/Debug.vue'
 import Login from '@/views/Login.vue'
 import Home from '@/views/Home.vue'
 import Articles from '@/views/Articles.vue'
@@ -19,14 +18,6 @@ const router = createRouter({
 				title: 'GohCMS - Connexion'
 			}
 		},
-		{
-			path: '/debug',
-			name: 'debug',
-			component: Debug,
-			meta: {
-				title: 'GohCMS - Debug'
-			}
-		},
 		{
 			path: '/home',
 			name: 'home',
@@ -63,13 +54,13 @@ const router = createRouter({
 })
 
 router.beforeEach(async (to, from) => {
-	const isTokenValid = useAuthStore().isValid()
+	const isJwtExpired = useAuthStore().isExpired()
 	if (to.name === 'login') {
-		if (isTokenValid) return {
+		if (!isJwtExpired) return {
 			name: 'home'
 		}
 	} else {
-		if (!isTokenValid) { 
+		if (isJwtExpired) { 
 			return {
 				name: 'login',
 			}

web/admin-gui/src/stores/AuthStore.ts

@@ -6,23 +6,18 @@ import { useErrorsStore } from "./ErrorsStore";
 export interface jwtFormat {
 	code: number,
 	expire: string,
-	token: string
+	message: string
 }
 
 export const useAuthStore = defineStore("AuthStore", () => {
 	const expire = ref('')
-	const token = ref('')
 	
 	function clearAll(): void {
 		expire.value = ''
-		token.value = ''
 	}
  
-	function isSet(): boolean {
-		return token.value !== undefined && token.value !== ''
-	}
-	
 	function isExpired(): boolean {
+		if (expire.value === '') return true;
 		const tokenDate = new Date(expire.value)
 		const currentDate = new Date()
 
@@ -33,20 +28,14 @@ export const useAuthStore = defineStore("AuthStore", () => {
 		return false
 	}
 	
-	function isValid(): boolean {
-		return isSet() && !isExpired()
-	}
-	
 	function initStore(): void {
-		const JWTtoken = getCookie('JWTtoken')
-		const JWTexpire = getCookie('JWTexpire')
-		if (JWTtoken !== "" && JWTexpire !== "") {
-			token.value = JWTtoken
+		const JWTexpire = getCookie('jwt_expire')
+		if (JWTexpire !== "") {
 			expire.value = JWTexpire
 		}
 	}
 	
 	initStore()
 	
-	return { expire, token, isValid, clearAll }
+	return { expire, clearAll, isExpired}
 })

web/admin-gui/src/utils/api.ts

@@ -0,0 +1 @@
+export const baseApiUrl = `http://${__APP_ENV__.APP_HOST_ADDRESS}:${__APP_ENV__.APP_API_PORT}`

web/admin-gui/src/utils/database.ts

@@ -1,4 +1,5 @@
 import { useAuthStore } from "@/stores/AuthStore"
+import { baseApiUrl } from "@/utils/api"
 
 export interface Article {
 	titleID: string,
@@ -11,10 +12,8 @@ export interface Article {
 	online: boolean
 }
 
-const baseURL = `http://${__APP_ENV__.APP_HOST_ADDRESS}:${__APP_ENV__.APP_API_PORT}`
-
 export async function getArticles(id: string) : Promise<Array<Article>> {
-	return await fetch(`${baseURL}/articles/${id}`, {
+	return await fetch(`${baseApiUrl}/articles/${id}`, {
 		credentials: 'include',
 		method: 'GET',
 	})
@@ -25,7 +24,7 @@ export async function getArticles(id: string) : Promise<Array<Article>> {
 }
 
 export async function postArticle(article: Article) : Promise<object> {
-	return await fetch(`${baseURL}/articles/${article.titleID}`, {
+	return await fetch(`${baseApiUrl}/articles/${article.titleID}`, {
 		credentials: 'include',
 		method: 'POST',
  		body: JSON.stringify(article)

web/admin-gui/src/views/Debug.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { useAuthStore } from '@/stores/AuthStore';
-import { ref } from 'vue';
-
-const baseURL = `http://${__APP_ENV__.APP_HOST_ADDRESS}:${__APP_ENV__.APP_API_PORT}`
-const articleID = ref('')
-
-function getArticles(id?: string) {
-	fetch(`${baseURL}/articles/${id ?? ''}`, {
-		headers: { "Authorization": `Bearer ${useAuthStore().token}` }
-	})
-		.then(response => response.json())
-		.then(result => console.log(result))
-}
-
-function ping() {
-	fetch(`${baseURL}/ping/`, {
-		headers: { "Authorization": `Bearer ${useAuthStore().token}` }
-	})
-		.then(response => response.json())
-		.then(result => console.log(result))
-}
-</script>
-
-<template>
-	<div class="inputs-group">
-		<div>
-			<input type="text" placeholder="article ID" v-model="articleID">
-			<button class="button-primary" @click="getArticles(articleID)">get article</button>
-		</div>
-	</div>
-	<div class="buttons-group">
-		<button class="button-primary" @click="ping()">ping</button>
-	</div>
-</template>
-
-<style scoped>
-.editor {
-	position: relative;
-	height: 100%;
-}
-
-.buttons-group,
-.inputs-group {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-	margin: 32px;
-}
-
-.inputs-group {
-	flex-direction: column;
-}
-
-.inputs-group div {
-	flex-direction: row;
-	gap: 8px;
-}
-</style>

web/admin-gui/src/views/Login.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useAuthStore, type jwtFormat } from '@/stores/AuthStore';
 import { useErrorsStore } from '@/stores/ErrorsStore';
+import { baseApiUrl } from '@/utils/api';
 import { setCookie } from '@/utils/cookies';
 import { ref, type Ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -19,13 +20,8 @@ function updateJWTcookies(JWTdata: jwtFormat): void {
 	const cookieExpire = new Date(JWTdata.expire)
 	cookieExpire.setDate(cookieExpire.getDate() + 1)
 
-	// setCookie({
-	// 	key: 'JWTtoken',
-	// 	value: JWTdata.token,
-	// 	expire: cookieExpire.toString()
-	// })
 	setCookie({
-		key: 'JWTexpire',
+		key: 'jwt_expire',
 		value: JWTdata.expire,
 		expire: cookieExpire.toString()
 	})
@@ -43,14 +39,13 @@ function jwtHandler(apiResponse: jwtFormat): void {
 	}
 	updateJWTcookies(apiResponse)
 	disableErrors()
-	authStore.token = 'pouet'
 	authStore.expire = apiResponse.expire
 	isTokenOK.value = true
 }
 
 function login(email: string, password: string): void {
-	fetch(`http://${__APP_ENV__.APP_HOST_ADDRESS}:${__APP_ENV__.APP_API_PORT}/login/`, {
-		method: "POST",
+	fetch(`${baseApiUrl}/login/`, {
+		method: 'POST',
 		credentials: 'include',
 		body: JSON.stringify({
 			email: email,