Error: Could not read access token

[dawid096]

Hello,
I have problem when I implement vueKeycloak to my Vue 3 project.
I implement basic config options (options does work in keycloak-js library) and on page load after few seconds I get error in console

Uncaught (in promise) Error: Could not read access token
at initKeycloak (index.esm.js?08aa:98)
at async Object.install (index.esm.js?08aa:156)

this is where i get this error:

async function initKeycloak(initConfig) {
try {
isPending(true);
const _isAuthenticated = await $keycloak.init(initConfig);
isAuthenticated(_isAuthenticated);
if (!isNil($keycloak.token)) {
setToken($keycloak.token);
}
$keycloak.onAuthRefreshSuccess = () => setToken($keycloak.token);
$keycloak.onTokenExpired = () => updateToken();
}
catch (error) {
hasFailed(true);
isAuthenticated(false);
throw new Error('Could not read access token');
}
finally {
isPending(false);
}
}

Do you have any idea why do I have this error?

[dawid096]

I found out that in setToken function u have

const setToken = (token) => {
state.token = token;
const content = jwtDecode(state.token);
state.decodedToken = content;
state.roles = content.realm_access.roles;
state.username = content.preferred_username;
};

And in my token there is no "realm_access" key

[akhi-ninja]

i have same problem , tried to setup the token in interceptors but its not working

axiosApiInstance.interceptors.request.use(
async config => {
const token = await getToken()
config.headers = {
Authorization: Bearer ${token},
}
return config
},
error => {
Promise.reject(error)
},
)

[akhi-ninja]

any update on this ?

[MarkusTiede]

Hello @dawid096 & @akhi-ninja for reporting!

@hirsch88 : what do you think, do we need any additional information or do we have current plans to (soonish) address this?

[huytmb]

I have the same problem.
TypeError: Cannot read property 'roles' of undefined at setToken

How to catch the error?

[dawid096]

I had Uncaught (in promise) Error: Could not read access token
i found it in dist/index.js
throw new Error('Could not read access token');
then I realized my token generated by keycloak doesnt have realm_access property.
You have to assign role/roles to client in Keycloak.

How to do this in keycloak
Realm -> Clients -> Find your client and open it ->Scope

Maybe plugin should have some optional chaining in in setToken function
const setToken = (token) => {
...
state.roles = content.realm_access.roles; <= something like this content?.realm_access.roles?
...

[2stootjes]

Same issue

[wuwangzhang1216]

Same issue

[vommuan]

Had the same issue. Error: Could not read access token.

This solved the problem in my case.

https://www.keycloak.org/docs/latest/securing_apps/#keycloak-server-configuration

To use the adapter, create a client for your application in the Keycloak Admin Console. Make the client public by toggling Client authentication to Off on the Capability config page.

Was checked on this fork: https://github.com/JoseGoncalves/vue-keycloak