[Vue 3 & Vite 2] Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getTokenSilently')

Help
1

Hi!

@auth0/auth0-spa-js: v1.21.0
node: v16.13.0
vue-router: v4.0.14
vue: v3.2.31
vite: v2.9.1

Using getTokenSilently gives error in the title.

Use:

import { useAuth } from "@/backend/auth/useAuthService";
const { getTokenSilently } = useAuth();

async function getToken() {

  const accessTokenData = await getTokenSilently();

  return {

    access_token: accessTokenData,

  };

}

After a day of searching, I came close to understand that while ‘loading’ is true, the function won’t return anything so it is undefined.
Writing something like if (!loading) { const accessTokenData = await getTokenSilently(); would solve this but it doesn’t.

Also refreshing the page will give the error but if I don’t refresh but change a code somewhere so it will compile without reloading, function works perfectly.

I am not using GitHub - auth0/auth0-vue: Auth0 authentication SDK for Vue.js apps because I had some problems with it.

These didn’t help:

Reproduction: (I made this but i can’t reproduce correctly, also it doesn’t give any errors. Just sharing)

Github Issue link

This may not be related to Auth0 but other libraries etc won’t give me this error.
What am I doing wrong?

Thanks!

2

I believe I have a similar issue when using the new Vue3 SDK using authGuard to protect a Vue router route. I get the following error:
[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'getAccessTokenSilently')"
I am following the instructions in the README, except I have the Home page protected by the guard, so I assume it is giving issues because of timing.

3

I got same issue in vue 3 using auth0-vue sdk, I call getAccessTokenSilently in a Typescipt file, seems that getAccessTokenSilently only works in vue file

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘getAccessTokenSilently’)

any help on it?

4

I went back to using @auth0/auth0-spa-js and just using the vanilla implementation

1 Like
5

We talked about this here for a long time and there are some different solutions:

This worked for me: Be able to access Auth0Client outside a component · Issue #99 · auth0/auth0-vue · GitHub

1 Like
6

Thanks for sharing that with the rest of community!

1 Like