Storing Firebase accessToken in Pinia store - Vue3

Question

I'm pretty new to Vue and this is my first time using Pinia. I'm following this guide to set up Firebase, Pinia, and Axios. The app I'm building uses FirebaseUI to log users in via an email link - this all happens in the LoginPage component below:

(Please ignore any variables/functions of the wrong type - I just want it to work in the first place)

<script setup lang="ts">
import { onMounted } from "vue";
import { EmailAuthProvider } from "firebase/auth";
import { auth } from "firebaseui";
import { auth as firebaseAuth } from "../firebase/config";
import { useUserStore } from "../stores/user"

onMounted(async () => {
  const uiConfig: auth.Config = {
    signInSuccessUrl: "/",
    signInOptions: [
      {
        provider: EmailAuthProvider.PROVIDER_ID,
        signInMethod: EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
        forceSameDevice: true,
      },
    ],
    callbacks: {
      signInSuccessWithAuthResult: function (authResult) {
        const store = useUserStore();
        store.user = authResult;
        return true;
      },
    },
  };
  const ui = new auth.AuthUI(firebaseAuth);
  ui.start("#firebaseui-auth-container", uiConfig);
});
</script>
<template>
  <div id="firebaseui-auth-container"></div>
</template>

When the user successfully logs in, the application updates the Pinia store user object with the AuthResult return object of the signInSuccessWithAuthResult function. When debugging, I can see that the stored object looks like this:

{
    additionalUserInfo: {...}
    operationType: "signIn"
    user: {
        accessToken: "eyJhbGciOiJSUzI1N..."
        auth: {...}
        displayName: null
        ...
    }
}

That is, accessToken is being stored. User storage is as follows:

import { defineStore } from 'pinia'

export const useUserStore = defineStore("userStore", {
  state: () => ({
    user: null as any
  }),
  getters: {
    getUser(state) {
      return state.user
    }
  }
})

In the application, I set up an axios interceptor that will append an accessToken to any Axios request made by the application:

axiosInstance.interceptors.request.use((config) => {
  const userStore = useUserStore();
  
  if (userStore) {
    debugger;
    // accessToken is undefined
    config.headers.Authorization = 'Bearer ' + userStore.user.user.accessToken;
  }
  return config;
});

At this point when trying to retrieve the accessToken from the user store, it disappeared. Most, if not all, of the other properties in the user object are still there, but the access token is not, so I'm pretty sure I'm using storage correctly:

{
    additionalUserInfo: {...}
    credential: null
    operationType: "signIn"
    user: {
        // accessToken is gone
        apiKey: "..."
        appName: "[DEFAULT]"
        email: "..."
        emailVerified: true
        ....
    }
}

Can anyone explain me where I'm going wrong and why accessToken was removed from the store? It seems to me that I'm using the Pinia store correctly, and I'm pretty sure the interceptor is correct as well. However, I might be storing the access token in the wrong way. I would be very grateful if you could provide help/advice on how to properly setup Firebase Authentication with Vue.

Edited to include user-stored values ​​when debugging within the interceptor.

Answer 1

Looks like the accessToken may be in userStore.user.user.accessToken?