Not reactive

[Pok09]

Thanks for this plugin

I noticed that the data is not reactive, you have to reload the page for the changed state
const {user, loggedIn} = useAuth()

Example if all the pages have the same header, after connection the connection button must disappear after changing state (loggedin), but nothing

you have to reload the page

[rambii]

As a workaround you could do a manual redirect in the callback function of the login. Like so:

await $sanctumAuth.login(
    {
        username: username.value,
        password: password.value,
    },
    // optional callback function
    (data) => {
        window.location.pathname = '/dashboard'
    }
)

[rambii]

@Pok09
I tried another way which might work for you.

<template>
        <div>
            Is user logged in?
            <span>{{ auth.loggedIn ? 'yes' : 'no' }}</span>
        </div>
        <div v-if="auth.loggedIn">
            What is users name?
            <span>{{ auth.user.name }}</span>
        </div>
</template>

<script setup>
const auth = useAuth() // return auth state

async function submit() {
    try {
        await $sanctumAuth.login({
            username: username.value,
            password: password.value,
        }, async (data) => {
            // manually call the getUser in the optional login callback - this will also disable the automatic redirect
            await $sanctumAuth.getUser() // fetch and set user data
        })
    } catch (e) {
        console.log(e)
    }
}
</script>

As described here
https://github.com/dystcz/nuxt-sanctum-auth#getting-user-info-in-pagescomponents-without-middleware

[kreejzak]

Hey there! Currently, I'm in the process of a big rewrite that will automatically update the authentication status after a user logs in or logs out. This means there will be some breaking changes, so I want to make sure I take my time to document everything properly.
Stay tuned