Vue 3 User Authentication: Composition API Guide with JavaScript

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.

image

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?

I do. Could be SameSite issue? Not sure how to deal with that if that is the case.

1 Like

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!