ON May 3, 2019

VueJS Authentication with Auth0 - Using Vuex & Vue Router

POSTED IN:

User Log In / Authentication for a Project

These days, just about every project that isn't a simple basic website requires its users to log in for some reason or another.  From the developer's vantage in creating the app, "logging in" is more appropriately termed "Authentication".  The application needs to authenticate or verify the identity of the person logging in before showing that user certain personal data.

Typically, especially in the past, authentication was simply a username and a password.

Creating a username/password authorization component in your application seems easy, but ultimately its time consuming and can actually be a bit daunting once you get into it.

The Developer's Tasks

On the front end, the developer needs to create the login form which consists of not only a couple of fields for a user to enter their name and password but also some validation of those fields.  Did the user enter invalid characters in the name? Did the user create a complex enough password?

The front end also has to work with the back end to make sure some rogue hacker/programmer doesn't automate millions of sign up to your application.  This usually requires some form of bot blocking software like captcha verification and/or what's called a "nonce" validation check.

The backend then has to handle the verification of the user's email address.  This requires the backend to have email/smtp capabilities.  Sending an email from a server was simple in the past, but now with so much spam protection going on, it has become quite difficult to set up.  To get emails from the server through to the user, not only does the server need to implement email authentication techniques (SPF, DKIM, etc), but often the full stack developer needs to do work just to get a sending port (port 25) unblocked by the server provider.

Then there's the "forgot username" and "forgot password" forms, links and functionality that need to be created for the continuing support of those users.

Finally, the backend has to manage the user's passwords properly so that if the server gets hacked, the hacker doesn't get anything useful.  Passwords are protected with a technique called hashing.  And security is a big deal, and constantly changing.

Oh, and does the app need to support those cool new(er) 3rd party login capabilities where a user can use thier Google, Facebook, or Twitter account to log in?  You could spend days implementing each of those.

And double oh... what about implementing Multi-Factor Authentication where the user needs to also enter a special code (provided by a texted code or from an authentication app on the user's phone) to make sure the password isn't being used after having been stolen in some way.  A developer could spend another couple of days just on this component.

Enter Auth O

This is where Auth0 comes into play.

A developer can integrate Auth0, a universal authentication & authorization platform for web, mobile and legacy applications and have all the above functionalities handled for the application by a 3rd party that specializes in keeping everything up to date and highly secure.

Integrating Auth0 for the first time is not extremely easy.  Beyond the integration programming, the developer will need to learn a bit about some fairly heavy protocols like OAuth2.0 and OpenID Connect.  But once learned, future implementations on subsequent projects that need authentication are relatively quick and easy.

Integrating Auth0 With a VueJS Application

In the video series below, it is shown how to integrate Auth0 authentication into a front-end user interface single page web application built on the Vue JS javascript framework.

Las Vegas, NV
United States
Toll Free: (800) 661-5653
Local: 702-985-4142
Solutions
DedicatedManagers.com
© Copyright 2017 - Dedicated Managers, Inc. - All Rights Reserved
envelope-omap-markerphoneat linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram