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. What is 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. SuperTokens Before we dive into the code, let’s discuss the overall architecture. Architecture SuperTokens is built out of three components: Frontend SDK Backend SDK Core microservice that talks to a database. We’ll use the SuperTokens frontend SDK in our Vue app to add all the auth forms (login, signup, reset password etc). You can also build your own UI using the helper functions from frontend SDKs, but we will focus on the pre-built UI in this blog. The pre-built UI are ReactJS components (provided by the ). In order to use them, we will have to render React components in our VueJS app. supertokens-auth-react library For the backend, we will use the NodeJS SDK provided by SuperTokens . This SDK exposes all of the auth APIs (like , / 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. supertokens-node library /auth/signin auth/signout 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 SDK to all of the auth related routes ( by default), and use a lighter weight, vanilla JS SDK ( ) for all other routes in our app. Finally, we will then use code splitting and lazy importing to make sure that the SDK is only bundled when visiting the routes. supertokens-auth-react /auth/* supertokens-web-js library supertokens-auth-react /auth/* Frontend Integration 1. Setup and Install Create a new Vue + Typescript app: npm init vue@latest In the prompt, select Typescript and Vue Router: Once that’s done, head inside the project and install the following dependencies: npm i --save cors express npm-run-all react supertokens-auth-react react-dom supertokens-node The library will be used on the frontend to render the login UI, and the library will be used on the backend to expose the auth API routes. supertokens-auth-react supertokens-node 2. Call the and function supertokens-auth-react supertokens-web-js init Start by create the component inside folder. This component will render the SuperTokens React component to handle authentication on the frontend: AuthView /src/views <script lang="ts">
    export default {
        // See next sections
    }
</script>

<template>
    <main>
        <div id="authId" />
    </main>
</template> Notice that we have made a element with the . This is where we will render the react components provided by SuperTokens. <div> id="authId" Next, let’s create a file - which is the actual React component that we will be rendering. Inside this file, we will initialize the SDK and use it in the React function. /src/components/Supertokens.tsx supertokens-auth-react render import * as React from "react";
import * as SuperTokens from "supertokens-auth-react";
import * as ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import { Github, Google } from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
   appInfo: {
       appName: "SuperTokens Demo App",
       apiDomain: "http://localhost:3001",
       websiteDomain: "http://localhost:4200",
   },
   recipeList: [
       ThirdPartyEmailPassword.init({
           signInAndUpFeature: {
               providers: [Github.init(), Google.init()],
           }
       }),
       Session.init(),
   ],
});

class SuperTokensReactComponent extends React.Component {
   override render() {
       if (SuperTokens.canHandleRoute()) {
           return SuperTokens.getRoutingComponent();
       }
       return "Route not found";
   }
}

export default SuperTokensReactComponent; The snippet above uses the recipe (social + email / password login). You can choose another recipe as well by following the quick setup section in the . ThirdPartyEmailPassword guides on supertokens.com Next, we will load this inside the component: SuperTokensReactComponent AuthView <script lang="ts">
import * as React from "react";
import * as ReactDOM from "react-dom";
import SuperTokensReactComponent from "../components/Supertokens";

export default{
    mounted(){
        ReactDOM.render(React.createElement(SuperTokensReactComponent),
            document.getElementById('authId'));
    }
    beforeDestroy(){
        ReactDOM.unmountComponentAtNode(document.getElementById('authId') as Element);
    }
}
</script> The above takes care of the related routes. For all the other pages in our app, we want to be able to know if a session exists and extract information from it. To do this, we will use the SDK. We initialize this SDK in our Vue app’s root file / : /auth/* supertokens-web-js src/main.ts import Vue from "vue";
import VueCompositionAPI, { createApp, h } from "@vue/composition-api";
import * as SuperTokens from "supertokens-web-js";
import * as Session from "supertokens-web-js/recipe/session";

import App from "./App.vue";
import router from "./router";

SuperTokens.init({
    appInfo: {
        appName: "SuperTokens Demo",
        apiDomain: "http://localhost:3001",
    },
    recipeList: [Session.init()],
});

Vue.use(VueCompositionAPI);

const app = createApp({
    router,
    render: () => h(App),
});

app.mount("#app"); The config for the call, the and the for both the functions ( and ) should always be the same. Session.init apiDomain appName init supertokens-auth-react supertokens-web-js 3.  Setup Routing to show the Login UI Vue CLI already generates the initial routing for our app inside / . We’ll update this file so that all routes load the component we created earlier: src/router.index.ts /auth/* AuthView import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    base: import.meta.env.BASE_URL,
    routes: [{
        path:'/auth*',
        name:'auth',
        component: () => import('../views/AuthView.vue'),
    }]
})

export default router The path for the component is . The * indicates that any sub / nested paths with /auth as the parent path should be rendered by the component. The component will in turn render the ReactJS component we created earlier which will use the SDK to show the auth UI. AuthView /auth* AuthView AuthView supertokens-auth-react We lazy load the route because the component loads ReactJS as a dependency. Lazy loading makes sure that these dependencies are only injected in the component when you visit the routes. For all of the other routes, these dependencies are not imported thereby maintaining the overall bundle size of the application. /auth AuthView AuthView /auth/* 4. View the Login UI If you now visit , you should see the login UI as shown below: http://localhost:4200/auth Backend Integration You can see the backend quick setup section in our , or even copy the code from . As a summary: docs on supertokens.com our example app You need to initialize the SDK and provide it the (similar to how you did on the frontend). supertokens-node recipeList Then you need to setup , add the SuperTokens and to your app. The SuperTokens exposes all the auth related API routes (like sign in, sign up, sign out etc) to the frontend. CORS middleware errorHandler middleware Finally, you need to provide the (location) of the SuperTokens core. To get started quickly, you can provide it (this is a core that we host for demo purposes). connectionURI https://try.supertokens.com Once you’ve successfully setup your server, you can now try and sign up on the frontend. Session management Inside file we’ll check if the user is authenticated and conditionally render a template. For authenticated users, we can show them a logout button with information about their session (like their ). For unauthenticated users, we can show them a button to route to the page. /src/views/HomeView.vue userId /auth <script lang="ts">
import * as Session from "supertokens-web-js/recipe/session";
export default {
    data() {
        return {
            session: false,
            userId: "",
        };
    },
    mounted() {
        this.getUserInfo();
    },
    methods: {
        redirectToLogin() {
            window.location.href = "/auth";
        },
        async getUserInfo() {
            this.session = await Session.doesSessionExist();
            if (this.session) {
                this.userId = await Session.getUserId();
            }
        },
        async onLogout() {
            await Session.signOut();
            window.location.reload();
        },
    },
};
</script>

<template>
    <main>
        <div class="body">
            <h1>Hello</h1>

            <div v-if="session">
                <span>UserId:</span>
                <h3>{{ userId }}</h3>

                <button @click="onLogout">Sign Out</button>
            </div>
            <div v-else>
                <p>
                    Visit the <a href="https://supertokens.com">SuperTokens tutorial</a> to learn how to build Auth
                    under a day.
                </p>
                <button @click="redirectToLogin">Sign in</button>
            </div>
        </div>
    </main>
</template> To load the component on / we’ll update the file: HomeView /src/router/index.ts const router = new VueRouter({
    // ...
    routes: [{
        path: "/",
        name: "home",
        component: HomeView,
    }, /*...*/],
}); If you now visit , you should see the following page: http://localhost:4200 SuperTokens Core Setup Whilst doing the backend setup, we are using as the for the core. This is a demo core instance hosted by the team of SuperTokens. You can use this for as long as you like, but when you are committed to using SuperTokens, you should switch to a or a of the core. https://try.supertokens.com connectionURI self hosted managed version Conclusion To summarize, we used the ReactJS SDK provided by SuperTokens to show the pre-built login UI for our Vue app. We also optimized the bundle size so that the ReactJS SDK is only loaded for auth related routes. Useful links: Example Vue app Discord community (to ask questions) List of recipes / auth methods Written by the Folks at — hope you enjoyed! We are always available on our . Join us if you have any questions or need any help. SuperTokens Discord server

Google

2022 - HackerNoon Contributor of the Year - Authentication

2022 - HackerNoon Contributor of the Year - Open Source

2022 - HackerNoon Contributor of the Year - Security

See our website for repositories

Nominated for 2022 - HackerNoon Contributor of the Year - Security

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Open Source

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

How SuperTokens' Pre Built UI Can Be Used With VueJS

How SuperTokens' Pre Built UI Can Be Used With VueJS

Too Long; Didn't Read

Companies Mentioned

@supertokens.io

RELATED STORIES