Authentication With Vue.js Using Auth0

In this project, we'll build a Vue.js application with multiple views, configure routes in the application, and implement authentication using Auth0.

You will learn to:

Develop an application using Vue.js.

Add Auth0 authentication in Vue.js application.

Integrate an API in the Vue.js application.

Implement routes in Vue.js.

Skills

Web Development

Web Frameworks

Authentication

Prerequisites

Intermediate knowledge of JavaScript

Basic knowledge of Vue.js

Basic understanding of Auth0

Basic understanding of tokens

Technologies

HTML

Auth0

Vue.js

Project Description

This project consists of twelve tasks that will help us build a web application using Vue.js. Vue.js is an open-source progressive JavaScript framework. The core library of Vue.js focuses on the view side of the application, while extended libraries are used for other operations like routing and management of states.

We’ll start off by demonstrating the creation of views and then implementing the router and auth for the application. The router will contain all the internal routes of the application as well as an authentication checkpoint to enable those routes. The Auth0 login screen will be as follows:

Project Tasks

Introduction

Task 0: Get Started with VueJS

Views

Task 1: Implement the Homepage

Task 2: Implement the Callback View

Task 3: Implement the Private View

Task 4: Implement the NotAuthorized View

Task 5: Implement the About View

Router

Task 6: Implement Router

Task 7: Implement Routes

Auth0 Implementation

Task 8: Implement App.vue

Task 9: Create an Auth0 Credentials Object

Task 10: Create the Authentication Functions

Task 11: Handle Auth

Run the Vue Application

Task 12: Run the Application

Congratulations!

Relevant Courses

Use the following content to review prerequisites or explore specific concepts in detail.