SuperTokens Plugin Profile Base

Create a comprehensive user profile interface for your SuperTokens React application. This plugin provides a foundational profile page with a sectioned layout that other profile-related plugins can extend and customize.

Installation

npm install @supertokens-plugins/profile-base-react

Quick Start

Frontend Configuration

Initialize the plugin in your SuperTokens frontend configuration:

import SuperTokens from "supertokens-auth-react";
import ProfileBasePlugin from "@supertokens-plugins/profile-base-react";

SuperTokens.init({
  appInfo: {
    // your app info
  },
  recipeList: [
    // your recipes
  ],
  experimental: {
    plugins: [
      ProfileBasePlugin.init({
        profilePagePath: "/user/profile", // Optional: defaults to "/user/profile"
        sections: [
          // Optional: initial sections
          {
            id: "basic-info",
            title: "Basic Information",
            component: () => <div>Basic user information goes here</div>,
          },
        ],
      }),
    ],
  },
});

Profile Interface

The plugin provides a complete user profile interface accessible at /user/profile (configurable). This page includes:

• Session Protection: Automatically protected with SessionAuth
• Sectioned Layout: Clean sidebar navigation with content area
• Hash-Based Navigation: URL hash navigation for direct section linking
• Extensible Architecture: Other plugins can register additional sections

Configuration Options

| Option | Type | Default | Description | | ----------------- | ----------------------------------- | ----------------- | ------------------------------------- | | profilePagePath | string | "/user/profile" | Path where the profile page is served | | sections | SuperTokensPluginProfileSection[] | [] | Initial profile sections to display |

Section Structure

Each profile section follows this structure:

type SuperTokensPluginProfileSection = {
  id: string; // Unique identifier
  title: string; // Display name in sidebar
  order: number; // Display order (auto-assigned if not provided)
  icon?: () => React.JSX.Element; // Optional sidebar icon
  component: () => React.JSX.Element; // Section content component
};

Hooks and Utilities

usePluginContext Hook

Access plugin functionality and register new sections:

import { usePluginContext } from "@supertokens-plugins/profile-base-react";

function MyProfileComponent() {
  const { getSections, registerSection, pluginConfig, t } = usePluginContext();

  const currentSections = getSections();

  // Register a new section dynamically
  const addCustomSection = async () => {
    await registerSection(async () => ({
      id: "custom-section",
      title: "Custom Settings",
      icon: () => <SettingsIcon />,
      component: () => <CustomSettingsComponent />,
    }));
  };

  return (
    <div>
      <h2>Profile Management</h2>
      <p>Current sections: {currentSections.length}</p>
      <button onClick={addCustomSection}>Add Custom Section</button>
    </div>
  );
}

Profile Components

UserProfileWrapper

Use the profile wrapper in your own components:

import { UserProfileWrapper } from "@supertokens-plugins/profile-base-react";
import { ThemeProvider } from "@shared/ui";

function CustomProfilePage() {
  return (
    <ThemeProvider>
      <div className="my-custom-layout">
        <header>My App Header</header>
        <main>
          <UserProfileWrapper />
        </main>
      </div>
    </ThemeProvider>
  );
}