Building your own auth service can be tedious, complex, and time-consuming. To save time, developers often resort to using third-party auth services for auth. This post will guide you on how to add authentication to a VueJS app with SuperTokens.
Join the DZone community and get the full member experience.
SuperTokens is an open-source project which enables you to add auth to your app quickly. It gives you a pre-built auth UI and backend APIs for an end-to-end integration experience.
Before we dive into the code, let’s discuss the overall architecture.
SuperTokens is built out of three components:
The pre-built UI are ReactJS components (provided by the supertokens-auth-react library). In order to use them, we will have to render React components in our VueJS app.
For the backend, we will use the NodeJS SDK provided by SuperTokens (supertokens-node library). This SDK exposes all of the auth APIs (like /auth/signin, /auth/signout etc) via a middleware, for the frontend to call. When these APIs are called, the SDK will talk to the SuperTokens Core microservice to read and write information to the database.
The SuperTokens core service can be either self-hosted (and connected to your own DB), or be hosted by the team behind SuperTokens (sign up on supertokens.com).
In order to keep the app’s bundle size small, we will limit the use of the supertokens-auth-react SDK to all of the auth related routes (/auth/* by default), and use a lighter weight, vanilla JS SDK (supertokens-web-js library) for all other routes in our app. Finally, we will then use code splitting and lazy importing to make sure that the supertokens-auth-react SDK is only bundled when visiting the /auth/* routes.
Create a new Vue + Typescript app:
In the prompt, select Typescript and Vue Router:
Once that’s done, head inside the project and install the following dependencies:
The supertokens-auth-react library will be used on the frontend to render the login UI and the supertokens-node library will be used on the backend to expose the auth API routes.
