Learn how to add Authentication to a Vue App using Auth0. See how easy it is to add to your Vue application so you can register and login users with their email address and a password. Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications.

What we will be creating

We are going to create a very simple Vue application using the Vue CLI. We will modify the default scaffolded application so that we can use Auth0 to either register a new user or login an existing user. Once a user is logged in then they will have access to view the About page.

User’s will be able to register with the application using the email and password authentication system in Auth0.

Creating our Project

I will be using the Vue CLI to scaffold out a project for us to start with. To do that you need to have the Vue CLI installed on your system. If you DO NOT have it installed, you can install it globally with this command:

npm install -g @vue/cli

Now we can use the Vue CLI to create our project. Create a new project using this command:

vue create vue-authentication-auth0

You will be asked to pick a preset. Choose “Manually select features” and then select “babel”, “Router” and “Linter / Formatter”.

You will be asked if you want to use history mode for router. Choose “Yes” (should be the default).

You can select any linter you want but for this tutorial I will be selecting “Eslint + Prettier”.

After the Vue CLI is finished, it will give you the commands to change into the new directory that was just created and the command to start the server. Follow those directions. Once the server is started you can open your browser to localhost:8080. You should see this:

#vue #vuejs #javascript #auth0 #security