SuperTokens

No results

Help Center›Integration Guides›Integrating SuperTokens with React Applications

Integrating SuperTokens with React Applications

Last updated March 1, 2024

Introduction

As React continues to be a popular choice for developing dynamic web applications, ensuring these applications are secure is paramount. SuperTokens provides a comprehensive authentication solution that can be easily integrated into React applications, offering features such as secure session management, third-party logins, and email verification. This guide will walk you through the steps to integrate SuperTokens into your React application, enhancing its security and functionality.

Prerequisites

Before starting, ensure you have:

  • A React application set up and ready to be enhanced with authentication.
  • Node.js and npm/yarn installed on your development machine.
  • SuperTokens Core installed and running as per the "Installing SuperTokens: A Step-by-Step Guide."

Step-by-Step Integration

  1. Install SuperTokens Frontend SDK Begin by adding the SuperTokens frontend SDK to your React application. This can be done using npm or yarn: bashCopy code npm install supertokens-auth-react or bashCopy code yarn add supertokens-auth-react
  2. Configure SuperTokens After installing the SDK, you need to configure SuperTokens in your application. This involves setting up the frontend SDK to communicate with the SuperTokens backend service. 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: { // Your app info hereappName: "Your App Name", apiDomain: "http://localhost:3001", websiteDomain: "http://localhost:3000", }, recipeList: [ EmailPassword.init(), Session.init(), // Add other recipes here ] });
  3. Add Authentication UI to Your Application SuperTokens provides ready-to-use UI components for authentication. You can add these to your application 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 protected component here</div></EmailPasswordAuth> ); } exportdefaultApp;
  4. Secure API Calls Use the Session recipe from SuperTokens to securely call your backend APIs from your React application. The SDK automatically manages session tokens for you. javascriptCopy code import { useEffect } from"react"; import { getAccessTokenPayloadSecurely } from"supertokens-auth-react/recipe/session"; functionYourComponent() { useEffect(() => { asyncfunctionfetchData() { const accessTokenPayload = awaitgetAccessTokenPayloadSecurely(); // Use accessTokenPayload to make secure API calls } fetchData(); }, []); return<div>Your secure content here</div>; }
  5. Run Your Application With SuperTokens configured and the authentication UI in place, run your React application to see the authentication flow in action. bashCopy code npm start or bashCopy code yarn start
  6. Testing
  • Test the registration and login processes to ensure they work as expected.
  • Verify that protected routes or components are accessible only when the user is authenticated.

Conclusion

Integrating SuperTokens with your React application not only secures your application but also provides a smooth user experience with minimal effort. By following the steps outlined in this guide, you can implement a robust authentication system, allowing you to focus on building the core features of your application.

Was this article helpful?