James.Morrison Auth0 Senior Community Manager

Sounds great to me! Let us know when you have the article added

virac

Hi there, thank you for your helpful article!

I do want to ask if it is possible to include the “audience” parameter in the plugin installation, so that token can be stored somewhere after instantiation of AuthService, for example in Vuex store, and then each time when we try to call an API we don’t have to call getTokenSilently() beforehand?

Sorry I’m still kind of a newbie, thank you again!

1 reply

ferlito.sergio

Thanks!
Very interesting and useful article.
Only a couple of questions:

1. I was not able to find any mention in the documentation of screen_hint: "signup" to allow users to land directly on a sign-up page (docs)
2. For “logout” to work correctly I had to specify returnTo logoutOption into this.$auth.logout(); while this.$router.push({ path: "/" }); did not worked as expected (home page into a different VUE single page component)

1 reply

dan-auth0 Auth0 Employee

Hello, virac! Thank you for reading the blog post.
What do you mean exactly by this:

if it is possible to include the “audience” parameter in the plugin installation

1 reply

dan-auth0 Auth0 Employee

Howdy, Ferlito! I am glad that you enjoyed reading this blog post

1. This is the document that explains that configuration option: New Universal Login Experience
2. Could you elaborate more on this use case? What did you expect to happen and what did actually happen?

Thanks!

1 reply

virac

Sorry for not being clear enough, I saw this at the end of the blog post:

Your previous login request did not include an audience parameter. As such, the Auth0 SPA SDK doesn’t have an access token stored in memory.

I read it somewhere that the Auth0 SPA SDK actually calls getSilentToken() when the auth service instance is initiated. Is it possible to store the acquired access token in Vuex store? Currently for each API call I have to run getSilentToken() beforehand, so I’ve been wondering if this is efficient enough.

Thank you for your reply!

ferlito.sergio

Hi dan-auth0,strong text
to correctly logout in the example app I had to use in NavBar.vue:

methods: {
login() {
this.$auth.loginWithRedirect()
},
logout() {
this.$auth.logout({ returnTo: ‘http://localhost:3000’ })
//this.$router.push({ path: ‘/’ }) // this does not work
}
},

Using this.$router.push({path:‘/’}) nothing happens!!
Hope that now is all clear enough.

velasco

Hi there, I followed this guide closely as I need to build a vue app with auth0. I was able to reproduce the app in vue 2, without any issues. But I struggle to apply the guide to vue 3. I get two warnings after npm run serve which appear to rise due to the migration from vue 2 to 3.

 warning  in ./src/router/index.js

"export 'default' (imported as 'Router') was not found in 'vue-router'

 warning  in ./src/main.js

"export 'default' (imported as 'Vue') was not found in 'vue'

I would appreciate if someone could look over my code (https://github.com/velasco/auth0-vue3-sample.git) and help me to debug it. Many thanks

1 reply

salouri

Did you manage to get it working with Vue 3 ? I’m in the same boat as yours and would appreciate any help.
Thanks

1 reply

salouri

@dan-auth0 Thanks a lot for this amazing tutorial!
It would be awesome if you can add some notes on how to do it using vue.js version 3.

1 reply

dan-auth0 Auth0 Employee

We are working on it! There are exciting things coming to Vue from Auth0!

1 reply

dan-auth0 Auth0 Employee

Have you checked out these Vue 3 + Auth0 code samples?

1 reply

konrad.sopala Community Engineer

Thanks for sharing that Dan!

salouri

Yes I looked at them and actually I got it working after mixing between your Vue.js 2 User Authentication with Auth0 and your article Vue 3/JavaScript Authentication: Basic Access Control … so thanks!

I now have to configure it for an openID Connect protocol.

1 reply

dan-auth0 Auth0 Employee

The OIDC profile elements would be present in the ID Token, which is on the user object. Are you looking to have more than access to the user profile information?

1 reply

salouri

Even though I got it working for now (on a demo project) I look forward for an official documentation that will make it much easier than what I did. I wonder how much different it will be to tailor it to OpenId Connect though!

salouri

I logged the returned data from your auth0-express-js-sample application (btw I noticed that RBAC and CORS endpoints were not implemented) and the only different property I see in the user object (on the Profile page) is : “sub”, with a value starting with “auth0|”…is that related to the oidc profile? (I’m new to the whole OIDC implementation)

kalle.elmberg

Hi Dan,

Thank you for the guide.

I get the following error when inplementing this with Vue 2.
This is when I load the site.

TypeError: Object(…) is not a function
at _callee2$ (auth0-plugin.js:66:1)
at tryCatch (runtime.js:64:1)
at Generator.invoke (runtime.js:299:1)
at Generator.eval [as next] (runtime.js:124:1)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:22:1)
at eval (asyncToGenerator.js:27:1)
at new Promise ()
at eval (asyncToGenerator.js:19:1)
at Vue.created (auth0-plugin.js:66:1)

What can be wrong?

/Karl

1 reply

dan-auth0 Auth0 Employee

Hello, @kalle.elmberg ! Could you please try our latest Developer Guide?

It also has a companion code sample that simplifies troubleshooting The preview card says “Composition API” but the link will take you to the Vue.js v2 guide that uses the Options API

1 reply

samiurrahman.shaikh

I have finished. the code completely in Vue3. Followed this Repo: Vue3 version of Auth0 plugin from medium article: https://medium.com/@iamkether/provide-inject-async-plugins-with-vue3-e424525af6ae · GitHub

But getting following error:

Plase do needfull.

1 reply

samiurrahman.shaikh

It is keep on saying ClientID missing

even it is properly passed. I am using V2.0.0.
also many dev used this way : import createAuth0Client from “@auth0/auth0-spa-js”;
but when I use this way. I got saying saying