auth0/auth0-vue

No redirection with loginWithRedirect() when using quasar router history mode

chrisen opened this issue · 3 comments

chrisen commented

Checklist

  • The issue can be reproduced in the auth0-vue sample app (or N/A).
  • I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
  • I have looked into the API documentation and have not found a suitable solution or answer.
  • I have searched the issues and have not found a suitable solution or answer.
  • I have searched the Auth0 Community forums and have not found a suitable solution or answer.
  • I agree to the terms within the Auth0 Code of Conduct.

Description

When using Quasar within a Vue 3 project there is an issue when using the "history" router mode.

After login the user should be redirected to "/" or what's inside appState. But nothing happens after user get redirected back from authentication to callback page. User is still at callback page. With "Hash" mode user gets redirected to "/" but appState is ignored.

Can be easily reproduced in a fresh app.

Reproduction

  • Install Quasar with Vue 3
  • create auth0 boot file
  • use boot inside quasar.config.js
  • set router mode to history inside quasar.config.js
  • set up callback page and link it to router
  • setup index page with login button component
  • "quasar dev" to start application

Additional context

No response

auth0-vue version

2.3.1

Vue version

3.3.4

Which browsers have you tested in?

Chrome, Safari

daxmelbourne commented

hi @chrisen - you opened and closed this.. did you find a resolution? I've been having the same issue and pulling my hair out.

chrisen commented

hi @chrisen - you opened and closed this.. did you find a resolution? I've been having the same issue and pulling my hair out.

Take a look at the following issue: That fixed my problem:

#255 (comment)

  • 👍1
daxmelbourne commented

Well, that was half a day! Thanks for the reply.I hadn't realised the router wasn't on the Vue global in Quasar, just this was enough inside my boot script

app.config.globalProperties.$router = router;

import { createAuth0 } from '@auth0/auth0-vue'

const auth0 = createAuth0({
   domain: '#########',
   clientId: '#########',
   cacheLocation: 'localstorage',
   useRefreshTokens: true,
   authorizationParams: {
      redirect_uri: window.location.origin,
      audience: '#########'
},
   useCookiesForTransactions: true
})

export default boot(({ app, router }) => {

   app.config.globalProperties.$router = router

   app.use(auth0)

})

export { auth0 }
  • 👍3