Beginner Vue.js Tutorial with User Login

[pofigster]

This has a been a great tutorial. Thank you! I’ve been following it using a development box from DigitalOcean, so I have a publicly accessible IP address. When I added all the auth0 code, I was given errors that suggested I need to be running in SSH. Is that expected behavior?

[dmwachinga]

I am using Vue 3 and ran into a hitch installing the Auth0 plugin, I will appreciate getting your help am trying to lean Vue

[henkvalk]

Hi, thanks for this great tutorial. When I Sign in, its possible to navigate through the pages, but when I refresh the page, I’m logged out. The Application token is expiring after 36000 seconds. How is this happening, and how to let a user logged in after refreshing the page?

[holly]

Hi @henkvalk! Glad you were able to get it working! Are you logging in with email/password or are you using a social account like Google? If you use a social account, you’ll have to update your developer keys for that provider in your Auth0 dashboard (under Connections > Social), otherwise it will use Auth0’s test development keys and the login won’t persist.

If you are already signing in with normal email and password though let me know and we’ll troubleshoot further!

[techgents]

Sorry to resurrect such an old post but I am having the same issue. Kris did you ever get this working?

I have confirmed the imports exists and auth0-spa-js exists in the package.json file.

I have tried running the app on my PC and on a ubuntu server is the same error:

vue.runtime.esm.js?2b0e:5106 Uncaught TypeError: Cannot read property ‘install’ of undefined
at Function.Vue.use (vue.runtime.esm.js?2b0e:5106)
at eval (main.js?56d7:13)
at Module…/src/main.js (app.js:1462)
at webpack_require (app.js:854)
at fn (app.js:151)
at Object.1 (app.js:1535)
at webpack_require (app.js:854)
at checkDeferredModules (app.js:46)
at app.js:994
at app.js:997

Thanks in advance.
Andrew

[techgents]

I think I found the issues. There seems to be differences in the tutorial code and the official Auth0 code:
The tut code in auth/index.js is:

async created() {
  // Create a new instance of the SDK client using members of the given options object
  this.auth0Client = await createAuth0Client({
    domain: options.domain,
    client_id: options.clientId,
    audience: options.audience,
    redirect_uri: redirectUri
  });

But the official side code says:

async created() {
  // Create a new instance of the SDK client using members of the given options object
  this.auth0Client = await createAuth0Client({
    ...options,
    client_id: options.clientId,
    redirect_uri: redirectUri
  });

I don’t fully understand what the differences yet but I hope it helps someone else.

Good Luck.
Andrew

[holly]

Hi Andrew! Did it work after making that change then? I’m currently out of office but I’ll take a look to see if something else changed in the auth0-spa-js sdk once I get back.

Also I doubt this is your issue, but just want to mention the tutorial and Auth0 Vue plugin currently isnt compatible with Vue 3. We’re trying to get some updated guidance out around it asap. Just wanted to mention that too in case!

[techgents]

Hi Holly,

Yes the change did allow me to do the authenticate via Auth0. I followed the install as per the tutorial so stuck with version 2.

"vue": "^2.6.11"

As I am just beginning to learn Vue I will likely stay with the older version as all the tutorials are in older version but the new 3.0 looks like it has some really good changes.

Thank you so much for getting back to me and your feedback. Look forward to the updated tutorial for version 3.0

[konrad.sopala]

Thanks for sharing that with the rest of community!