Changing Pinia state outside of component

[christine927t]

I'm trying to implement Pinia in a Nuxt 3/Vue 3 app. I'm using Sidebase for authentication. I have a file to handle the auth in server/api/auth/[...].js and this is where I need to update the Pinia state (after I get the auth token and user info from two api calls).

Based on my console.logs inside the Pinia store, the state IS changing, however, the changes are not reflected on the front end (browser or devtools). I'm not getting any error, I just don't see the state being updated anywhere other than the console.log statements in my terminal.
Any help or suggestions of what to try would be greatly appreciated! thank you

/server/api/auth/[...].js

import { NuxtAuthHandler } from '#auth'
import NextAuth from 'next-auth';
import CredentialsProvider from "next-auth/providers/credentials"
import { useTokenStore } from '~/stores/tokenStore';
import { useUserStore } from '~/stores/userStore';

const config = useRuntimeConfig();
const client_id= config.clientId
const client_secret= config.clientSecret

export default NuxtAuthHandler({
    providers: [
        CredentialsProvider.default({
            // The name to display on the sign in form (e.g. 'Sign in with...')
            name: 'Credentials',
            secret: client_secret,
        
            authorize: async(credentials, req) => {
              const tokenStore = useTokenStore()
              credentials.client_id = client_id
              credentials.client_secret = client_secret
              credentials.grant_type = 'password'
              credentials.scope = '*'
              let user = ''
              try {
                const res = await fetch(`${config.apiBase}/oauth/token`, {
                    method: 'POST',
                    body: JSON.stringify(credentials),
                    headers: { "Content-Type": "application/json" }
                })
                const token = await res.json()

                if (res.ok && token) {
                  tokenStore.setToken(token.access_token);
                  const res2 = await fetch(`${config.apiBase}/api/user-info`,{
                    headers: { "authorization": "Bearer " + token.access_token }
                  })
                  user = await res2.json()
                  if (user) {
                    userStore.setUser(user);
                    return user
                  }
                }
              }catch(err){
                console.log(err)
              }
              return null
            },
          })
    ]
})

Here's just the one store but neither are updating in the browser:

/stores/tokenStore.js

import { defineStore } from 'pinia'

export const useTokenStore = defineStore('tokenStore', {
  state: () => ({
      token: ''
  }),
  actions: {
    setToken(token) {
      this.token = token;
      console.log("in token store", this.token) //this console.log logs the correct info
    },
    removeToken(){
      this.token = ''
    }
  },
})

And as you can see here in devtools, no values are being updated.