\n
\n Hello
\n\n\n UserId:\n
\n {{ userId }}
\n\n \n\n
\n \n Visit the\n SuperTokens tutorial to learn\n how to build Auth under a day.\n
\n \nBuilding a secure and scalable authentication system from scratch can be a daunting task. Fortunately, SuperTokens is here to simplify the process and help you add robust authentication to your Vue.js application in no time. In this step-by-step guide, we’ll walk you through the integration of SuperTokens’ pre-built UI into your Vue.js app, allowing you to focus on building the core features of your application.
\nSuperTokens is an open-source project that 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.
\nBefore we dive into the code, let’s discuss the overall architecture.
\nSuperTokens’ architecture is designed to be modular and flexible, consisting of three main components:
\nSuperTokens simplifies authentication integration by separating its components, enabling you to incorporate secure user management into your app effortlessly. This approach shields you from the intricacies of authentication systems, allowing you to focus on your core application logic.
\nThe modular structure of SuperTokens facilitates a straightforward implementation process, which we’ll explore in detail through a step-by-step guide to setting up this powerful authentication solution in your project.
\nSuperTokens offers an easy way to integrate authentication into your Vue.js application using its pre-built UI. Whether you’re using React, Angular, or Vue.js, SuperTokens provides support across various frameworks. For mobile apps, please see the “Using your own UI” section in the SuperTokens documentation.
\nFor the quickest setup, run the following command in your terminal:
\nnpx create-supertokens-app@latest --recipe=thirdpartyemailpasswordThis command automatically sets up your project with SuperTokens’ Third-Party Email Password recipe. Once this is done, you can skip steps 1 and 2 in this section and move directly to setting up the SuperTokens core (Step 3).
\nAlternatively, you can manually integrate SuperTokens by following the steps below.
\nStart by installing the SuperTokens web SDK using the following command:
\nnpm install supertokens-web-jsBefore initializing the SuperTokens SDK, let’s explore how to integrate it into our Vue app.
\nBut first, let’s create a HomeView to have an unprotected route from which we can do the login.
Create a new file named HomeView.vue in your src/views directory and add the following code:
\n Visit the\n SuperTokens tutorial to learn\n how to build Auth under a day.\n
\n \n<script lang=\"ts\">\nimport * as Session from \"supertokens-web-js/recipe/session\";\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n data() {\n return {\n session: false,\n userId: \"\",\n };\n },\n mounted() {\n this.getUserInfo();\n },\n methods: {\n redirectToLogin() {\n window.location.href = \"/auth\";\n },\n async getUserInfo() {\n this.session = await Session.doesSessionExist();\n if (this.session) {\n this.userId = await Session.getUserId();\n }\n },\n async onLogout() {\n await Session.signOut();\n window.location.reload();\n },\n },\n});\n</script>\n\n<template>\n <main>\n <div class=\"body\">\n <h1>Hello</h1>\n\n <div v-if=\"session\">\n <span>UserId:</span>\n <h3>{{ userId }}</h3>\n\n <button @click=\"onLogout\">Sign Out</button>\n </div>\n <div v-else>\n <p>\n Visit the\n <a href=\"https://supertokens.com\">SuperTokens tutorial</a> to learn\n how to build Auth under a day.\n </p>\n <button @click=\"redirectToLogin\">Sign in</button>\n </div>\n </div>\n </main>\n</template>\n\n<style scoped>\n.body {\n text-align: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}\n.user {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: baseline;\n padding: 0.1rem;\n}\nspan {\n margin-right: 0.3rem;\n font-size: large;\n}\nh3 {\n color: #ff3e00;\n}\nh1 {\n color: #ff3e00;\n text-transform: uppercase;\n font-size: 4em;\n font-weight: 100;\n}\nbutton {\n cursor: pointer;\n background-color: #ffb399;\n border: none;\n color: rgb(82, 82, 82);\n padding: 0.75rem;\n margin: 2rem;\n transition: all 0.5s ease-in-out;\n border-radius: 2rem;\n font-size: large;\n}\nbutton:hover {\n transform: scale(1.1);\n background-color: #ff3e00;\n color: white;\n}\n</style>The supertokens-web-js SDK is responsible for session management and providing helper functions to check if a session exists or validate access token claims on the frontend. We will initialize this SDK in the root of your Vue app so that all pages can use it.
We will create an /auth* route in the Vue app to render the pre-built UI, which will also need to be initialized, but only on that route.
Create a new file AuthView.vue. This Vue component will be used to render the auth component:
<script lang=\"ts\">\nimport { defineComponent, onMounted, onUnmounted } from 'vue';\nexport default defineComponent({\n setup() {\n const loadScript = (src: string) => {\n const script = document.createElement('script');\n script.type = 'text/javascript';\n script.src = src;\n script.id = 'supertokens-script';\n script.onload = () => {\n (window as any).supertokensUIInit(\"supertokensui\", {\n appInfo: {\n appName: \"<YOUR_APP_NAME>\",\n apiDomain: \"<YOUR_API_DOMAIN>\",\n websiteDomain: \"<YOUR_WEBSITE_DOMAIN>\",\n apiBasePath: \"/auth\",\n websiteBasePath: \"/auth\"\n },\n recipeList: [\n (window as any).supertokensUIEmailPassword.init(),\n (window as any).supertokensUIThirdParty.init({\n signInAndUpFeature: {\n providers: [\n (window as any).supertokensUIThirdParty.Github.init(),\n (window as any).supertokensUIThirdParty.Google.init(),\n (window as any).supertokensUIThirdParty.Facebook.init(),\n (window as any).supertokensUIThirdParty.Apple.init(),\n ]\n }\n }),\n (window as any).supertokensUISession.init(),\n ],\n });\n };\n document.body.appendChild(script);\n };\n\n onMounted(() => {\n loadScript('https://cdn.jsdelivr.net/gh/supertokens/prebuiltui@v0.47.0/build/static/js/main.00ec3e91.js');\n });\n\n onUnmounted(() => {\n const script = document.getElementById('supertokens-script');\n if (script) {\n script.remove();\n }\n });\n },\n});\n</script>\n\n<template>\n <div id=\"supertokensui\" />\n</template>In the loadScript function, we provide the SuperTokens config for the UI. This includes email-password, session, and social login recipes with GitHub, Google, Facebook, and Apple login buttons.
Next, initialize the supertokens-web-js SDK in your Vue app’s main.ts file. This will provide session management across your entire application.
Copy and paste this in your main.ts:
import { createApp } from \"vue\";\nimport SuperTokens from \"supertokens-web-js\";\nimport Session from \"supertokens-web-js/recipe/session\";\nimport App from \"./App.vue\";\nimport router from \"./router\";\n\nSuperTokens.init({\n appInfo: {\n appName: \"<YOUR_APP_NAME>\",\n apiDomain: \"<YOUR_API_DOMAIN>\",\n apiBasePath: \"/auth\",\n },\n recipeList: [\n Session.init(),\n ],\n});\n\nconst app = createApp(App);\n\napp.use(router);\napp.mount(\"#app\");Update your Vue router so that all auth-related requests load the AuthView component.
import { createRouter, createWebHistory } from \"vue-router\";\\\nimport HomeView from \"../views/HomeView.vue\";\\\nimport AuthView from \"../views/AuthView.vue\";\n\nconst router = createRouter({\\\n history: createWebHistory(import.meta.env.BASE_URL),\\\n routes: [\\\n {\\\n path: \"/\",\\\n name: \"home\",\\\n component: HomeView,\\\n },\\\n {\\\n path: \"/auth\",\\\n name: \"auth\",\\\n component: AuthView,\\\n },\\\n ],\\\n});\n\nexport default router;You can view the login UI by visiting /auth in your browser. You can also see all the designs of the pre-built UI for each page on this link.\n
At this stage, you’ve successfully integrated your front end with SuperTokens. The next section will guide you through setting up your backend.
\nSuperTokens provides a powerful backend authentication service that can be easily integrated with various backend frameworks like Node.js, GoLang, Python, and others. This guide will walk you through setting up SuperTokens with Node.js, specifically using Express.
\nBegin by installing the SuperTokens Node SDK via npm:
\nnpm install supertokens-nodeTo get started, you need to initialize SuperTokens in your server’s initialization file. Here’s how you can do it with Node.js:
\nimport supertokens from \"supertokens-node\";\nimport Session from \"supertokens-node/recipe/session\";\nimport EmailPassword from \"supertokens-node/recipe/emailpassword\";\nimport ThirdParty from \"supertokens-node/recipe/thirdparty\";\n\n\nsupertokens.init({\n framework: \"express\",\n supertokens: {\n // Replace with your core instance URL or self-hosted core\n connectionURI: \"https://try.supertokens.com\",\n // apiKey: \"<API_KEY(if configured)>\",\n },\n appInfo: {\n // Information about your app\n appName: \"<YOUR_APP_NAME>\",\n apiDomain: \"<YOUR_API_DOMAIN>\",\n websiteDomain: \"<YOUR_WEBSITE_DOMAIN>\",\n apiBasePath: \"/auth\", // The base path for SuperTokens APIs\n websiteBasePath: \"/auth\" // The base path where the login UI will be rendered\n },\n recipeList: [\n EmailPassword.init(),\n ThirdParty.init({\n // Add third-party login providers in the next step\n }),\n Session.init(), // Initializes session features\n ]\n});\nTo enable third-party authentication, populate the providers array with the relevant OAuth providers. Here’s an example:
\nCopy this code and replace SuperTokens.init() in the above server initialization file:
\nWith just a few lines of code, you’ve added a fully functional, pre-built authentication UI to your Vue.js application. SuperTokens allows you to integrate email/password and social logins easily, and its modular architecture ensures that it’s flexible enough for your specific use case.
\nFor more advanced use cases, such as customizing the login UI or handling multiple recipes in parallel, be sure to check out the official SuperTokens documentation.
\nSuperTokens.init({\n appInfo: {\n apiDomain: \"<YOUR_API_DOMAIN>\",\n appName: \"<YOUR_APP_NAME>\",\n websiteDomain: \"<YOUR_WEBSITE_DOMAIN>\",\n },\n recipeList: [\n EmailPassword.init()\n ThirdParty.init({\n signInAndUpFeature: {\n providers: [\n {\n config: {\n thirdPartyId: \"google\",\n clients: [{\n clientId: \"YOUR_GOOGLE_CLIENT_ID\",\n clientSecret: \"YOUR_GOOGLE_CLIENT_SECRET\"\n }]\n }\n },\n {\n config: {\n thirdPartyId: \"github\",\n clients: [{\n clientId: \"YOUR_GITHUB_CLIENT_ID\",\n clientSecret: \"YOUR_GITHUB_CLIENT_SECRET\"\n }]\n }\n },\n {\n config: {\n thirdPartyId: \"apple\",\n clients: [{\n clientId: \"YOUR_APPLE_CLIENT_ID\",\n additionalConfig: {\n keyId: \"YOUR_KEY_ID\",\n privateKey: \"YOUR_PRIVATE_KEY\",\n teamId: \"YOUR_TEAM_ID\"\n }\n }]\n }\n }\n ],\n }\n }),\n \n ]\n});Ensure that you replace the placeholder values (“YOUR_GOOGLE_CLIENT_ID”, “YOUR_GOOGLE_CLIENT_SECRET”, etc.) with your actual OAuth credentials. For production, make sure to use your own OAuth keys.
\nYou need to set up middleware in your Express application to handle SuperTokens’ APIs and manage CORS. Add this configuration before all your routes in your backend’s index.ts:
\nimport express from \"express\";\nimport cors from \"cors\";\nimport supertokens from \"supertokens-node\";\nimport { middleware } from \"supertokens-node/framework/express\";\n\n\nlet app = express();\n\n\napp.use(cors({\n origin: \"<YOUR_WEBSITE_DOMAIN>\",\n allowedHeaders: [\"content-type\", ...supertokens.getAllCORSHeaders()],\n credentials: true,\n}));\n\n\n// IMPORTANT: CORS should be configured before the SuperTokens middleware.\napp.use(middleware());\n\n\n// Define your API routes hereThis middleware setup adds several key APIs, including:
\nTo properly handle errors related to SuperTokens, add the following error handler middleware after your routes in your backend’s index.ts:
\nimport { errorHandler } from \"supertokens-node/framework/express\";\nimport express from \"express\";\n\n\nlet app = express();\n\n\n// Define your API routes here\n\n\n// Add the SuperTokens error handler after your routes\napp.use(errorHandler());\n\n\n// Your custom error handler\napp.use((err, req, res, next) => {\n // Handle errors\n});During the backend setup, we are using https://try.supertokens.com as the connectionURI for the Core, which is a demo instance hosted by the SuperTokens team. This instance is available for as long as needed, but once you decide to fully integrate SuperTokens into your application, it’s recommended to transition to either a self-hosted or managed version of the Core.
\nFor a self-hosted setup, you can deploy the Core using Docker or through cloud platforms like AWS. This option offers greater control over your infrastructure, allowing you to customize the deployment according to your specific needs.
\nAlternatively, SuperTokens offers a managed service, where they handle the hosting and maintenance of the Core for you. This option provides the advantage of reduced operational overhead, as the SuperTokens team manages updates, scaling, and security for you.
\nBy following this guide, you’ve successfully integrated SuperTokens’ pre-built authentication UI into your Vue.js application. With this setup in place, you can now concentrate on developing your app’s core features, while SuperTokens takes care of the complexities of user authentication.
\nFor additional information and advanced use cases, be sure to explore the detailed documentation available on the SuperTokens website. Should you have any questions or require further assistance, the SuperTokens team is always ready to help.
","frontmatter":{"date":"September 01, 2024","title":"How to use SuperTokens' pre built UI with VueJS","cover":"vue-st.png","author":"Mostafa Ibrahim","description":"A step by step guide on how to integrate SuperTokens' pre built UI in a VueJS app"},"fields":{"slug":"/how-to-use-supertokens-pre-built-ui-with-vuejs/"}},"site":{"siteMetadata":{"title":"SuperTokens Blog"}}},"pageContext":{"id":"80009dbd-007b-5fc8-99bf-bc56e4dbb596","fields__slug":"/how-to-use-supertokens-pre-built-ui-with-vuejs/","__params":{"fields__slug":"how-to-use-supertokens-pre-built-ui-with-vuejs"}}}, "staticQueryHashes": []}