Beginner Vue.js Tutorial with User Login

Hey there @kris.bravo! I was revisiting this article and just noticed I missed your comment! Really sorry about that. Did you ever get this resolved? I’ve tried a couple ways to reproduce it and I think it could be how you’re importing it? Can you confirm that you have this line in main.js:

import { Auth0Plugin } from "./auth"

And double check that the @auth0/auth0-spa-js package exists in package.json. Let me know if that helps!

Hi @zvischutz! Just going through a couple comments that I seem to have missed, so sorry about that! You’re right that the import should look like that. I’ll update the article with that. Thank you!

Hey @pnieto! Thanks for following the tutorial! I seem to have missed your comment earlier, so hopefully you got it resolved since then! If not, one simple way to handle options like that is using Auth0 rules.

Rules run right after an authentication request, so you can do just about anything here, such as disabling new signups, only allowing signups from certain domains, disabling social login, etc. You can also modify user information. It’s really powerful and simple to use.

There’s even a sample Rule pre-written that shows how to disable social signups. If you want to see how that one works, go to your dashboard, click on “Rules” on the lefthand side, and then click on “Create rule”. Then find the one that says “Disable social signups”. Hope that helps!

1 Like

Hey @holly I am having a “Callback URL mismatch” issue when trying to reach the Auth0 Universal Login Page. I was using localhost as indicated and tried changing to 127.0.0.1, as you suggested to @jmdospixel.
What should I do?

Hey @myialine! When you sign in does it also say The provided redirect_uri is not in the list of allowed callback URLs next to the “Callback URL mismatch” message?

If so, you can look at the URL on that error page and find redirect_uri. That will be the URL that Auth0 is expecting in “Allowed callback URLs”

E.g. If it says “https://yourdomain.auth0.com/authorize?client_id=yourclientid&**redirect_uri=http%3A%2F%2Flocalhost%3A8080**…”, that means you should use http://localhost:8080.

If that doesn’t help, can you click on “Logs > Search” in the dashboard and tell me what the “Description” message says for the failed login? Thanks! :star:

1 Like

I was following the tutorial detailed in: (Beginner Vue.js Tutorial with User Login).

When I got to the authentication portion I followed each step closely but I am getting this message in console using Chrome:

vue.runtime.esm.js?2b0e:1888 Error:
auth0-spa-js must run on a secure origin.
See auth0-spa-js/FAQ.md at master · auth0/auth0-spa-js · GitHub
for more information.

at eval (auth0-spa-js.production.esm.js?9767:15)
at new e (auth0-spa-js.production.esm.js?9767:15)
at eval (auth0-spa-js.production.esm.js?9767:15)
at eval (auth0-spa-js.production.esm.js?9767:15)
at Object.eval [as next] (auth0-spa-js.production.esm.js?9767:15)
at eval (auth0-spa-js.production.esm.js?9767:15)
at new Promise (<anonymous>)
at o (auth0-spa-js.production.esm.js?9767:15)
at eval (auth0-spa-js.production.esm.js?9767:15)
at _callee3$ (index.js?b628:86)

Any ideas what I could have done wrong?

Hey there Bradley!

I was quite sure I saw a similar topic some time ago and I was right!

Let’s work on this together with the article author - @holly!

1 Like

I think my problem might be what I have in the Application Login URI. The tutorial didn’t explicitly say to put anything in there so I left it blank. I tried adding a few things there and it still doesn’t. What should I have in there if I’m running locally?

Hi Bradley!

I haven’t encountered this error before, but the blank Application Login URI shouldn’t be an issue. That’s more of for if Auth0 ever needs to redirect back to the login page.

Can you let me know what you have in your Auth0 dashboard for Allowed Callback URLs? And also make sure your browser supports the Web Cryptography API that the package uses. You can check that here: Can I use... Support tables for HTML5, CSS3, etc

Hopefully we can figure this out quickly!

1 Like

http://localhost:8080/

That’s what’s in Allowed Callback…

Here’s what I have in there. I also checked and Chrome 83 is compatible with Web Cryptography API.

Also, sorry if my last post sounded “snotty”. I was replying from my phone and just gave a short answer. When I looked back at it this morning it sounded like I was ungrateful for your help. Nothing could be further from the truth!

Oh no worries at all! I didn’t read it like that anyway haha but thanks for clarifying!

I’m trying to reproduce the issue but still not able to. Let’s try 2 things here. First, try removing the trailing slash at the end of http://localhost:8080 in all three of those spots, press Save, and then try signing in again.

If that still doesn’t work, I’d like to make sure that the origin URL is actually the issue and it’s not some strange side effect from something else. You should be able to force Chrome to recognize it as secure by going here in your browser: chrome://flags/#unsafely-treat-insecure-origin-as-secure

Change it to “Enabled” and paste in http://localhost:8080. Then try logging in again. If it works, then we’ll know that Chrome is for some reason flagging that URL as not secure and we can carry on this route for debugging.

Let me know what happens!

1 Like

Still getting the same thing. The issue is that I’m not getting the “Sign In” button to show up at all. If I hard code out the “v-if” statement it appears but doesn’t do anything. But I am still getting the same message in the console. I think I’m going to drawing board this and start over to make sure I didn’t miss something.

One issue I ran into when I was go through the tutorial…anytime I used “touch” it was not allowing that to run. I just created the folders manually that it was trying to create, but any idea what I could do to fix that. I may have time at some point today to run back through this, otherwise it might be tomorrow. In any case I will follow-up when I can go through all of this again. Thank you for you help!

Fixed the “touch” issue, had to adjust the execution policy. Anyone else running into this you can get more information on that here: https:/go.microsoft.com/fwlink/?LinkID=135170

1 Like

Ok, I walked back through the tutorial this morning. Everything seems to be working fine now. It must have just been something I overlooked.

I did notice on thing, while I was working on setting up the page I was having some issues with the css being formatted properly. I realized that when I removed the trailing “;” from the bulma css import statement that fixed it.

I thought maybe that had something to do with my prior issues because the same syntax was used when import the Auth0 plugin. Once I was done with the tutorial and verified it was working I tried it with trailing ;'s on all three import statements and without and it performed the same. Even the CSS was acting alright at that point (which is strange, but I’ll take it).

Anyway, thank you for your quick response and assistance with this. Turns out it was user error (as suspected). Now I can properly evaluate Auth0 and consider using it for my authentication needs!

1 Like

Here is a working example with the latest version of Vue,
Minor changes from the quick start example code.

Hope this would help someone.

1 Like

Sorry for the late reply and I’m really glad you were able to figure it out!

On a side note, you did bring up a good point about the touch command. I’m going to go through the tutorial again and change that out since it can be confusing if you’re on Windows. I’ll also check for any other instructions that might be unclear. Thank you for helping me improve the tutorial! :boom:

In the subsection “Event Card Component” of " Building Our Application Components", the file src/components/EventCard.vue is incorrectly referred to as src/partials/EventCard.vue. Based on the instructions for file creation and the way files are referred to throughout the article, there is no such file as src/partials/EventCard.vue. There isn’t even a partials directory under src!

Simple typo, but caused me a moment of pause.

Thanks for reporting that @extremepayne (cc: @holly)

Thank you @extremepayne for pointing that out! I’m going through the full tutorial from scratch right now to fix that and make sure there are no other issues :smiley_cat: