Hello Guys
We are running a Vuejs3+CompositionAPI SPA App and vue-auth0 GitHub - auth0/auth0-vue: Auth0 authentication SDK for Vue.js apps is used for authentication.
Token configurations are as followings
“jwt_configuration”: {
“alg”: “RS256”,
“lifetime_in_seconds”: 3600,
“secret_encoded”: false
}
“refresh_token”: {
“rotation_type”: “non-rotating”,
“expiration_type”: “expiring”,
“leeway”: 0,
“token_lifetime”: 2592000,
“infinite_token_lifetime”: false,
“idle_token_lifetime”: 2590000,
“infinite_idle_token_lifetime”: false
},
Client creation:
app.use(
createAuth0({
domain: process.env.VUE_APP_AUTH0_DOMAIN,
clientId: process.env.VUE_APP_AUTH0_CLIENT_ID,
clientSecret: process.env.VUE_APP_AUTH0_CLIENT_SECRET,
authorizationParams: {
organization: process.env.VUE_APP_AUTH0_ORG_ID,
redirect_uri: process.env.VUE_APP_AUTH0_CALLBACK_URL,
audience: process.env.VUE_APP_AUTH0_AUDIENCE,
scope: process.env.VUE_APP_AUTH0_SCOPE,
},
cacheLocation: 'localstorage',
useRefreshTokens: true, // Enables refresh tokens for silent authentication
}),
)
Expect flow where our user experiencing the following problem.
- user logs in and get access_token that is valid for 1 hour, and refresh_token that is valid for 30 days and should be able to use multiple time during 30 days of validity.
- After 30 days user will be asked for relogin
- Problem
- user is keep getting logout, seems like that token refresh is not in place properly, we are using getAccessTokenSilently as you can see in following example.
In App.vue
Do you see any potential miss configuration that could lead to the issue we are facing?
Your help will be appreciated, I have tried different refresh_token configuration, but sill have a same problem.
watchEffect(async () => {
if (!isLoading.value && isAuthenticated.value) {
loading.value = true
try {
const accessToken = await getAccessTokenSilently()
if (accessToken) {
// Axios interceptor for Authorization header
axios.interceptors.request.use(async (config) => {
try {
const oldToken = localStorage.getItem(
process.env.VUE_APP_ACCESS_TOKEN_KEY_NAME,
)
const token = await getAccessTokenSilently()
if (token) {
localStorage.setItem(
process.env.VUE_APP_ACCESS_TOKEN_KEY_NAME,
token,
)
config.headers = config.headers || {}
if (
!config.headers['Content-Type'] == 'multipart/form-data'
) {
config.headers['Content-Type'] = 'application/json'
}
config.headers.Authorization = `Bearer ${token}`
if (oldToken !== token) {
console.log('Access token changed, refetching profile')
store.dispatch('auth/fetchAuth0Profile', {
noInterceptor: true,
config,
})
}
}
} catch (e) {
// Optionally handle error
console.error('Auth0: Failed to get access token for axios:', e)
loading.value = false
}
return config
})
}
} catch (e) {
loading.value = false
console.error('Failed to get access token:', e)
}
}
})