This device is not compatible.

Authentication With Vue.js Using Auth0

PROJECT


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.

Authentication With Vue.js 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:

The Auth0 login screen
The Auth0 login screen

Project Tasks

1

Introduction

Task 0: Get Started with VueJS

2

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

3

Router

Task 6: Implement Router

Task 7: Implement Routes

4

Auth0 Implementation

Task 8: Implement App.vue

Task 9: Create an Auth0 Credentials Object

Task 10: Create the Authentication Functions

Task 11: Handle Auth

5

Run the Vue Application

Task 12: Run the Application

Congratulations!