Get auth state everywhere via Nuxt 3?

[VictorioBerra]

I put the following in utils/pocketbase.js

import PocketBase from 'pocketbase'
export default new PocketBase('http://127.0.0.1:8090');

In my app.vue I have the following:

<script setup lang="ts">
const links = []

if (pocketbase.authStore.isValid) {
  links .push({
    label: 'Logout',
    to: '/logout'
  });
}
</script>

<template>
    <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800"
      :ui="{ label: 'uppercase' }" />
    <NuxtPage />
</template>

Finally, in a login page pages/login.vue I simply do this:

<script setup lang="ts">
    // ...
    await pocketbase.collection("users").authWithPassword(event.data.username, event.data.password);
    await navigateTo('/gallery')
</script>

This does not add my logout button unless I F5 the whole page.

I assume that is because <script setup runs once...

Do I need to put pocketbase.authStore.isValid in state? If so, how does state know when isValid changes?

[VictorioBerra]

Digging in more, it seems like I need to use the custom auth store capability + Nuxt state somehow. Or onChange and have that trigger state changes.

[ganigeorgiev]

If you want to listen to pb.authStore changes you can register a listener using pb.authStore.onChange:

const removeListener = pb.authStore.onChange((token, model) => {
    console.log('store data:', token, model)
}, true); // the true flag fires the callback immediately after registration

... 

removeListener();

It is not clear in what context the above executes but note that it is safe to have a global SDK instance only on the client-side (eg. in the browser as SPA).

If the above executes in a long running node process, it will be vulnerable because requests from different users will modify the same pb.authStore state (see JS SSR).

[VictorioBerra]

@ganigeorgiev Is it safe to assume model will be null/undefined when pb.authStore.isValid == false?

[ganigeorgiev]

No. pb.authStore.isValid only loosely checks whether pb.authStore.token is set and has valid exp claim (the actual token validation happens when sending requests to the PocketBase server). pb.authStore.model is just a convenient helper to hold the returned successfull auth record response.

[VictorioBerra]

@ganigeorgiev this is what I have come up with.

<script setup lang="ts">
const pocketbaseAuthStore = useState('pocketbaseAuthStore')

await callOnce(() => {
  pocketbase.authStore.onChange((token, model) => {

    // Update global state on change
    pocketbaseAuthStore.value = model;

    if (model) {
      // User is logged in!
    } else {
      // User is not logged in!
    }
  }, true);
})
</script>

Since I only have model or no model to go off of, I cant really see if my tokens are valid or not.

Do I need to also somehow revoke model if isValid goes false?