Calling API to create initial state on SPA login

Help
1

I have a Vue SPA that consumes an API back-end, both secured with Auth0, using the SDK on the Vue app.

What is the best way to automatically call an API endpoint using axios to create the initial application state immediately after authentication?

If possible, I’d like to avoid using local storage. This means calling the getTokenSilently() asynchronously at some point during application start-up and then passing the token to the action in the store. Problems I have encountered:

  • Ideally, I’d be able to configure axios with the token in its config.js file, but of course, $auth can’t be accessed from here. Is this even possible with auth0?
  • I can’t call async functions properly in mounted or created functions since I believe it doesn’t wait for the result of the awaited functions
  • I considered creating an async function to create the Vue instance after the token has been received but I am not sure how this would work with auth0 SDK
  • Even if I do use local storage (cacheLocation: ‘localstorage’) it doesn’t seem to be working as intended - something appears in local storage and often not for long (appears non-deterministic…) and it doesn’t include the bearer token

I’m sure I am missing some fundamental things with Vue here so also grateful to be put right on those points if they are obvious.

1 Like
2

I have settled on a solution using memory. On loading the main Vue component, I use a mounted method to get the token and pass it the action which calls the API.

It appears I was wrong in my assessment that you cannot define an async mounted function.

2 Likes
3

Thanks for sharing it with the rest of community!