Beginner Vue.js Tutorial with User Login

Blog Discussions
, ,
1

Learn how to build a Vue.js application from scratch and easily add authentication so that users can register and login.

Read on :star2:

Brought to you by @holly :woman_technologist:t3:

Beginner Vue.js Tutorial with User Login
Beginner Vue.js Tutorial with User Login1176×1056 441 KB

5 Likes
2

Please let me know if you have any questions!

2 Likes
3

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

4

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!

2 Likes
5

Hey alainz! Part 2 is scheduled to come out next Wednesday! I’ll ping you here once it’s published :+1: Thanks for following along!

2 Likes
6

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 :slight_smile:

7

Hey there @alainz it’s already here! :slight_smile:

8

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!

9

Thanks for pointing that out @pnieto! I’m sure @holly will follow-up on that soon!

10

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?

12

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!

2 Likes
13

Thank you @geocolumbus for being on point! :slight_smile:

14

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).

15

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!

16

HI There
Excellent tutorial!
A small problem I had using a mac (not sure it is connected :slight_smile: ) 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 Like
17

Hey there @zvischutz!

I’m sure Holly will look at it once she’s online!

18

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?

20

@kris.bravo pinging @holly for visibility :slight_smile:

21

How would I go about changing the titles of each page? Right now it says “events-app” on each tab I open. I would like to customize these titles, if possible.

22

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.

  1. Install it:
npm install vue-meta
  1. Import and use it in main.js:
import VueMeta from 'vue-meta';

Vue.use(VueMeta);
  1. Update the title in each component:
<script>
export default {
  name: 'home',
  metaInfo: {
    title: "Homepage"
  }
}
</script>

Hope that helps!

2 Likes