SuperTokens

No results

Help Center›Integration Guides›Using SuperTokens with Single Page Applications (SPAs)

Using SuperTokens with Single Page Applications (SPAs)

Last updated March 1, 2024

Introduction

Single Page Applications (SPAs) offer a dynamic and fluid user experience, but managing authentication in such applications can be challenging. SuperTokens provides a robust solution for handling authentication in SPAs, ensuring secure session management and user authentication without compromising the user experience. This guide will walk you through integrating SuperTokens into your SPA, covering the essentials to get you started.

Prerequisites

Before you begin, ensure you have:

  • A Single Page Application where you wish to implement authentication.
  • Basic knowledge of your SPA's framework (e.g., React, Vue.js, Angular).
  • SuperTokens Core installed and running, as detailed in previous guides.

Step-by-Step Integration

  1. Install SuperTokens Frontend SDK Depending on your SPA's framework, install the appropriate SuperTokens frontend SDK. For example, if you're using React: bashCopy code npm install supertokens-auth-react or bashCopy code yarn add supertokens-auth-react
  2. Configure SuperTokens Initialize SuperTokens in your SPA. This involves setting up the frontend SDK to communicate with the SuperTokens backend and configuring your app's information. javascriptCopy code importSuperTokensfrom"supertokens-auth-react"; importSessionfrom"supertokens-auth-react/recipe/session"; importEmailPasswordfrom"supertokens-auth-react/recipe/emailpassword"; // Import other recipes as neededSuperTokens.init({ appInfo: { appName: "Your SPA Name", apiDomain: "http://localhost:3001", websiteDomain: "http://localhost:3000", }, recipeList: [ EmailPassword.init(), Session.init(), // Add other recipes here ] });
  3. Integrate Authentication UI Components SuperTokens provides ready-to-use UI components for authentication. Integrate these components into your SPA to handle user registration, login, and logout functionalities. javascriptCopy code importReactfrom"react"; import { EmailPasswordAuth } from"supertokens-auth-react/recipe/emailpassword"; functionApp() { return ( <EmailPasswordAuth><div>Your SPA's content here</div></EmailPasswordAuth> ); } exportdefaultApp;
  4. Secure API Calls When making API calls from your SPA, use the Session recipe to ensure these calls are authenticated. The SuperTokens SDK automatically manages session tokens, making this process straightforward. javascriptCopy code import { useEffect } from"react"; import { getAccessTokenPayloadSecurely } from"supertokens-auth-react/recipe/session"; functionfetchData() { useEffect(() => { constsecureCall = async () => { const accessTokenPayload = awaitgetAccessTokenPayloadSecurely(); // Use accessTokenPayload to make secure API calls }; secureCall(); }, []); }
  5. Testing Your Integration
  • Test the registration, login, and logout processes in your SPA to ensure they work as expected.
  • Make sure that API calls from your SPA are authenticated and that protected routes or content are accessible only when the user is logged in.

Conclusion

Integrating SuperTokens with your Single Page Application enhances its security and user management capabilities, providing a seamless authentication experience for your users. By following the steps outlined in this guide, you can implement a robust authentication system in your SPA, allowing you to focus on delivering a dynamic and engaging user experience.

Was this article helpful?