From 7b53e684aa405a7874f189dcb404c031dfed1388 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 21 Sep 2022 03:37:39 +0200
Subject: [PATCH] feat: port auth store to pinia

---
 src/App.vue                                   |   8 +-
 src/components/date/datepickerWithRange.vue   |   6 +-
 src/components/home/TheNavigation.vue         |  12 +-
 src/components/home/contentAuth.vue           |  13 +-
 src/components/input/datepicker.vue           |   7 +-
 .../notifications/notifications.vue           |   8 +-
 src/components/sharing/userTeam.vue           |   8 +-
 src/components/tasks/add-task.vue             |   4 +-
 src/components/tasks/partials/comments.vue    |   8 +-
 src/components/tasks/partials/defer-task.vue  |  12 +-
 src/router/index.ts                           |   8 +-
 src/store/index.ts                            |   8 +-
 src/store/types.ts                            |   1 +
 src/stores/auth.ts                            | 168 ++++++++++--------
 src/views/Home.vue                            |  10 +-
 src/views/labels/ListLabels.vue               |  10 +-
 src/views/list/ListGantt.vue                  |   8 +-
 src/views/list/settings/share.vue             |   4 +-
 src/views/namespaces/settings/share.vue       |  11 +-
 src/views/sharing/LinkSharingAuth.vue         |   6 +-
 src/views/tasks/ShowTasks.vue                 |   4 +-
 src/views/teams/EditTeam.vue                  |  11 +-
 src/views/user/DataExportDownload.vue         |   5 +-
 src/views/user/Login.vue                      |  13 +-
 src/views/user/OpenIdAuth.vue                 |   4 +-
 src/views/user/Register.vue                   |   7 +-
 src/views/user/Settings.vue                   |   6 +-
 src/views/user/settings/Avatar.vue            |  12 +-
 src/views/user/settings/Caldav.vue            |   8 +-
 src/views/user/settings/DataExport.vue        |   8 +-
 src/views/user/settings/Deletion.vue          |   8 +-
 src/views/user/settings/EmailUpdate.vue       |   6 +-
 src/views/user/settings/General.vue           |  10 +-
 src/views/user/settings/PasswordUpdate.vue    |   8 +-
 34 files changed, 241 insertions(+), 189 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c63cf7bf..81fcf611 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,15 +36,17 @@ import AccountDeleteService from '@/services/accountDelete'
 
 import {useColorScheme} from '@/composables/useColorScheme'
 import {useBodyClass} from '@/composables/useBodyClass'
+import {useAuthStore} from './stores/auth'
 
 const store = useStore()
+const authStore = useAuthStore()
 const router = useRouter()
 
 useBodyClass('is-touch', isTouchDevice())
 const keyboardShortcutsActive = computed(() => store.state.keyboardShortcutsActive)
 
-const authUser = computed(() => store.getters['auth/authUser'])
-const authLinkShare = computed(() => store.getters['auth/authLinkShare'])
+const authUser = computed(() => authStore.authUser)
+const authLinkShare = computed(() => authStore.authLinkShare)
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -58,7 +60,7 @@ watch(accountDeletionConfirm, async (accountDeletionConfirm) => {
 	const accountDeletionService = new AccountDeleteService()
 	await accountDeletionService.confirm(accountDeletionConfirm)
 	success({message: t('user.deletion.confirmSuccess')})
-	store.dispatch('auth/refreshUserInfo')
+	authStore.refreshUserInfo()
 }, { immediate: true })
 
 // setup password reset redirect
diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue
index 23181279..8546c143 100644
--- a/src/components/date/datepickerWithRange.vue
+++ b/src/components/date/datepickerWithRange.vue
@@ -71,7 +71,6 @@
 
 <script lang="ts" setup>
 import {computed, ref, watch} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import flatPickr from 'vue-flatpickr-component'
@@ -81,8 +80,9 @@ import Popup from '@/components/misc/popup.vue'
 import {DATE_RANGES} from '@/components/date/dateRanges'
 import BaseButton from '@/components/base/BaseButton.vue'
 import DatemathHelp from '@/components/date/datemathHelp.vue'
+import {useAuthStore} from '@/stores/auth'
 
-const store = useStore()
+const authStore = useAuthStore()
 const {t} = useI18n({useScope: 'global'})
 
 const emit = defineEmits(['update:modelValue'])
@@ -93,7 +93,7 @@ const props = defineProps({
 })
 
 // FIXME: This seems to always contain the default value - that breaks the picker
-const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
+const weekStart = computed(() => authStore.settings.weekStart ?? 0)
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index 0df97015..b693988b 100644
--- a/src/components/home/TheNavigation.vue
+++ b/src/components/home/TheNavigation.vue
@@ -93,7 +93,6 @@
 <script setup lang="ts">
 import {ref, computed, onMounted, nextTick} from 'vue'
 import {useStore} from '@/store'
-import {useRouter} from 'vue-router'
 
 import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import {RIGHTS as Rights} from '@/constants/rights'
@@ -109,12 +108,14 @@ import MenuButton from '@/components/home/MenuButton.vue'
 
 import {getListTitle} from '@/helpers/getListTitle'
 import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
 
 const store = useStore()
+const authStore = useAuthStore()
 const configStore = useConfigStore()
 
-const userInfo = computed(() => store.state.auth.info)
-const userAvatar = computed(() => store.state.auth.avatarUrl)
+const userInfo = computed(() => authStore.info)
+const userAvatar = computed(() => authStore.avatarUrl)
 const currentList = computed(() => store.state.currentList)
 const background = computed(() => store.state.background)
 const imprintUrl = computed(() => configStore.legal.imprintUrl)
@@ -134,11 +135,8 @@ onMounted(async () => {
 	listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
 })
 
-const router = useRouter()
-
 function logout() {
-	store.dispatch('auth/logout')
-	router.push({name: 'user.login'})
+	authStore.logout()
 }
 
 function openQuickActions() {
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index b41e86e5..855279e4 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -70,6 +70,7 @@ import {useLabelStore} from '@/stores/labels'
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
+import {useAuthStore} from '@/stores/auth'
 
 function useRouteWithModal() {
 	const router = useRouter()
@@ -165,13 +166,15 @@ watch(() => route.name as string, (routeName) => {
 
 function useRenewTokenOnFocus() {
 	const router = useRouter()
+	const authStore = useAuthStore()
 
-	const userInfo = computed(() => store.state.auth.info)
-	const authenticated = computed(() => store.state.auth.authenticated)
+
+	const userInfo = computed(() => authStore.info)
+	const authenticated = computed(() => authStore.authenticated)
 
 	// Try renewing the token every time vikunja is loaded initially
 	// (When opening the browser the focus event is not fired)
-	store.dispatch('auth/renewToken')
+	authStore.renewToken()
 
 	// Check if the token is still valid if the window gets focus again to maybe renew it
 	useEventListener('focus', () => {
@@ -184,14 +187,14 @@ function useRenewTokenOnFocus() {
 		// If the token expiry is negative, it is already expired and we have no choice but to redirect
 		// the user to the login page
 		if (expiresIn < 0) {
-			store.dispatch('auth/checkAuth')
+			authStore.checkAuth()
 			router.push({name: 'user.login'})
 			return
 		}
 
 		// Check if the token is valid for less than 60 hours and renew if thats the case
 		if (expiresIn < 60 * 3600) {
-			store.dispatch('auth/renewToken')
+			authStore.renewToken()
 			console.debug('renewed token')
 		}
 	})
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 733a9fab..bb940b89 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -102,6 +102,8 @@ import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
+import {mapState} from 'pinia'
+import {useAuthStore} from '@/stores/auth'
 
 export default defineComponent({
 	name: 'datepicker',
@@ -145,6 +147,9 @@ export default defineComponent({
 		},
 	},
 	computed: {
+		...mapState(useAuthStore, {
+			weekStart: (state) => state.settings.weekStart,
+		}),
 		flatPickerConfig() {
 			return {
 				altFormat: this.$t('date.altFormatLong'),
@@ -154,7 +159,7 @@ export default defineComponent({
 				time_24hr: true,
 				inline: true,
 				locale: {
-					firstDayOfWeek: this.$store.state.auth.settings.weekStart,
+					firstDayOfWeek: this.weekStart,
 				},
 			}
 		},
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index d1d28c20..aaaad93e 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -48,19 +48,19 @@
 
 <script lang="ts" setup>
 import {computed, onMounted, onUnmounted, ref} from 'vue'
+import {useRouter} from 'vue-router'
 
 import NotificationService from '@/services/notification'
 import BaseButton from '@/components/base/BaseButton.vue'
 import User from '@/components/misc/user.vue'
 import { NOTIFICATION_NAMES as names, type INotification} from '@/modelTypes/INotification'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {useStore} from '@/store'
-import {useRouter} from 'vue-router'
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {useAuthStore} from '@/stores/auth'
 
 const LOAD_NOTIFICATIONS_INTERVAL = 10000
 
-const store = useStore()
+const authStore = useAuthStore()
 const router = useRouter()
 
 const allNotifications = ref<INotification[]>([])
@@ -73,7 +73,7 @@ const unreadNotifications = computed(() => {
 const notifications = computed(() => {
 	return allNotifications.value ? allNotifications.value.filter(n => n.name !== '') : []
 })
-const userInfo = computed(() => store.state.auth.info)
+const userInfo = computed(() => authStore.info)
 
 let interval: number
 
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index e675ee07..f833b8b8 100644
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@@ -139,7 +139,6 @@ export default {name: 'userTeamShare'}
 <script setup lang="ts">
 import {ref, reactive, computed, shallowReactive, type Ref} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import UserNamespaceService from '@/services/userNamespace'
@@ -171,6 +170,7 @@ import {RIGHTS} from '@/constants/rights'
 import Multiselect from '@/components/input/multiselect.vue'
 import Nothing from '@/components/misc/nothing.vue'
 import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 
 const props = defineProps({
 	type: {
@@ -208,8 +208,8 @@ const sharables = ref([])
 const showDeleteModal = ref(false)
 
 
-const store = useStore()
-const userInfo = computed(() => store.state.auth.info)
+const authStore = useAuthStore()
+const userInfo = computed(() => authStore.info)
 
 function createShareTypeNameComputed(count: number) {
 	return computed(() => {
@@ -365,7 +365,7 @@ async function toggleType(sharable) {
 
 const found = ref([])
 
-const currentUserId = computed(() => store.state.auth.info.id)
+const currentUserId = computed(() => authStore.info.id)
 async function find(query: string) {
 	if (query === '') {
 		found.value = []
diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index 2aa3cfaf..d6873a16 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -48,6 +48,7 @@ import {tryOnMounted, debouncedWatch, useWindowSize, type MaybeRef} from '@vueus
 
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
+import {useAuthStore} from '@/stores/auth'
 
 function cleanupTitle(title: string) {
 	return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
@@ -135,6 +136,7 @@ const newTaskInput = useAutoHeightTextarea(newTaskTitle)
 
 const {t} = useI18n({useScope: 'global'})
 const store = useStore()
+const authStore = useAuthStore()
 
 const errorMessage = ref('')
 
@@ -168,7 +170,7 @@ async function addTask() {
 
 		const task = await store.dispatch('tasks/createNewTask', {
 			title,
-			listId: store.state.auth.settings.defaultListId,
+			listId: authStore.settings.defaultListId,
 			position: props.defaultPosition,
 		})
 		emit('taskAdded', task)
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index 3b0ebf85..f573bb6b 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -153,7 +153,6 @@
 
 <script setup lang="ts">
 import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
@@ -168,6 +167,7 @@ import {uploadFile} from '@/helpers/attachments'
 import {success} from '@/message'
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
 
 const props = defineProps({
 	taskId: {
@@ -180,8 +180,8 @@ const props = defineProps({
 })
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
 const configStore = useConfigStore()
+const authStore = useAuthStore()
 
 const comments = ref<ITaskComment[]>([])
 
@@ -196,8 +196,8 @@ const newComment = reactive(new TaskCommentModel())
 const saved = ref<ITask['id'] | null>(null)
 const saving = ref<ITask['id'] | null>(null)
 
-const userAvatar = computed(() => store.state.auth.info.getAvatarUrl(48))
-const currentUserId = computed(() => store.state.auth.info.id)
+const userAvatar = computed(() => authStore.info.getAvatarUrl(48))
+const currentUserId = computed(() => authStore.info.id)
 const enabled = computed(() => configStore.taskCommentsEnabled)
 const actions = computed(() => {
 	if (!props.canWrite) {
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index 4cd2b10a..0759a203 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@@ -39,12 +39,12 @@
 
 <script setup lang="ts">
 import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, type PropType} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 import flatPickr from 'vue-flatpickr-component'
 
 import TaskService from '@/services/task'
 import type {ITask} from '@/modelTypes/ITask'
+import {useAuthStore} from '@/stores/auth'
 
 const props = defineProps({
 	modelValue: {
@@ -55,7 +55,7 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const authStore = useAuthStore()
 
 const taskService = shallowReactive(new TaskService())
 const task = ref<ITask>()
@@ -103,7 +103,7 @@ const flatPickerConfig = computed(() => ({
 	time_24hr: true,
 	inline: true,
 	locale: {
-		firstDayOfWeek: store.state.auth.settings.weekStart,
+		firstDayOfWeek: authStore.settings.weekStart,
 	},
 }))
 
@@ -124,8 +124,10 @@ async function updateDueDate() {
 	}
 
 	// FIXME: direct prop manipulation
-	task.value.dueDate = new Date(dueDate.value)
-	const newTask = await taskService.update(task.value)
+	const newTask = await taskService.update({
+		...task.value,
+		dueDate: new Date(dueDate.value),
+	})
 	lastValue.value = newTask.dueDate
 	task.value = newTask
 	emit('update:modelValue', newTask)
diff --git a/src/router/index.ts b/src/router/index.ts
index 2d150edf..014c32c0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import type { RouteLocation } from 'vue-router'
 import {saveLastVisited} from '@/helpers/saveLastVisited'
-import {store} from '@/store'
 
 import {saveListView, getListView} from '@/helpers/saveListView'
 import {parseDateOrString} from '@/helpers/time/parseDateOrString'
@@ -9,6 +8,7 @@ import {getNextWeekDate} from '@/helpers/time/getNextWeekDate'
 import {setTitle} from '@/helpers/setTitle'
 
 import {useListStore} from '@/stores/lists'
+import {useAuthStore} from '@/stores/auth'
 
 import HomeComponent from '../views/Home.vue'
 import NotFoundComponent from '../views/404.vue'
@@ -464,10 +464,8 @@ const router = createRouter({
 })
 
 export function getAuthForRoute(route: RouteLocation) {
-	const authUser = store.getters['auth/authUser']
-	const authLinkShare = store.getters['auth/authLinkShare']
-
-	if (authUser || authLinkShare) {
+	const authStore = useAuthStore()
+	if (authStore.authUser || authStore.authLinkShare) {
 		return
 	}
 
diff --git a/src/store/index.ts b/src/store/index.ts
index f0ecd0a4..6c530b53 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -13,7 +13,6 @@ import {
 	MENU_ACTIVE,
 	QUICK_ACTIONS_ACTIVE,
 } from './mutation-types'
-import auth from './modules/auth'
 import kanban from './modules/kanban'
 import tasks from './modules/tasks'
 
@@ -23,6 +22,7 @@ import ListService from '../services/list'
 import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 
 import type { RootStoreState, StoreState } from './types'
+import {useAuthStore} from '@/stores/auth'
 
 export const key: InjectionKey<Store<StoreState>> = Symbol()
 
@@ -34,7 +34,6 @@ export function useStore () {
 export const store = createStore<RootStoreState>({
 	strict: import.meta.env.DEV,
 	modules: {
-		auth,
 		kanban,
 		tasks,
 	},
@@ -131,9 +130,10 @@ export const store = createStore<RootStoreState>({
 
 			commit(CURRENT_LIST, list)
 		},
-		async loadApp({dispatch}) {
+		async loadApp() {
 			await checkAndSetApiUrl(window.API_URL)
-			await dispatch('auth/checkAuth')
+			const authStore = useAuthStore()
+			await authStore.checkAuth()
 		},
 	},
 })
diff --git a/src/store/types.ts b/src/store/types.ts
index c6daaf82..8216082f 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -45,6 +45,7 @@ export interface AuthState {
 	avatarUrl: string,
 	lastUserInfoRefresh: Date | null,
 	settings: IUserSettings,
+	isLoading: boolean,
 }
 
 export interface ConfigState {
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index e299e7c1..5d528d39 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -1,16 +1,15 @@
-import type { Module } from 'vuex'
+import {defineStore, acceptHMRUpdate} from 'pinia'
 
 import {HTTPFactory, AuthenticatedHTTPFactory} from '@/http-common'
 import {i18n, getCurrentLanguage, saveLanguage} from '@/i18n'
 import {objectToSnakeCase} from '@/helpers/case'
-import {LOADING} from '../mutation-types'
 import UserModel from '@/models/user'
 import UserSettingsService from '@/services/userSettings'
 import {getToken, refreshToken, removeToken, saveToken} from '@/helpers/auth'
-import {setLoading} from '@/store/helper'
+import {setLoadingPinia} from '@/store/helper'
 import {success} from '@/message'
 import {redirectToProvider} from '@/helpers/redirectToProvider'
-import type { RootStoreState, AuthState, Info} from '@/store/types'
+import type {AuthState, Info} from '@/store/types'
 import {AUTH_TYPES} from '@/store/types'
 import type { IUserSettings } from '@/modelTypes/IUserSettings'
 import router from '@/router'
@@ -23,9 +22,8 @@ function defaultSettings(settings: Partial<IUserSettings>) {
 	return settings
 }
 
-const authStore : Module<AuthState, RootStoreState> =  {
-	namespaced: true,
-	state: () => ({
+export const useAuthStore = defineStore('auth', {
+	state: () : AuthState => ({
 		authenticated: false,
 		isLinkShareAuth: false,
 		info: null,
@@ -33,6 +31,7 @@ const authStore : Module<AuthState, RootStoreState> =  {
 		avatarUrl: '',
 		lastUserInfoRefresh: null,
 		settings: {}, // should be IUserSettings
+		isLoading: false,
 	}),
 	getters: {
 		authUser(state) {
@@ -48,47 +47,50 @@ const authStore : Module<AuthState, RootStoreState> =  {
 			)
 		},
 	},
-	mutations: {
-		info(state, info: Info) {
-			state.info = info
+	actions: {
+		setIsLoading(isLoading: boolean) {
+			this.isLoading = isLoading 
+		},
+
+		setInfo(info: Info) {
+			this.info = info
 			if (info !== null) {
-				state.avatarUrl = info.getAvatarUrl()
+				this.avatarUrl = info.getAvatarUrl()
 
 				if (info.settings) {
-					state.settings = defaultSettings(info.settings)
+					this.settings = defaultSettings(info.settings)
 				}
 
-				state.isLinkShareAuth = info.id < 0
+				this.isLinkShareAuth = info.id < 0
 			}
 		},
-		setUserSettings(state, settings: IUserSettings) {
-			state.settings = defaultSettings(settings)
-			const info = state.info !== null ? state.info : {} as Info
+		setUserSettings(settings: IUserSettings) {
+			this.settings = defaultSettings(settings)
+			const info = this.info !== null ? this.info : {} as Info
 			info.name = settings.name
-			state.info = info
+			this.info = info
 		},
-		authenticated(state, authenticated: boolean) {
-			state.authenticated = authenticated
+		setAuthenticated(authenticated: boolean) {
+			this.authenticated = authenticated
 		},
-		isLinkShareAuth(state, isLinkShareAuth: boolean) {
-			state.isLinkShareAuth = isLinkShareAuth
+		setIsLinkShareAuth(isLinkShareAuth: boolean) {
+			this.isLinkShareAuth = isLinkShareAuth
 		},
-		needsTotpPasscode(state, needsTotpPasscode: boolean) {
-			state.needsTotpPasscode = needsTotpPasscode
+		setNeedsTotpPasscode(needsTotpPasscode: boolean) {
+			this.needsTotpPasscode = needsTotpPasscode
 		},
-		reloadAvatar(state) {
-			if (!state.info) return
-			state.avatarUrl = `${state.info.getAvatarUrl()}&=${+new Date()}`
+		reloadAvatar() {
+			if (!this.info) return
+			this.avatarUrl = `${this.info.getAvatarUrl()}&=${+new Date()}`
 		},
-		lastUserRefresh(state) {
-			state.lastUserInfoRefresh = new Date()
+		updateLastUserRefresh() {
+			this.lastUserInfoRefresh = new Date()
 		},
-	},
-	actions: {
+
 		// Logs a user in with a set of credentials.
-		async login(ctx, credentials) {
+		async login(credentials) {
 			const HTTP = HTTPFactory()
-			ctx.commit(LOADING, true, {root: true})
+			this.setIsLoading(true)
 
 			// Delete an eventually preexisting old token
 			removeToken()
@@ -99,30 +101,30 @@ const authStore : Module<AuthState, RootStoreState> =  {
 				saveToken(response.data.token, true)
 
 				// Tell others the user is autheticated
-				ctx.dispatch('checkAuth')
+				this.checkAuth()
 			} catch (e) {
 				if (
 					e.response &&
 					e.response.data.code === 1017 &&
 					!credentials.totpPasscode
 				) {
-					ctx.commit('needsTotpPasscode', true)
+					this.setNeedsTotpPasscode(true)
 				}
 
 				throw e
 			} finally {
-				ctx.commit(LOADING, false, {root: true})
+				this.setIsLoading(false)
 			}
 		},
 
 		// Registers a new user and logs them in.
 		// Not sure if this is the right place to put the logic in, maybe a seperate js component would be better suited.
-		async register(ctx, credentials) {
+		async register(credentials) {
 			const HTTP = HTTPFactory()
-			ctx.commit(LOADING, true, {root: true})
+			this.setIsLoading(true)
 			try {
 				await HTTP.post('register', credentials)
-				return ctx.dispatch('login', credentials)
+				return this.login(credentials)
 			} catch (e) {
 				if (e.response?.data?.message) {
 					throw e.response.data
@@ -130,13 +132,13 @@ const authStore : Module<AuthState, RootStoreState> =  {
 
 				throw e
 			} finally {
-				ctx.commit(LOADING, false, {root: true})
+				this.setIsLoading(false)
 			}
 		},
 
-		async openIdAuth(ctx, {provider, code}) {
+		async openIdAuth({provider, code}) {
 			const HTTP = HTTPFactory()
-			ctx.commit(LOADING, true, {root: true})
+			this.setIsLoading(true)
 
 			const data = {
 				code: code,
@@ -150,28 +152,31 @@ const authStore : Module<AuthState, RootStoreState> =  {
 				saveToken(response.data.token, true)
 
 				// Tell others the user is autheticated
-				ctx.dispatch('checkAuth')
+				this.checkAuth()
 			} finally {
-				ctx.commit(LOADING, false, {root: true})
+				this.setIsLoading(false)
 			}
 		},
 
-		async linkShareAuth(ctx, {hash, password}) {
+		async linkShareAuth({hash, password}) {
 			const HTTP = HTTPFactory()
 			const response = await HTTP.post('/shares/' + hash + '/auth', {
 				password: password,
 			})
 			saveToken(response.data.token, false)
-			ctx.dispatch('checkAuth')
+			this.checkAuth()
 			return response.data
 		},
 
 		// Populates user information from jwt token saved in local storage in store
-		checkAuth(ctx) {
+		checkAuth() {
 
 			// This function can be called from multiple places at the same time and shortly after one another.
 			// To prevent hitting the api too frequently or race conditions, we check at most once per minute.
-			if (ctx.state.lastUserInfoRefresh !== null && ctx.state.lastUserInfoRefresh > (new Date()).setMinutes((new Date()).getMinutes() + 1)) {
+			if (
+				this.lastUserInfoRefresh !== null &&
+				this.lastUserInfoRefresh > (new Date()).setMinutes((new Date()).getMinutes() + 1)
+			) {
 				return
 			}
 
@@ -185,17 +190,17 @@ const authStore : Module<AuthState, RootStoreState> =  {
 				const info = new UserModel(JSON.parse(atob(base64)))
 				const ts = Math.round((new Date()).getTime() / 1000)
 				authenticated = info.exp >= ts
-				ctx.commit('info', info)
+				this.setInfo(info)
 
 				if (authenticated) {
-					ctx.dispatch('refreshUserInfo')
+					this.refreshUserInfo()
 				}
 			}
 
-			ctx.commit('authenticated', authenticated)
+			this.setAuthenticated(authenticated)
 			if (!authenticated) {
-				ctx.commit('info', null)
-				ctx.dispatch('redirectToProviderIfNothingElseIsEnabled')
+				this.setInfo(null)
+				this.redirectToProviderIfNothingElseIsEnabled()
 			}
 		},
 
@@ -211,7 +216,7 @@ const authStore : Module<AuthState, RootStoreState> =  {
 			}
 		},
 
-		async refreshUserInfo({state, commit, dispatch}) {
+		async refreshUserInfo() {
 			const jwt = getToken()
 			if (!jwt) {
 				return
@@ -220,19 +225,27 @@ const authStore : Module<AuthState, RootStoreState> =  {
 			const HTTP = AuthenticatedHTTPFactory()
 			try {
 				const response = await HTTP.get('user')
-				const info = new UserModel(response.data)
-				info.type = state.info.type
-				info.email = state.info.email
-				info.exp = state.info.exp
+				const info = new UserModel({
+					...response.data,
+					type: this.info.type,
+					email: this.info.email,
+					exp: this.info.exp,
+				})
 
-				commit('info', info)
-				commit('lastUserRefresh')
+				this.setInfo(info)
+				this.updateLastUserRefresh()
 
-				if (info.type === AUTH_TYPES.USER && (typeof info.settings.language === 'undefined' || info.settings.language === '')) {
+				if (
+						info.type === AUTH_TYPES.USER &&
+						(
+							typeof info.settings.language === 'undefined' ||
+							info.settings.language === ''
+						)
+				) {
 					// save current language
-					await dispatch('saveUserSettings', {
+					await this.saveUserSettings({
 						settings: {
-							...state.settings,
+							...this.settings,
 							language: getCurrentLanguage(),
 						},
 						showMessage: false,
@@ -242,23 +255,24 @@ const authStore : Module<AuthState, RootStoreState> =  {
 				return info
 			} catch (e) {
 				if(e?.response?.data?.message === 'invalid or expired jwt') {
-					dispatch('logout')
+					this.logout()
 					return
 				}
 				throw new Error('Error while refreshing user info:', {cause: e})
 			}
 		},
 
-		async saveUserSettings(ctx, payload) {
+		async saveUserSettings(payload) {
 			const {settings} = payload
 			const showMessage = payload.showMessage ?? true
 			const userSettingsService = new UserSettingsService()
 
-			const cancel = setLoading(ctx, 'general-settings')
+			// FIXME
+			const cancel = setLoadingPinia(useAuthStore, 'general-settings')
 			try {
 				saveLanguage(settings.language)
 				await userSettingsService.update(settings)
-				ctx.commit('setUserSettings', {...settings})
+				this.setUserSettings({...settings})
 				if (showMessage) {
 					success({message: i18n.global.t('user.settings.general.savedSuccess')})
 				}
@@ -270,34 +284,38 @@ const authStore : Module<AuthState, RootStoreState> =  {
 		},
 
 		// Renews the api token and saves it to local storage
-		renewToken(ctx) {
+		renewToken() {
 			// FIXME: Timeout to avoid race conditions when authenticated as a user (=auth token in localStorage) and as a
 			// link share in another tab. Without the timeout both the token renew and link share auth are executed at
 			// the same time and one might win over the other.
 			setTimeout(async () => {
-				if (!ctx.state.authenticated) {
+				if (!this.authenticated) {
 					return
 				}
 
 				try {
-					await refreshToken(!ctx.state.isLinkShareAuth)
-					ctx.dispatch('checkAuth')
+					await refreshToken(!this.isLinkShareAuth)
+					this.checkAuth()
 				} catch (e) {
 					// Don't logout on network errors as the user would then get logged out if they don't have
 					// internet for a short period of time - such as when the laptop is still reconnecting
 					if (e?.request?.status) {
-						ctx.dispatch('logout')
+						this.logout()
 					}
 				}
 			}, 5000)
 		},
-		logout(ctx) {
+
+		logout() {
 			removeToken()
 			window.localStorage.clear() // Clear all settings and history we might have saved in local storage.
 			router.push({name: 'user.login'})
-			ctx.dispatch('checkAuth')
+			this.checkAuth()
 		},
 	},
-}
+})
 
-export default authStore
\ No newline at end of file
+// support hot reloading
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useAuthStore, import.meta.hot))
+}
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5e8edb8a..79d13837 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -74,16 +74,18 @@ import {useDateTimeSalutation} from '@/composables/useDateTimeSalutation'
 import {useListStore} from '@/stores/lists'
 import {useConfigStore} from '@/stores/config'
 import {useNamespaceStore} from '@/stores/namespaces'
+import {useAuthStore} from '@/stores/auth'
 
 const welcome = useDateTimeSalutation()
 
 const store = useStore()
+const authStore = useAuthStore()
 const configStore = useConfigStore()
 const namespaceStore = useNamespaceStore()
 const listStore = useListStore()
 const listHistory = computed(() => {
 	// If we don't check this, it tries to load the list background right after logging out	
-	if(!store.state.auth.authenticated) {
+	if(!authStore.authenticated) {
 		return []
 	}
 	
@@ -93,13 +95,13 @@ const listHistory = computed(() => {
 })
 
 const migratorsEnabled = computed(() => configStore.availableMigrators?.length > 0)
-const userInfo = computed(() => store.state.auth.info)
+const userInfo = computed(() => authStore.info)
 const hasTasks = computed(() => store.state.hasTasks)
-const defaultListId = computed(() => store.state.auth.settings.defaultListId)
+const defaultListId = computed(() => authStore.settings.defaultListId)
 const defaultNamespaceId = computed(() => namespaceStore.namespaces?.[0]?.id || 0)
 const hasLists = computed(() => namespaceStore.namespaces?.[0]?.lists.length > 0)
 const loading = computed(() => store.state.loading && store.state.loadingModule === 'tasks')
-const deletionScheduledAt = computed(() => parseDateOrNull(store.state.auth.info?.deletionScheduledAt))
+const deletionScheduledAt = computed(() => parseDateOrNull(authStore.info?.deletionScheduledAt))
 
 // This is to reload the tasks list after adding a new task through the global task add.
 // FIXME: Should use vuex (somehow?)
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index a588edae..7a895762 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -119,10 +119,10 @@ import ColorPicker from '@/components/input/colorPicker.vue'
 
 import LabelModel from '@/models/label'
 import type {ILabel} from '@/modelTypes/ILabel'
+import {useAuthStore} from '@/stores/auth'
 import {useLabelStore} from '@/stores/labels'
 
 import { useTitle } from '@/composables/useTitle'
-import { useStore } from '@/store'
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -134,25 +134,23 @@ const labelToDelete = ref<ILabel>(null)
 
 useTitle(() => t('label.title'))
 
-const store = useStore()
-const userInfo = computed(() => store.state.auth.info)
+const authStore = useAuthStore()
+const userInfo = computed(() => authStore.info)
 
 const labelStore = useLabelStore()
 labelStore.loadAllLabels()
 
 // Alphabetically sort the labels
 const labels = computed(() => Object.values(labelStore.labels).sort((f, s) => f.title > s.title ? 1 : -1))
-const loading = computed(() =>labelStore.isLoading)
+const loading = computed(() => labelStore.isLoading)
 
 function deleteLabel(label: ILabel) {
 	showDeleteModal.value = false
 	isLabelEdit.value = false
-	const labelStore = useLabelStore()
 	return labelStore.deleteLabel(label)
 }
 
 function editLabelSubmit() {
-		const labelStore = useLabelStore()
 		return labelStore.updateLabel(labelEditLabel.value)
 	}
 
diff --git a/src/views/list/ListGantt.vue b/src/views/list/ListGantt.vue
index f4dc8882..12ab6e95 100644
--- a/src/views/list/ListGantt.vue
+++ b/src/views/list/ListGantt.vue
@@ -67,9 +67,9 @@
 <script setup lang="ts">
 import {ref, computed} from 'vue'
 import flatPickr from 'vue-flatpickr-component'
-
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
+
+import {useAuthStore} from '@/stores/auth'
 
 import ListWrapper from './ListWrapper.vue'
 import GanttChart from '@/components/tasks/gantt-component.vue'
@@ -92,14 +92,14 @@ const dateFrom = ref(new Date((new Date()).setDate(now.value.getDate() - 15)))
 const dateTo = ref(new Date((new Date()).setDate(now.value.getDate() + 30)))
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const authStore = useAuthStore()
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatShort'),
 	altInput: true,
 	dateFormat: 'Y-m-d',
 	enableTime: false,
 	locale: {
-		firstDayOfWeek: store.state.auth.settings.weekStart,
+		firstDayOfWeek: authStore.settings.weekStart,
 	},
 }))
 </script>
diff --git a/src/views/list/settings/share.vue b/src/views/list/settings/share.vue
index 856155e6..c86536c9 100644
--- a/src/views/list/settings/share.vue
+++ b/src/views/list/settings/share.vue
@@ -41,6 +41,7 @@ import CreateEdit from '@/components/misc/create-edit.vue'
 import LinkSharing from '@/components/sharing/linkSharing.vue'
 import userTeam from '@/components/sharing/userTeam.vue'
 import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -52,10 +53,11 @@ const title = computed(() => list.value?.title
 useTitle(title)
 
 const store = useStore()
+const authStore = useAuthStore()
 const configStore = useConfigStore()
 
 const linkSharingEnabled = computed(() => configStore.linkSharingEnabled)
-const userIsAdmin = computed(() => 'owner' in list.value && list.value.owner.id === store.state.auth.info.id)
+const userIsAdmin = computed(() => 'owner' in list.value && list.value.owner.id === authStore.info.id)
 
 async function loadList(listId: number) {
 	const listService = new ListService()
diff --git a/src/views/namespaces/settings/share.vue b/src/views/namespaces/settings/share.vue
index 25f212db..5bcc9e06 100644
--- a/src/views/namespaces/settings/share.vue
+++ b/src/views/namespaces/settings/share.vue
@@ -26,20 +26,21 @@ export default { name: 'namespace-setting-share' }
 
 <script lang="ts" setup>
 import {ref, computed, watchEffect} from 'vue'
-import {useStore} from '@/store'
 import {useRoute} from 'vue-router'
 import {useI18n} from 'vue-i18n'
-import {useTitle} from '@vueuse/core'
 
 import NamespaceService from '@/services/namespace'
 import NamespaceModel from '@/models/namespace'
 
 import CreateEdit from '@/components/misc/create-edit.vue'
 import manageSharing from '@/components/sharing/userTeam.vue'
+import {useTitle} from '@/composables/useTitle'
+import {useAuthStore} from '@/stores/auth'
+import type { INamespace } from '@/modelTypes/INamespace'
 
 const {t} = useI18n({useScope: 'global'})
 
-const namespace = ref()
+const namespace = ref<INamespace>()
 
 const title = computed(() => namespace.value?.title
 	? t('namespace.share.title', { namespace: namespace.value.title })
@@ -47,8 +48,8 @@ const title = computed(() => namespace.value?.title
 )
 useTitle(title)
 
-const store = useStore()
-const userIsAdmin = computed(() => 'owner' in namespace.value && namespace.value.owner.id === store.state.auth.info.id)
+const authStore = useAuthStore()
+const userIsAdmin = computed(() => 'owner' in namespace.value && namespace.value.owner.id === authStore.info.id)
 
 async function loadNamespace(namespaceId: number) {
 	if (!namespaceId) return
diff --git a/src/views/sharing/LinkSharingAuth.vue b/src/views/sharing/LinkSharingAuth.vue
index 0962e8b9..4dc9de6e 100644
--- a/src/views/sharing/LinkSharingAuth.vue
+++ b/src/views/sharing/LinkSharingAuth.vue
@@ -42,12 +42,14 @@ import {useTitle} from '@vueuse/core'
 import Message from '@/components/misc/message.vue'
 import {LOGO_VISIBLE} from '@/store/mutation-types'
 import {LIST_VIEWS, type ListView} from '@/types/ListView'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
 useTitle(t('sharing.authenticating'))
 
 function useAuth() {
 	const store = useStore()
+	const authStore = useAuthStore()
 	const route = useRoute()
 	const router = useRouter()
 
@@ -56,7 +58,7 @@ function useAuth() {
 	const errorMessage = ref('')
 	const password = ref('')
 
-	const authLinkShare = computed(() => store.getters['auth/authLinkShare'])
+	const authLinkShare = computed(() => authStore.authLinkShare)
 
 	async function authenticate() {
 		authenticateWithPassword.value = false
@@ -72,7 +74,7 @@ function useAuth() {
 		loading.value = true
 
 		try {
-			const {list_id: listId} = await store.dispatch('auth/linkShareAuth', {
+			const {list_id: listId} = await authStore.linkShareAuth({
 				hash: route.params.share,
 				password: password.value,
 			})
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index a90b69a5..ab80110c 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -59,8 +59,10 @@ import {DATE_RANGES} from '@/components/date/dateRanges'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import LlamaCool from '@/assets/llama-cool.svg?component'
 import type {ITask} from '@/modelTypes/ITask'
+import {useAuthStore} from '@/stores/auth'
 
 const store = useStore()
+const authStore = useAuthStore()
 const route = useRoute()
 const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
@@ -104,7 +106,7 @@ const pageTitle = computed(() => {
 		})
 })
 const hasTasks = computed(() => tasks.value && tasks.value.length > 0)
-const userAuthenticated = computed(() => store.state.auth.authenticated)
+const userAuthenticated = computed(() => authStore.authenticated)
 const loading = computed(() => store.state[LOADING] && store.state[LOADING_MODULE] === 'tasks')
 
 interface dateStrings {
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index 1d951e8e..4c8be9a5 100644
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@@ -163,9 +163,10 @@
 <script lang="ts" setup>
 import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
+import {useRoute, useRouter} from 'vue-router'
 
 import Editor from '@/components/input/AsyncEditor'
-import {useStore} from '@/store'
+import Multiselect from '@/components/input/multiselect.vue'
 
 import TeamService from '@/services/team'
 import TeamMemberService from '@/services/teamMember'
@@ -173,15 +174,15 @@ import UserService from '@/services/user'
 
 import {RIGHTS as Rights} from '@/constants/rights'
 
-import Multiselect from '@/components/input/multiselect.vue'
-import {useRoute, useRouter} from 'vue-router'
 import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
+
 import type {ITeam} from '@/modelTypes/ITeam'
 import type {IUser} from '@/modelTypes/IUser'
 import type {ITeamMember} from '@/modelTypes/ITeamMember'
 
-const store = useStore()
+const authStore = useAuthStore()
 const route = useRoute()
 const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
@@ -193,7 +194,7 @@ const userIsAdmin = computed(() => {
 		team.value.maxRight > Rights.READ
 	)
 })
-const userInfo = computed(() => store.state.auth.info)
+const userInfo = computed(() => authStore.info)
 
 const teamService = ref<TeamService>(new TeamService())
 const teamMemberService = ref<TeamMemberService>(new TeamMemberService())
diff --git a/src/views/user/DataExportDownload.vue b/src/views/user/DataExportDownload.vue
index d0ef27f2..353da48b 100644
--- a/src/views/user/DataExportDownload.vue
+++ b/src/views/user/DataExportDownload.vue
@@ -38,14 +38,15 @@
 <script setup lang="ts">
 import {ref, computed, reactive} from 'vue'
 import DataExportService from '@/services/dataExport'
-import {store} from '@/store'
+import {useAuthStore} from '@/stores/auth'
 
 const dataExportService = reactive(new DataExportService())
 const password = ref('')
 const errPasswordRequired = ref(false)
 const passwordInput = ref(null)
 
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const authStore = useAuthStore()
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 
 function download() {
 	if (password.value === '' && isLocalUser.value) {
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 53e87e58..aa9947d7 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -116,6 +116,7 @@ import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
 import Password from '@/components/input/password.vue'
 import { setTitle } from '@/helpers/setTitle'
 import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
 
 export default defineComponent({
 	components: {
@@ -173,8 +174,11 @@ export default defineComponent({
 		},
 		...mapStateVuex({
 			loading: LOADING,
-			needsTotpPasscode: state => state.auth.needsTotpPasscode,
-			authenticated: state => state.auth.authenticated,
+		}),
+
+		...mapState(useAuthStore, {
+			needsTotpPasscode: state => state.needsTotpPasscode,
+			authenticated: state => state.authenticated,
 		}),
 
 		...mapState(useConfigStore, {
@@ -224,8 +228,9 @@ export default defineComponent({
 			}
 
 			try {
-				await this.$store.dispatch('auth/login', credentials)
-				this.$store.commit('auth/needsTotpPasscode', false)
+				const authStore = useAuthStore()
+				await authStore.login(credentials)
+				authStore.setNeedsTotpPasscode(false)
 			} catch (e) {
 				if (e.response?.data.code === 1017 && !this.credentials.totpPasscode) {
 					return
diff --git a/src/views/user/OpenIdAuth.vue b/src/views/user/OpenIdAuth.vue
index a2d012a3..378a8278 100644
--- a/src/views/user/OpenIdAuth.vue
+++ b/src/views/user/OpenIdAuth.vue
@@ -22,6 +22,7 @@ import {useI18n} from 'vue-i18n'
 import {getErrorText} from '@/message'
 import Message from '@/components/misc/message.vue'
 import {clearLastVisited, getLastVisited} from '@/helpers/saveLastVisited'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -29,6 +30,7 @@ const router = useRouter()
 const route = useRoute()
 
 const store = useStore()
+const authStore = useAuthStore()
 
 const loading = computed(() => store.state.loading)
 const errorMessage = ref('')
@@ -65,7 +67,7 @@ async function authenticateWithCode() {
 	}
 
 	try {
-		await store.dispatch('auth/openIdAuth', {
+		await authStore.openIdAuth({
 			provider: route.params.provider,
 			code: route.query.code,
 		})
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index 7e630e90..ce750859 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -77,11 +77,14 @@ import {store} from '@/store'
 import Message from '@/components/misc/message.vue'
 import {isEmail} from '@/helpers/isEmail'
 import Password from '@/components/input/password.vue'
+import {useAuthStore} from '@/stores/auth'
+
+const authStore = useAuthStore()
 
 // FIXME: use the `beforeEnter` hook of vue-router
 // Check if the user is already logged in, if so, redirect them to the homepage
 onBeforeMount(() => {
-	if (store.state.auth.authenticated) {
+	if (authStore.authenticated) {
 		router.push({name: 'home'})
 	}
 })
@@ -126,7 +129,7 @@ async function submit() {
 	}
 
 	try {
-		await store.dispatch('auth/register', toRaw(credentials))
+		await authStore.register(toRaw(credentials))
 	} catch (e) {
 		errorMessage.value = e.message
 	}
diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index cbc429ff..579c85da 100644
--- a/src/views/user/Settings.vue
+++ b/src/views/user/Settings.vue
@@ -19,19 +19,21 @@
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import { store } from '@/store'
 import { useI18n } from 'vue-i18n'
 import { useTitle } from '@/composables/useTitle'
 import { useConfigStore } from '@/stores/config'
+import { useAuthStore } from '@/stores/auth'
 
 const { t } = useI18n({useScope: 'global'})
 useTitle(() => t('user.settings.title'))
 
 const configStore = useConfigStore()
+const authStore = useAuthStore()
+
 const totpEnabled = computed(() => configStore.totpEnabled)
 const caldavEnabled = computed(() => configStore.caldavEnabled)
 const migratorsEnabled = computed(() => configStore.migratorsEnabled)
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 
 const navigationItems = computed(() => {
 	const items = [
diff --git a/src/views/user/settings/Avatar.vue b/src/views/user/settings/Avatar.vue
index 4993f9e2..e71a66bf 100644
--- a/src/views/user/settings/Avatar.vue
+++ b/src/views/user/settings/Avatar.vue
@@ -64,17 +64,17 @@ export default { name: 'user-settings-avatar' }
 <script setup lang="ts">
 import {computed, ref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 import {Cropper} from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
 
 import AvatarService from '@/services/avatar'
 import AvatarModel from '@/models/avatar'
-import { useTitle } from '@/composables/useTitle'
-import { success } from '@/message'
+import {useTitle} from '@/composables/useTitle'
+import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const authStore = useAuthStore()
 
 const AVATAR_PROVIDERS = computed(() => ({
 	default: t('misc.default'),
@@ -102,7 +102,7 @@ avatarStatus()
 async function updateAvatarStatus() {
 	await avatarService.update(new AvatarModel({avatarProvider: avatarProvider.value}))
 	success({message: t('user.settings.avatar.statusUpdateSuccess')})
-	store.commit('auth/reloadAvatar')
+	authStore.reloadAvatar()
 }
 
 const cropper = ref()
@@ -121,7 +121,7 @@ async function uploadAvatar() {
 		const blob = await new Promise(resolve => canvas.toBlob(blob => resolve(blob)))
 		await avatarService.create(blob)
 		success({message: t('user.settings.avatar.setSuccess')})
-		store.commit('auth/reloadAvatar')
+		authStore.reloadAvatar()
 	} finally {
 		loading.value = false
 		isCropAvatar.value = false
diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index a0fcbebb..190618bb 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -68,7 +68,6 @@
 <script lang="ts" setup>
 import {computed, ref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 
 import {CALDAV_DOCS} from '@/urls'
 import {useTitle} from '@/composables/useTitle'
@@ -80,6 +79,7 @@ import CaldavTokenService from '@/services/caldavToken'
 import { formatDateShort } from '@/helpers/time/formatDate'
 import type {ICaldavToken} from '@/modelTypes/ICaldavToken'
 import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
 
 const copy = useCopyToClipboard()
 
@@ -105,10 +105,10 @@ async function deleteToken(token: ICaldavToken) {
 	success(r)
 }
 
-const store = useStore()
+const authStore = useAuthStore()
 const configStore = useConfigStore()
-const username = computed(() => store.state.auth.info?.username)
+const username = computed(() => authStore.info?.username)
 const caldavUrl = computed(() => `${configStore.apiBase}/dav/principals/${username.value}/`)
 const caldavEnabled = computed(() => configStore.caldavEnabled)
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 </script>
diff --git a/src/views/user/settings/DataExport.vue b/src/views/user/settings/DataExport.vue
index 29aeb852..7e0005d2 100644
--- a/src/views/user/settings/DataExport.vue
+++ b/src/views/user/settings/DataExport.vue
@@ -44,22 +44,22 @@ export default {name: 'user-settings-data-export'}
 
 <script setup lang="ts">
 import {ref, computed, shallowReactive} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import DataExportService from '@/services/dataExport'
-import { useTitle } from '@/composables/useTitle'
+import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const authStore = useAuthStore()
 
 useTitle(() => `${t('user.export.title')} - ${t('user.settings.title')}`)
 
 const dataExportService = shallowReactive(new DataExportService())
 const password = ref('')
 const errPasswordRequired = ref(false)
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 const passwordInput = ref()
 
 async function requestDataExport() {
diff --git a/src/views/user/settings/Deletion.vue b/src/views/user/settings/Deletion.vue
index fc3961a5..5d855d1a 100644
--- a/src/views/user/settings/Deletion.vue
+++ b/src/views/user/settings/Deletion.vue
@@ -88,7 +88,6 @@ export default { name: 'user-settings-deletion' }
 
 <script setup lang="ts">
 import {ref, shallowReactive, computed} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import AccountDeleteService from '@/services/accountDelete'
@@ -96,6 +95,7 @@ import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 import {useConfigStore} from '@/stores/config'
 
 const {t} = useI18n({useScope: 'global'})
@@ -105,11 +105,11 @@ const accountDeleteService = shallowReactive(new AccountDeleteService())
 const password = ref('')
 const errPasswordRequired = ref(false)
 
-const store = useStore()
+const authStore = useAuthStore()
 const configStore = useConfigStore()
 
 const userDeletionEnabled = computed(() => configStore.userDeletionEnabled)
-const deletionScheduledAt = computed(() => parseDateOrNull(store.state.auth.info?.deletionScheduledAt))
+const deletionScheduledAt = computed(() => parseDateOrNull(authStore.info?.deletionScheduledAt))
 
 const passwordInput = ref()
 async function deleteAccount() {
@@ -133,7 +133,7 @@ async function cancelDeletion() {
 
 	await accountDeleteService.cancel(password.value)
 	success({message: t('user.deletion.scheduledCancelSuccess')})
-	store.dispatch('auth/refreshUserInfo')
+	authStore.refreshUserInfo()
 	password.value = ''
 }
 </script>
diff --git a/src/views/user/settings/EmailUpdate.vue b/src/views/user/settings/EmailUpdate.vue
index ef8a3e42..96e9e42d 100644
--- a/src/views/user/settings/EmailUpdate.vue
+++ b/src/views/user/settings/EmailUpdate.vue
@@ -43,18 +43,18 @@ export default { name: 'user-settings-update-email' }
 <script setup lang="ts">
 import {reactive, computed, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 
 import EmailUpdateService from '@/services/emailUpdate'
 import EmailUpdateModel from '@/models/emailUpdate'
 import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.settings.updateEmailTitle')} - ${t('user.settings.title')}`)
 
-const store = useStore()
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const authStore = useAuthStore()
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 
 const emailUpdate = reactive(new EmailUpdateModel())
 const emailUpdateService = shallowReactive(new EmailUpdateService())
diff --git a/src/views/user/settings/General.vue b/src/views/user/settings/General.vue
index cc435b21..2664fe01 100644
--- a/src/views/user/settings/General.vue
+++ b/src/views/user/settings/General.vue
@@ -149,6 +149,7 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 import { useListStore } from '@/stores/lists'
+import { useAuthStore } from '@/stores/auth'
 
 export default defineComponent({
 	name: 'user-settings-general',
@@ -227,7 +228,8 @@ const playSoundWhenDone = ref(getPlaySoundWhenDoneSetting())
 const quickAddMagicMode = ref(getQuickAddMagicMode())
 
 const store = useStore()
-const settings = ref({...store.state.auth.settings})
+const authStore = useAuthStore()
+const settings = ref({...authStore.settings})
 const id = ref(createRandomID())
 const availableLanguageOptions = ref(
 	Object.entries(availableLanguages)
@@ -236,13 +238,13 @@ const availableLanguageOptions = ref(
 )
 
 watch(
-	() => store.state.auth.settings,
+	() => authStore.settings,
 	() => {
 		// Only setting if we don't have values set yet to avoid overriding edited values
 		if (!objectIsEmpty(settings.value)) {
 			return
 		}
-		settings.value = {...store.state.auth.settings}
+		settings.value = {...authStore.settings}
 	},
 	{immediate: true},
 )
@@ -265,7 +267,7 @@ async function updateSettings() {
 	localStorage.setItem(playSoundWhenDoneKey, playSoundWhenDone.value ? 'true' : 'false')
 	setQuickAddMagicMode(quickAddMagicMode.value)
 
-	await store.dispatch('auth/saveUserSettings', {
+	await authStore.saveUserSettings({
 		settings: {...settings.value},
 	})
 }
diff --git a/src/views/user/settings/PasswordUpdate.vue b/src/views/user/settings/PasswordUpdate.vue
index 96b7c431..155385be 100644
--- a/src/views/user/settings/PasswordUpdate.vue
+++ b/src/views/user/settings/PasswordUpdate.vue
@@ -57,24 +57,24 @@ export default {name: 'user-settings-password-update'}
 
 <script setup lang="ts">
 import {ref, reactive, shallowReactive, computed} from 'vue'
-import { useI18n } from 'vue-i18n'
-import {useStore} from '@/store'
+import {useI18n} from 'vue-i18n'
 
 import PasswordUpdateService from '@/services/passwordUpdateService'
 import PasswordUpdateModel from '@/models/passwordUpdate'
 
 import {useTitle} from '@/composables/useTitle'
 import {success, error} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 
 const passwordUpdateService = shallowReactive(new PasswordUpdateService())
 const passwordUpdate = reactive(new PasswordUpdateModel())
 const passwordConfirm = ref('')
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
 useTitle(() => `${t('user.settings.newPasswordTitle')} - ${t('user.settings.title')}`)
 
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const authStore = useAuthStore()
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 
 async function updatePassword() {
 	if (passwordConfirm.value !== passwordUpdate.newPassword) {