Hey Holly
Thank you for your tutorial! It was very conclusive and I could just follow it.
In the tutorial, you mentioned that part two would follow, which is about securing the API.
“If you’re interested in making calls to an API using Vue, there will actually be a part 2 to this tutorial where we do just that.”
Is this already available?
Best regards
2 replies
Hey there @alainz!
It’s not there yet as on only 11 days ago we released the first part but we will let you know once it’s there!
Hey alainz! Part 2 is scheduled to come out next Wednesday! I’ll ping you here once it’s published 
Thanks for following along!
Here you go! Making API Calls with Vue and Express - Building and Connecting the API Ended up getting pushed back a little due to holidays. Let me know if you have any questions 
Hey there @alainz it’s already here!
Thanks for the tutorial, it was very easy to follow.
If I wanted to edit some options of the login screen, like disabling sign-up and changing the locale, where should I do those? Can it be done with something along the lines of giving the createAuth0Client function an extra set of options?
Thanks in advance!
1 reply
Thanks for pointing that out @pnieto! I’m sure @holly will follow-up on that soon!
So you are downloading all the javascript and html to the client side, and then using vue router to block access to certain pages if not authenticated? But all I have to do is open the console and view the data that was downloaded. I can even override the vue router from the javascript console. So this is not security. Security would be the page does not download from the server until after you are authenticated, right? Like how Spring Security does it?
1 reply
Hey there! Sorry for the late reply, but you’re absolutely right about data on the client-side. This tutorial is actually a 2 part series! This first part was meant to be focused on the login portion and then part 2 shows how to set up the Express backend, where the protected data is stored.
With part 2, the user must sign in and pass a valid access token to the backend before the backend will even respond with the data. The beforeAuth guard in this tutorial was meant to redirect the user to the login page for UI purposes, but I see how that was confusing. I’ve updated the tutorial to make it clear that part 2 is where the authorization happens and that any data you store in the client-side is should always be considered available to the public, so thank you for pointing that out!
Thank you @geocolumbus for being on point!
Seems like using http://localhost:8080 for the Application Login URI is not viable?
Error! Payload validation error: ‘Object didn’t pass validation for format absolute-uri-or-empty: http://localhost:8080’ on property initiate_login_uri (Initiate login uri, must be https and cannot contain a fragment).
1 reply
Hi @jmdospixel! Really sorry for the late reply. Can you try replacing localhost with 127.0.0.1? The localhost version should work, but it appears other people are having a similar issue and report that using the direct address fixes it. I’ll update this post with that note as well. Thank you!
HI There
Excellent tutorial!
A small problem I had using a mac (not sure it is connected ) is using the bulma module.
The following did not work for me :
import ‘./node_modules/bulma/css/bulma.css’;
This one did (notice the double dots instead the single one) :
import ‘…/node_modules/bulma/css/bulma.css’;
Thanks very much and best regards !
1 reply
Hello,
After adding the Auth0Plugin references to main.js, I am greeted with a blank page and this error in the console:
Uncaught TypeError: Cannot read property ‘install’ of undefined
referring to this section of code:
Vue.use(Auth0Plugin, {
domain,
clientId,
onRedirectCallback: appState => {
router.push(
appState && appState.targetUrl
? appState.targetUrl
: window.location.pathname
);
}
});
I have triple checked the reading and values of the auth_config.json file. Running on ubuntu.
Thoughts?
2 replies
@kris.bravo pinging @holly for visibility
Hey @paytonmcl!
You can do this using the router, but you’ll have to create a custom navigation guard to handle it (something like this https://alligator.io/vuejs/vue-router-modify-head/)
The other and more simple option is to use the popular vue-meta package.
npm install vue-meta
main.js:import VueMeta from 'vue-meta';
Vue.use(VueMeta);
<script>
export default {
name: 'home',
metaInfo: {
title: "Homepage"
}
}
</script>
Hope that helps!
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!
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! 
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?