The best way to manage and coordinate the tasks necessary for user authentication is to create a reusable service. With the service in place, you will be able to call its methods throughout your application. The name for it is at your discretion, but in these examples it will be called AuthService and the filename will be authService.js. An instance of the WebAuth object from auth0.js can be created in the service.

Create a service and instantiate auth0.WebAuth. Provide a method called login which calls the authorize method from auth0.js.

To provide the values for clientID, callbackUrl, and domain, create a new file auth_config.json in the root directory of the application alongside your package.json file, and populate it with your tenant values:

Add some additional methods to AuthService to fully handle authentication in the app.

The service now includes several other methods for handling authentication.

• handleCallback - looks for an authentication result in the URL hash and processes it with the parseHash method from auth0.js
• localLogin - sets the user's ID Token, and a time at which the ID Token will expire. The expiry time is converted to milliseconds so that the native JavaScript Date object can be used
• renewTokens - uses the checkSession method from auth0.js to renew the user's authentication status, and calls localLogin if the login session is still valid
• logout - removes the user's tokens from memory. It also calls webAuth.logout to log the user out at the authorization server
• isAuthenticated - checks whether the local storage flag is present and equals "true", and that the expiry time for the ID Token has passed

So that the authentication service may be passed around easily to each component, create a Vue.js plugin that will inject the service into everywhere that needs it:

This plugin provides access to the AuthService class from each component, through the this.$auth property. It also provides a mechanism for when the login state changes, for components that implement a handleLoginEvent method.

Open main.js and install the plugin:

Provide a component with controls for the user to log in and log out.

The @click events on the Log In and Log Out buttons make the appropriate calls to the AuthService to allow the user to log in and log out. Notice that these buttons are conditionally hidden and shown depending on whether or not the user is currently authenticated.

Also notice the use of this.$auth to access the AuthService instance. Login events can be handled by providing a handleLoginEvent method on any component.

When the Log In button is clicked, the user will be redirected to login page.

When the application first starts up, a call to renewTokens is made that tries to reinitialize the user's login session, if it is detected that they should already be logged in. This would be the case, for example, if the user logged in and then refreshed the browser window.

Using Universal Login means that users are taken away from your application to a login page hosted by Auth0. After they successfully authenticate, they are returned to your application where a client-side session is set for them.

When a user authenticates at the login page and is then redirected back to your application, their authentication information will be contained in a URL hash fragment. The handleAuthentication method in the AuthService is responsible for processing the hash.

Install vue-router to allow callbacks to be routed properly to the Callback component:

Create a component named Callback and populate it with a loading indicator. The component should also call handleAuthentication from the AuthService.

Add a new file router.js inside the src folder with the following content:

Updated main.js to register the router:

After authentication, users will be taken to the /callback route for a brief time where they will be shown a loading indicator. Their client-side session will be set during this time, after which they will be redirected to the / route.

The AuthService has already extracted the user's profile information and stored it in memory, and can be accessed using this.$auth.profile from inside a Vue component.

To display the profile information, create a new component Profile in the views folder:

Import the Profile component into router.js and then modify the routes list so that the Profile component is mapped to /profile:

Then add the /profile route to your navigation bar by inserting a new <li> element into the navigation bar structure:

Even though the /profile route is only shown if the user is authenticated, the user could still manually type the URL into the browser and access the page if they have not logged in — although there will be nothing to see.

A catch-all rule can be added to the router so that access is only permitted if the user is logged in. If they are not logged in, they will be prompted to log in before being redirected to the location they tried to access in the first place.

Open router.js and add a rule that exhibits this behavior:

Given this, any page that is not either the home page or the callback URL will cause the application to show the login prompt if the user is not authenticated.