Authentication

Authentication usage

Balance uses Laravel Sanctum and its advantages to leverage authentication in the application by also extending the User model to use its properties where it is needed, for more info check the official Sanctum documentation.

User model:

class User extends Authenticatable

Example of Laravel Sanctum's authenticated user's properties usage:

auth()->user()->id

If the user is not logged in, he will always be redirected to the login page and will not be able to see the entire application.

---

To access the properties of the logged user in Vue Balance uses a dedicated store: LoggedUserStore:

interface LoggedUserState {
    user: LoggedUser
    widgetData: AuthWidgetData
    loading: boolean
    errorRequest: { [key: string]: Array<string> }
}

export const useLoggedUserStore = defineStore('utility-loggedUser', {
    state: (): LoggedUserState => ({
        user: {
            id: 0,
            slug: '',
            name: '',
            surname: '',
            title: '',
            email: '',
            language: '',
            dark_mode: false,
            roles: [],
            user_image: [],
            confirm_new_password: '',
            new_password: '',
            current_password: '',
            created_at: '',
            updated_at: '',
            deleted_at: '',
        },
        widgetData: {
            count_orders: 0,
            count_tasks: 0,
            count_teams: 0,
        },
        loading: false,
        errorRequest: {},
    }),

    getters: {
        getUser: (state) => state.user,
        getLoading: (state) => state.loading,
    },

    actions: {
        async getLoggedUserInfo() {
            try {
                this.loading = true
                getLoggedUserInfoResponse.value = executeSWRV(`${route}/me`)
                if (!getLoggedUserInfoResponse.value.data) {
                    await getLoggedUserInfoResponse.value.mutate()
                }
            } finally {
                this.loading = false
            }
        },

        async fetchWidgetData() {
            try {
                this.loading = true
                fetchWidgetDataResponse.value = executeSWRV(
                    `${route}/getWidgetData`
                )
                if (!fetchWidgetDataResponse.value.data) {
                    await fetchWidgetDataResponse.value.mutate()
                }
            } finally {
                this.loading = false
            }
        },

        async updatePassword() {
            try {
                this.loading = true
                const params = objectToFormData(this.user, {
                    indices: true,
                    booleansAsIntegers: true,
                })
                await axios.post(`${route}/updatePassword`, params)
                this.notify({
                    title: this.t('global.profile_update_success'),
                    type: 'warn',
                })
                this.router.back()
            } catch (error: any) {
                this.errorRequest = error.response.data.errors
            } finally {
                this.loading = false
            }
        },

        async updateProfile() {
            try {
                this.loading = true
                const params = objectToFormData(this.user, {
                    indices: true,
                    booleansAsIntegers: true,
                })
                await axios.post(`${route}/updateProfile`, params)
                this.notify({
                    title: this.t('global.profile_update_success'),
                    type: 'warn',
                })
                this.router.back()
            } catch (error: any) {
                this.errorRequest = error.response.data.errors
            } finally {
                this.loading = false
            }
        },

        async toggleDarkMode() {
            try {
                this.loading = true
                const params = {
                    darkMode: this.user.dark_mode,
                }
                await axios.post(`${route}/toggleDarkMode`, params)
            } catch (error: any) {
                this.errorRequest = error.response.data.errors
            } finally {
                this.loading = false
            }
        },

        setLang(lang: string) {
            axios.post(`users/${this.user?.id}/setLang`, {
                lang: lang,
            })
        },

        resetState() {
            this.$reset()
        },
    },
})