The Complete Guide to Vue User Authentication with Auth0

Blog Discussions
1

Learn how to add user authentication to Vue using a plugin.

2

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

3

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 Like
4

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 Like
5

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

6

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

  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!

7

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!

8

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.

9

This topic was automatically closed 26 days after the last reply. New replies are no longer allowed.

12

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

13

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

14

@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 Like
15

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

3 Likes
16

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

3 Likes
17

Thanks for sharing that Dan!

1 Like
18

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 Like
19

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 Like
20

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!

21

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)