Supertokens

Stay updated on the status of all your company's support tickets.

Customer portal

SuperTokens

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.

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."


Begin by adding the SuperTokens frontend SDK to your React application. This can be done using npm or yarn:
bashCopy code



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 ]
});


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; 


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>; }



With SuperTokens configured and the authentication UI in place, run your React application to see the authentication flow in action.
bashCopy code


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.

This guide provides step-by-step instructions on integrating SuperTokens authentication into a React application, including code snippets and best practices for a seamless integration.

Integrating SuperTokens with React Applications

In the modern web development landscape, securing your API is crucial. SuperTokens offers a comprehensive authentication solution that can be seamlessly integrated into Node.js APIs, providing secure session management, user authentication, and more. This guide will walk you through the process of adding SuperTokens authentication to your Node.js API, step by step.

Basic knowledge of creating APIs with Node.js.

SuperTokens Core installed and running as outlined in the "Installing SuperTokens: A Step-by-Step Guide."


Start by adding the SuperTokens Node.js SDK to your project. Use npm or yarn to install the package:
bashCopy code



After installing the SDK, configure SuperTokens in your Node.js application. This involves setting up the SDK to communicate with the SuperTokens Core service and defining your app information.
javascriptCopy code


constSuperTokens = require("supertokens-node"); const { middleware } = require("supertokens-node/framework/express"); const express = require("express"); const app = express(); SuperTokens.init({ framework: "express", supertokens: {
        connectionURI: "http://localhost:3567", },
    appInfo: {
        appName: "Your App", apiDomain: "http://localhost:3000", websiteDomain: "http://localhost:3000", },
    recipeList: [
        // Initialize your chosen recipes here ]
});

app.use(middleware()); 


SuperTokens simplifies the addition of authentication routes to your API. Utilize the SDK to create endpoints for user registration, login, and logout functionalities.
javascriptCopy code


// Example route for user registration app.post("/auth/signup", async (req, res) => {
    // Your signup logic here });

// Example route for user login app.post("/auth/login", async (req, res) => {
    // Your login logic here });

// Example route for user logout app.post("/auth/logout", async (req, res) => {
    // Your logout logic here });



Protect your API endpoints using SuperTokens' session verification. This ensures that only authenticated users can access certain parts of your API.
javascriptCopy code


const { verifySession } = require("supertokens-node/recipe/session/framework/express"); app.get("/protected", verifySession(), (req, res) => {
    res.json({ message: "This is a protected route." });
});



With SuperTokens configured and your authentication routes in place, start your Node.js API and test the authentication flow.
bashCopy code


Integrating SuperTokens with your Node.js API adds a layer of security and user management with minimal hassle. By following the steps outlined in this guide, you can implement a robust authentication system, allowing you to focus on developing the core functionalities of your API.

A comprehensive tutorial on how to secure a Node.js API using SuperTokens, covering both setup and implementation details, as well as how to handle authentication tokens in Node.js environments.

Node.js and SuperTokens: Adding Authentication to Your AP

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.

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.


Depending on your SPA's framework, install the appropriate SuperTokens frontend SDK. For example, if you're using React:
bashCopy code



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 ]
});



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; 


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(); }, []);
}


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.

This article discusses the special considerations and practices for implementing SuperTokens in single-page applications, including handling session management and token refresh in a way that enhances user experience and security.

Integration Guides

Integrating SuperTokens with React Applications

Node.js and SuperTokens: Adding Authentication to Your AP

Using SuperTokens with Single Page Applications (SPAs)