While you can find very good documentation on Auth0 site for integrating Auth0 with Vue it’s based on managing state through propagating props and custom events. The more practical and real-world implementation would use Vuex. Therefore I’ve created an example project integrating Auth0 with Vue and Vuex. It’s based on a similar concept as original documentation but uses Vuex for state management and events handling.
Further in this post I’m describing some of the aspects of the integration. If you’re not interested though you can clone the example code from GitHub.
In this post I assume you’ve already setup an Auth0 account and created the Single Page Web Application client. If not refer to the documentation on how to do it. I also assume you’re familiar with OAuth2 authentication.
For this tutorial you’d need to have
vue-cli installed on
your machine with:
I assume you’re familiar with Vue CLI tool.
Generate new Vue project with:
Out of the features dialog you need to pick manual option and select
Vuex to install necessary dependencies and configuration.
Finally install the auth0.js library.
Now we’re ready to go.
The usage of auth0.js is pretty straightforward. Create an instance of
auth0.WebAuth providing your client configuration, request type and scope
authorize method to start login process and
parseHash to parse
returned tokens. If you’re familiar with OAuth2 you’d know that tokens will be
appended to the callback URL to which user is redirected to.
As the Auth0 documentation suggests best way is to encapsulate that logic with reusable service. Let’s create one:
You need to provide
audience to your
Auth0 client. Auth0 will generate that values for you which can be simply copy’n’pasted
to the actual code. The
login method initiates the authentication flow by redirecting
user to the Auth0 login dialog.
Creating user session store
We need a place to instantiate our
Authenticator and where to keep user session information.
Since this post is about Vuex let’s go ahead and firstly create a store for user session:
If you created new project with
vue-cli you probably have
src/store.js file. You can
use it as well but I prefer to rename that file to
src/store/index.js and use modules
for concern separation. Both solutions works fine and it’s the matter of preference which one
Our state is empty for now but we’d fill it up soon. Now we need to add this module to our Vuex store:
Alright, now we’re ready to fire the authentication flow.
To initiate authentication we need to call
login action from our store. Typically such
action is fired in response to clicking some button or link usually in page top nav bar.
Let’s create a Vue component for that:
When clicking our login button the
login method is called which dispatches
login action of our store. This will redirect user to Auth0 login dialog.
Please note using bootstrap. Simplest way of adding it is pasting the CDN link
index.html file. Alternatively
npm package can be installed and imported
We need to add our
Navbar component the the
Now we can initiate login flow. Go ahead and run
npm run serve navigate
to http://localhost:8080 and click the Sign In button. You should be redirected
to Auth0 login page.
First part is done. We’re initiating authentication flow and redirecting user
to login dialog managed by Auth0. Next step is to handle redirect callback.
Auth0 would append auth_token and id_token to the redirect URL we’ve
set in the initial request (http://localhost:8080/auth in our case). We should
validate those tokens to ensure they’re generated by the trusted entity. Fortunatelly
WebAuth object we’ve instantiated in
Authenticator has a build in method for that.
So let’s start with extending our authentication service:
parseHash from the auth0.js library would validate and parse tokens and
which determines the duration of the access token. Since it provides the results in a callback
the easiest way would be to return a promise so that it’s easier to use that in store action
which we’re going to add now by extending our session store:
That’s the full implementation of our session store. In that store we have
handleAuehtneication actions which will set through mutations the
state of our session including storing it in local storage.
Now we need to setup a route which would handle our callback redirect:
Finally we need
Auth component will handle user redirect and dispatch
to validate and parse tokens. Finally it redirects to the
Technically authentication is finished at this point but we have no UI indicator that tells whether
user is authenticated and no way to destroy the session. Let’s update the
to address that:
That is the final version of
Navbar component which will render Sign In button and Log Out link
when user is authenticated. Also would dispatch
logout action to destroy user session.
Go ahead and open http://localhost:8080. The authentication is fully functional at this point.