This Vue 3 guide will help you learn how to secure a Vue 3 application that uses the Composition API. You’ll learn how to use the Vue 3 Composition API along with the Auth0 Vue SDK to implement user authentication, route protection, and access protected data from external APIs.
After login in on the Auth0 page, Auth0 login confirmation page shows up continuously.
Followed steps listed on this page: React Authentication By Example: Using React Router 6
1 Like
Hey there @bmotoche are you able to follow up on this issue? Thank you!
1 Like
Thanks for connecting the dots, @konrad.sopala
Hello, @Alexander7. We’ll be happy to assist you with your question. We’d like to determine if this could be related to any sort of caching or cookies issue. Do you also get the same issue when you log in using a private or incognito tab?
Hello @Alexander7, I couldn’t reproduce the issue you’re having on my end, and it doesn’t seem to be related to the code on the guide. To discard any possible extra configuration that you may have on your current tenant, I suggest following the steps in the React guide on a new tenant.
There is an issue in main.js where the auth0-vue sdk is setup with createAuth0(…) The redirect_uri should be under authorizationParams. When following the guide as is you get a Unable to issue redirect for OAuth 2.0 transaction (on the ‘oops’ screen hosted on Auth0)…
If should be:
.use(createAuth0({
domain: import.meta.env.VITE_AUTH0_DOMAIN,
clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
authorizationParams: {
redirect_uri: import.meta.env.VITE_AUTH0_CALLBACK_URL
}
}))
1 Like
Hello, Martin!
Welcome to the Auth0 Community and thanks for following the guide. There was a recent change on the SDK to another major version. We are working on updating the guide to present this change correctly so that we can provide support to both the SDK v1 and v2.
You can solve this issue on the meantime by installing the Auth0 Vue SDK using this command:
npm install @auth0/auth0-vue@1.0.3
We’ll update this forum as soon as the guides are updated. Thanks for your feedback!
I followed this guide, and found that it isn’t able to retrieve the access token if you have a browser that blocks third party cookies.
To re-produce:
- Follow the tutorial Vue.js Authentication By Example: Composition API
- In Auth0, reduce the Token Expiration to 60, and Token Expiration for Browser Flows to 30.
1 Like
Howdy, Mark! Thanks for your feedback.
What browser were you using? Perhaps Safari or Firefox Private Mode?
We’ll be happy to take a look at this and reproduce the steps as closely as possible.
Hey @dan-auth0, I’m using Brave Browser with third party cookies blocked.
@dan-auth0 btw I should add a bit of context. I followed this tutorial in an attempt with the goal of learning how to get around a particular issue.
The issue is that if you use refresh tokens with Auth0, and you are using a non-custom auth0 domain and running the app in a browser that blocks third party cookies, then you have issues using the refresh token, because the refresh token is set on the auth0 domain as opposed to the app domain.
I’m under the impression that the only way to get around this is to use a custom domain, so the domain with the refresh token matches the domain the app is running. However, happy to be corrected if there is some way to get around this?
Hi @mark222 . Thanks for sharing with us more details of this particular issue. I apologize for the delay in responding to the issue you raised within our community.
Our team is temporarily addressing immediate needs of another project but we have it in our tasks to research into the issue you brought up. We will keep you updated on the progress of our research to address the issue.
Thank you for your understanding.