supertokens · bcbogdan · May 25, 2025 · May 23, 2025 · May 23, 2025
diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,5 @@ scripts/code-type-checking/dart/snippets/*
 
 
 tmp/*
+
+.opencode/*
diff --git a/OpenCode.md b/OpenCode.md
@@ -0,0 +1,35 @@
+# SuperTokens Documentation Development Guide
+
+## Build & Development Commands
+
+- Start dev server: `npm run start`
+- Build for production: `npm run build`
+- Lint code: `npm run lint:prettier`
+- Validate content: `npm run lint:vale`
+- Run tests: `npm run test`
+- Run single test: `npm run test -- -t "test name"`
+- Watch tests: `npm run test:watch`
+- Check code blocks: `npm run check-code-blocks <language>`
+
+## Code Style Guidelines
+
+- Use TypeScript for all new code
+- Follow Docusaurus conventions for MDX files
+- Use American English spelling
+- Write in active voice and direct language
+- Use 2-space indentation
+- Import order: React/external libraries first, then internal components
+- Error handling: Use try/catch blocks with specific error messages
+- Naming: camelCase for variables/functions, PascalCase for components/classes
+- Avoid marketing language and subjective statements
+- Organize content with clear headings and logical structure
+- Define acronyms on first use
+- Use functional components with hooks for React code
+- Do not import React components inside MDX files. Add them to the `MDXComponents` object in `src/theme/MDXComponents.tsx`
+
+## Project Structure
+
+- `/docs`: MDX content files
+- `/src`: React components and website functionality
+- `/scripts`: Build and validation scripts
+
diff --git a/...onal-verification/attack-protection-suite/_blocks/anomaly-detection-request.mdx b/...onal-verification/attack-protection-suite/_blocks/anomaly-detection-request.mdx
@@ -1,5 +1,3 @@
-import { H2, H3, H4 } from "/src/components/Typography";
-import { HTTPRequestCard } from "/src/components/Cards";
 
 <HTTPRequestCard.DetailsModalHeader>
   <HTTPRequestCard.DetailsModalDescription>

diff --git a/docs/additional-verification/attack-protection-suite/initial-setup.mdx b/docs/additional-verification/attack-protection-suite/initial-setup.mdx
@@ -6,11 +6,7 @@ hide_title: true
 description: Set up Attack Protection Suite in your **SuperTokens** integration
 ---
 
-import { BackendTabs } from "/src/components/Tabs";
-import { HTTPRequestCard } from "/src/components/Cards";
 
-import { DescriptionText } from "/src/components/DescriptionText";
-import { Separator } from "/src/components/Separator";
 import AnomalyDetectionRequest from "./_blocks/anomaly-detection-request.mdx";
 
 # Initial setup

diff --git a/docs/additional-verification/email-verification/changing-style.mdx b/docs/additional-verification/email-verification/changing-style.mdx
@@ -5,7 +5,6 @@ sidebar_position: 7
 description: Update SuperTokens component styles using CSS for customized UI appearance.
 ---
 
-import { FrontendPrebuiltUITabs } from "/src/components/Tabs";
 
 # Customize the pre-built UI
 

diff --git a/docs/additional-verification/email-verification/embed-in-page.mdx b/docs/additional-verification/email-verification/embed-in-page.mdx
@@ -7,10 +7,6 @@ description: >-
   Embed the email verification UI in a different page.
 ---
 
-import {
-  FrontendPrebuiltUITabs,
-  BackendTabs,
-} from "/src/components/Tabs";
 
 # Embed in a page 
 

diff --git a/docs/additional-verification/email-verification/hooks-and-overrides.mdx b/docs/additional-verification/email-verification/hooks-and-overrides.mdx
@@ -6,9 +6,6 @@ description: >-
   Add custom logic in the email verification flow by overriding the SuperTokens APIs.
 ---
 
-import {
-  BackendTabs,
-} from "/src/components/Tabs";
 
 # Hooks and overrides
 

diff --git a/docs/additional-verification/email-verification/initial-setup.mdx b/docs/additional-verification/email-verification/initial-setup.mdx
@@ -8,18 +8,6 @@ description: >-
   routes.
 ---
 
-import { AccountTypeCard } from "/src/components";
-import {
-  FrontendPrebuiltUITabs,
-  FrontendCustomUITabs,
-  BackendTabs,
-} from "/src/components/Tabs";
-
-import { AppInfoForm } from "/src/components/Forms";
-import { NpmOrScriptsCard, MobileFrameworksCard, NodeFrameworksCard, PythonFrameworksCard, GoFrameworksCard } from "/src/components/Cards";
-import { Question, Answer } from "/src/components/Question";
-import { OAuthEmailVerificationCallout } from "/src/components/Callouts"
-
 # Enable email verification
 
 

diff --git a/docs/additional-verification/email-verification/introduction.mdx b/docs/additional-verification/email-verification/introduction.mdx
@@ -8,7 +8,6 @@ description: >-
   routes.
 ---
 
-import { ReferenceCard } from "/src/components";
 
 # Email verification
 

diff --git a/docs/additional-verification/email-verification/manual-actions.mdx b/docs/additional-verification/email-verification/manual-actions.mdx
@@ -6,9 +6,6 @@ description: >-
   See how you can directly generate email verification links and set emails as verified through manual actions.
 ---
 
-import { BackendTabs } from "/src/components/Tabs";
-import { PythonSyncAsyncCard } from "/src/components/Cards";
-import { ContextCondition } from "/src/components";
 
 # Manual actions
 

diff --git a/docs/additional-verification/email-verification/protecting-routes.mdx b/docs/additional-verification/email-verification/protecting-routes.mdx
@@ -7,11 +7,7 @@ description: >-
   secure access.
 ---
 
-import {  FrontendPrebuiltUITabs, FrontendCustomUITabs, BackendTabs } from "/src/components/Tabs";
 
-import { AppInfoForm } from "/src/components/Forms";
-import { NpmOrScriptsCard, MobileFrameworksCard, NodeFrameworksCard, PythonFrameworksCard, GoFrameworksCard } from "/src/components/Cards";
-import { Question, Answer } from "/src/components/Question";
 
 # Protecting backend and frontend routes
 

diff --git a/docs/additional-verification/mfa/email-sms-otp/embed.mdx b/docs/additional-verification/mfa/email-sms-otp/embed.mdx
@@ -8,8 +8,6 @@ description: >-
   application.
 ---
 
-import { FrontendPrebuiltUITabs, ReactRouterVersionTabs } from "/src/components/Tabs";
-import { Question, Answer } from "/src/components/Question";
 
 # Embed the pre-built UI component
 

diff --git a/docs/additional-verification/mfa/email-sms-otp/otp-for-all-users.mdx b/docs/additional-verification/mfa/email-sms-otp/otp-for-all-users.mdx
@@ -8,15 +8,6 @@ description: >-
   an OTP challenge.
 ---
 
-import {
-  FrontendPrebuiltUITabs,
-  FrontendCustomUITabs,
-  BackendTabs,
-} from "/src/components/Tabs";
-import { NpmOrScriptsCard, MobileFrameworksCard, PythonSyncAsyncCard } from "/src/components/Cards";
-import { Question, Answer } from "/src/components/Question";
-import { AppInfoForm } from "/src/components/Forms";
-import { ContextCondition } from "/src/components";
 
 # OTP required for all users
 

diff --git a/docs/additional-verification/mfa/email-sms-otp/otp-for-opt-in-users.mdx b/docs/additional-verification/mfa/email-sms-otp/otp-for-opt-in-users.mdx
@@ -8,7 +8,6 @@ description: >-
   defined criteria.
 ---
 
-import { BackendTabs } from "/src/components/Tabs";
 
 # OTP for specific users
 

diff --git a/docs/additional-verification/mfa/hooks-and-overrides.mdx b/docs/additional-verification/mfa/hooks-and-overrides.mdx
@@ -7,9 +7,6 @@ description: >-
   tenant-specific configurations.
 ---
 
-import {
-  FrontendPrebuiltUITabs,
-} from "/src/components/Tabs";
 
 # Hooks and overrides
 

diff --git a/docs/additional-verification/mfa/initial-setup.mdx b/docs/additional-verification/mfa/initial-setup.mdx
@@ -8,16 +8,6 @@ description: >-
   tenant-specific configurations.
 ---
 
-import { BackendTabs, TenantType } from "/src/components";
-import { PythonSyncAsyncCard } from "/src/components/Cards";
-import {
-  FrontendPrebuiltUITabs,
-  FrontendCustomUITabs,
-} from "/src/components/Tabs";
-
-import { NpmOrScriptsCard, MobileFrameworksCard } from "/src/components/Cards";
-import { AppInfoForm } from "/src/components/Forms";
-import { Question, Answer } from "/src/components/Question";
 
 # Initial setup
 

diff --git a/docs/additional-verification/mfa/introduction.mdx b/docs/additional-verification/mfa/introduction.mdx
@@ -8,7 +8,6 @@ description: >-
   user authentication preferences.
 ---
 
-import { ReferenceCard } from "/src/components";
 
 # Multi-factor authentication
 

diff --git a/docs/additional-verification/mfa/legacy-mfa/backend-setup/first-factor.mdx b/docs/additional-verification/mfa/legacy-mfa/backend-setup/first-factor.mdx
@@ -8,9 +8,6 @@ description: >-
   frameworks.
 ---
 
-import { AppInfoForm } from "/src/components/Forms";
-import { BackendTabs } from "/src/components/Tabs";
-import { NodeFrameworksCard, PythonFrameworksCard, GoFrameworksCard } from "/src/components/Cards";
 
 # Setting up the 1st factor
 

diff --git a/docs/additional-verification/mfa/legacy-mfa/backend-setup/protecting-api.mdx b/docs/additional-verification/mfa/legacy-mfa/backend-setup/protecting-api.mdx
@@ -8,7 +8,6 @@ description: >-
   programming languages.
 ---
 
-import { BackendTabs } from "/src/components/Tabs";
 
 # Protecting API routes
 

diff --git a/docs/additional-verification/mfa/legacy-mfa/backend-setup/second-factor.mdx b/docs/additional-verification/mfa/legacy-mfa/backend-setup/second-factor.mdx
@@ -8,9 +8,6 @@ description: >-
   recipe.
 ---
 
-import { BackendTabs } from "/src/components/Tabs";
-import { AppInfoForm } from "/src/components/Forms";
-import { NodeFrameworksCard, PythonFrameworksCard, GoFrameworksCard } from "/src/components/Cards";
 
 # Setting up the 2nd factor
 

diff --git a/docs/additional-verification/mfa/legacy-mfa/frontend-custom.mdx b/docs/additional-verification/mfa/legacy-mfa/frontend-custom.mdx
@@ -8,8 +8,6 @@ description: >-
   and session management.
 ---
 
-import { AppInfoForm } from "/src/components/Forms";
-import { NpmOrScriptsCard } from "/src/components/Cards";
 
 # Using a custom UI
 

diff --git a/docs/additional-verification/mfa/legacy-mfa/prebuilt-ui/init.mdx b/docs/additional-verification/mfa/legacy-mfa/prebuilt-ui/init.mdx
@@ -8,7 +8,6 @@ description: >-
   MultiFactorAuth using SuperTokens.
 ---
 
-import { AppInfoForm } from "/src/components/Forms";
 
 :::info Caution
 This is the legacy method of implementing MFA. It has several [disadvantages](../legacy-vs-new) compared to using our MFA recipe.

diff --git a/docs/additional-verification/mfa/legacy-mfa/prebuilt-ui/protecting-routes.mdx b/docs/additional-verification/mfa/legacy-mfa/prebuilt-ui/protecting-routes.mdx
@@ -1,6 +1,6 @@
 ---
 id: protecting-routes
-title: 3) Protecting routes
+title: 3. Protecting routes
 hide_title: true
 sidebar_position: 3
 description: >-

diff --git a/docs/additional-verification/mfa/legacy-mfa/prebuilt-ui/showing-login-ui.mdx b/docs/additional-verification/mfa/legacy-mfa/prebuilt-ui/showing-login-ui.mdx
@@ -1,12 +1,11 @@
 ---
 id: showing-login-ui
-title: 2) Showing the first and second factor UI
+title: 2. Showing the first and second factor UI
 hide_title: true
 sidebar_position: 2
 description: Implement a custom second factor UI for legacy multi-factor authentication.
 ---
 
-import { AppInfoForm } from "/src/components/Forms";
 
 :::info Caution
 This is the legacy method of implementing MFA. It has several [disadvantages](../legacy-vs-new) compared to using our MFA recipe.

diff --git a/docs/additional-verification/mfa/migration/legacy-to-new.mdx b/docs/additional-verification/mfa/migration/legacy-to-new.mdx
@@ -8,7 +8,6 @@ description: >-
   changes for enhanced security.
 ---
 
-import { BackendTabs } from "/src/components/Tabs";
 
 
 # Migration from legacy MFA to new MFA method

diff --git a/docs/additional-verification/mfa/migration/old-sdk-to-new.mdx b/docs/additional-verification/mfa/migration/old-sdk-to-new.mdx
@@ -8,7 +8,6 @@ description: >-
   transition for existing users.
 ---
 
-import { BackendTabs } from "/src/components/Tabs";
 
 # Migration from an older SuperTokens SDK to a newer one
 

diff --git a/docs/additional-verification/mfa/protect-routes.mdx b/docs/additional-verification/mfa/protect-routes.mdx
@@ -7,13 +7,6 @@ description: >-
   Multi-Factor Authentication (MFA).
 ---
 
-import {
-  FrontendPrebuiltUITabs,
-  FrontendCustomUITabs,
-  BackendTabs,
-} from "/src/components/Tabs";
-import { AppInfoForm } from "/src/components/Forms";
-import {  NodeFrameworksCard, PythonFrameworksCard, GoFrameworksCard, NpmOrScriptsCard, MobileFrameworksCard } from "/src/components/Cards";
 
 import { TokensCallout, ContextCondition } from "/src/components";
 

diff --git a/docs/additional-verification/mfa/step-up-auth.mdx b/docs/additional-verification/mfa/step-up-auth.mdx
@@ -7,12 +7,6 @@ description: >-
   Implement step-up authentication using SuperTokens MFA recipe.
 ---
 
-import { MobileFrameworksCard, NpmOrScriptsCard, NodeFrameworksCard, PythonFrameworksCard } from "/src/components/Cards";
-import {
-  FrontendPrebuiltUITabs,
-  FrontendCustomUITabs,
-  BackendTabs,
-} from "/src/components/Tabs";
 
 # Implement step-up authentication
 

diff --git a/docs/additional-verification/mfa/totp/embed.mdx b/docs/additional-verification/mfa/totp/embed.mdx
@@ -6,8 +6,6 @@ description: >-
   Embed and customize a prebuilt TOTP UI component.
 ---
 
-import { FrontendPrebuiltUITabs, ReactRouterVersionTabs } from "/src/components/Tabs";
-import { Question, Answer } from "/src/components/Question";
 
 # Embed the pre-built UI component
 

diff --git a/docs/additional-verification/mfa/totp/totp-for-all-users.mdx b/docs/additional-verification/mfa/totp/totp-for-all-users.mdx
@@ -7,11 +7,6 @@ description: >-
   security.
 ---
 
-import { TenantType } from "/src/components";
-import { BackendTabs, FrontendCustomUITabs, FrontendPrebuiltUITabs } from "/src/components/Tabs";
-import { PythonSyncAsyncCard, NpmOrScriptsCard, MobileFrameworksCard } from "/src/components/Cards";
-import { Question, Answer } from "/src/components/Question";
-import { AppInfoForm } from "/src/components/Forms";
 
 # TOTP required for all users
 

diff --git a/docs/additional-verification/mfa/totp/totp-for-opt-in-users.mdx b/docs/additional-verification/mfa/totp/totp-for-opt-in-users.mdx
@@ -8,15 +8,6 @@ description: >-
   criteria.
 ---
 
-import {
-  FrontendCustomUITabs,
-  FrontendPrebuiltUITabs,
-  BackendTabs,
-} from "/src/components/Tabs";
-import { TenantType } from "/src/components";
-import { AppInfoForm } from "/src/components/Forms";
-import { ContextCondition } from "/src/components";
-import { PythonSyncAsyncCard, NpmOrScriptsCard, MobileFrameworksCard } from "/src/components/Cards";
 
 
 # Require TOTP for specific users

diff --git a/docs/additional-verification/session-verification/_blocks/session-object.mdx b/docs/additional-verification/session-verification/_blocks/session-object.mdx
@@ -1,7 +1,4 @@
 
-import { Box } from "@radix-ui/themes";
-import { BackendTabs } from "/src/components/Tabs";
-
 <BackendTabs>
 
 <BackendTabs.TabItem value="nodejs">

diff --git a/docs/additional-verification/session-verification/claim-validation.mdx b/docs/additional-verification/session-verification/claim-validation.mdx
@@ -7,21 +7,6 @@ description: >-
    Validate your resources based on claims that get attached to the session.
 ---
 
-import {
-  FrontendPrebuiltUITabs,
-  FrontendCustomUITabs,
-  BackendTabs,
-  ReactRouterVersionTabs,
-} from "/src/components/Tabs";
-import {
-  NpmOrScriptsCard,
-  MobileFrameworksCard,
-  PythonSyncAsyncCard,
-  NodeFrameworksCard,
-  PythonFrameworksCard,
-  GoFrameworksCard,
-} from "/src/components/Cards";
-import { ContextCondition } from "/src/components";
 
 # Claim validation
 

diff --git a/docs/additional-verification/session-verification/protect-api-routes.mdx b/docs/additional-verification/session-verification/protect-api-routes.mdx
@@ -7,10 +7,6 @@ description: >-
   function, and manual JWT verification.
 ---
 
-import { AppInfoForm } from '/src/components/Forms';
-import { BackendTabs } from "/src/components/Tabs";
-import { TokensCallout } from "/src/components";
-import { NodeFrameworksCard, PythonFrameworksCard, GoFrameworksCard } from "/src/components/Cards";
 
 import SessionObject from "./_blocks/session-object.mdx";
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,3 +40,5 @@ scripts/code-type-checking/dart/snippets/*


		tmp/*

		.opencode/*
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,6 @@ sidebar_position: 7 @@
     description: Update SuperTokens component styles using CSS for customized UI appearance.
     ---
-    import { FrontendPrebuiltUITabs } from "/src/components/Tabs";
     # Customize the pre-built UI
@@ Expand Down @@