How to access this.$auth inside Vuex Store?

[Unindividual]

Hello.

How do I access this.$auth inside a Vuex Store?
For example how to do this:
const accessToken = await this.$auth.getTokenSilently();

I know I can pass this.$auth as an argument to the function committing a mutation or dispatching an action but I find that solution a bit clumsy.

Thank you.

[stephanie.chamblee]

Hi @Unindividual,

You can store the Access Token in the Vuex Store the same way you would store the user object (see Vue Quickstart src/auth/authWrapper.js. However, every time you need to use the Access Token, you would need to update the state to make sure the token is still valid. When you call getTokenSilently, the SDK manages the refresh for you. For this reason, it may make more sense to use this.$auth.getTokenSilently() instead of managing it in something like this.$auth.accessToken.

This is how you could store it (but again, it’d have to be updated every time you want to use the token):

export const useAuth0 = ({
  onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
  redirectUri = window.location.origin,
  ...options
}) => {
  if (instance) return instance;

  instance = new Vue({
    data() {
      return {
        loading: true,
        isAuthenticated: false,
        user: {},
        auth0Client: null,
        popupOpen: false,
        error: null,
        accessToken: null
      };
    },
    methods: {
      async loginWithPopup(options, config) {
        this.popupOpen = true;

        try {
          await this.auth0Client.loginWithPopup(options, config);
          this.user = await this.auth0Client.getUser();
          this.isAuthenticated = await this.auth0Client.isAuthenticated();
          this.error = null;
        } catch (e) {
          console.error(e);
          this.error = e;
        } finally {
          this.popupOpen = false;
        }
      },
      async handleRedirectCallback() {
        this.loading = true;
        try {
          await this.auth0Client.handleRedirectCallback();
          this.user = await this.auth0Client.getUser();
          console.log(this.accessToken)
          this.isAuthenticated = true;
          this.error = null;
        } catch (e) {
          this.error = e;
        } finally {
          this.loading = false;
        }
      },
      loginWithRedirect(o) {
        return this.auth0Client.loginWithRedirect(o);
      },
      getIdTokenClaims(o) {
        return this.auth0Client.getIdTokenClaims(o);
      },
      async getTokenSilently(o) {
        this.accessToken = await this.auth0Client.getTokenSilently();
        return this.auth0Client.getTokenSilently(o);
      },
      getTokenWithPopup(o) {
        return this.auth0Client.getTokenWithPopup(o);
      },
      logout(o) {
        return this.auth0Client.logout(o);
      }
    },
    async created() {
      this.auth0Client = await createAuth0Client({
        ...options,
        client_id: options.clientId,
        redirect_uri: redirectUri
      });

      try {
        if (
          window.location.search.includes("code=") &&
          window.location.search.includes("state=")
        ) {
          const { appState } = await this.auth0Client.handleRedirectCallback();
          this.error = null;
          onRedirectCallback(appState);
        }
      } catch (e) {
        this.error = e;
      } finally {
        this.isAuthenticated = await this.auth0Client.isAuthenticated();
        this.user = await this.auth0Client.getUser();
        this.loading = false;
        this.accessToken = await this.auth0Client.getTokenSilently();
      }
    }
  });

  return instance;
};