Fix broken pages

v3/docs/authentication/authentication-ui/_category_.json

@@ -1,9 +1,4 @@
 {
-	"label": "Quickstart",
-	"collapsible": true,
-	"collapsed": false,
-	"customProps": {
-		"isMainCategory": true
-	},
-	"position": 2
+	"label": "Authentication UI",
+	"position": 7
 }

v3/docs/authentication/email-password/password-hashing/about.mdx

@@ -5,6 +5,9 @@ hide_title: true
 sidebar_position: 1
 ---
 
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
 # Password Hashing
 
 SuperTokens supports two password hashing algorithms:
@@ -34,19 +37,19 @@ This is only applicable if you are self hosting SuperTokens. For our managed ser
 
 We also provide a CLI command to calibrate the password hashing algorithm (for core version >= v3.12):
 
-<ReactRouterVersionTabs>
-<ReactRouterVersionTabs.Tab value="with-docker">
+<Tabs values={ [{label: 'With Docker', value: 'with-docker'}, {label: 'Without Docker', value: 'without-docker'}] }>
+<TabItem value="with-docker">
 
 ```bash
 docker run registry.supertokens.io/supertokens/supertokens-<db_name> supertokens hashingCalibrate --help
 ```
-</ReactRouterVersionTabs.Tab>
+</TabItem>
 
-<ReactRouterVersionTabs.Tab value="without-docker">
+<TabItem value="without-docker">
 
 ```bash
 supertokens hashingCalibrate --help
 ```
 
-</ReactRouterVersionTabs.Tab>
-</ReactRouterVersionTabs>
+</TabItem>
+</Tabs>

v3/docs/authentication/email-password/password-hashing/bcrypt.mdx

@@ -5,6 +5,8 @@ hide_title: true
 sidebar_position: 1
 ---
 
+import { SelfHostingTabs } from "/src/components/Tabs";
+
 # Bcrypt Hashing
 
 :::note
@@ -21,8 +23,8 @@ The number of rounds to use for hashing will be `2^bcrypt_log_rounds`. The highe
 
 ## Changing settings
 
-<BackendTabs>
-<BackendTabs.Tab value="with-docker">
+<SelfHostingTabs>
+<SelfHostingTabs.Tab value="with-docker">
 
 ```bash
 docker run \
@@ -33,9 +35,9 @@ docker run \
     // highlight-end
     -d registry.supertokens.io/supertokens/supertokens-<db_name>
 ```
-</BackendTabs.Tab>
+</SelfHostingTabs.Tab>
 
-<BackendTabs.Tab value="without-docker">
+<SelfHostingTabs.Tab value="without-docker">
 
 ```yaml
 # You need to add the following to the config.yaml file.
@@ -45,8 +47,8 @@ password_hashing_alg: BCRYPT
 bcrypt_log_rounds: 11
 ```
 
-</BackendTabs.Tab>
-</BackendTabs>
+</SelfHostingTabs.Tab>
+</SelfHostingTabs>
 
 :::note
 Changing settings will not affect older passwords. Older passwords will continue to be verified using the same settings as the ones when they were created.
@@ -67,22 +69,22 @@ To find the optimal setting for your hardware, you can run the `hashingCalibrate
     - This is the target time per hash (in milliseconds) that we want to achieve.
     - The default value is `300`
 
-<BackendTabs>
-<BackendTabs.Tab value="with-docker">
+<SelfHostingTabs>
+<SelfHostingTabs.Tab value="with-docker">
 
 ```bash
 docker run registry.supertokens.io/supertokens/supertokens-<db_name> supertokens hashingCalibrate --with_alg=bcrypt
 ```
-</BackendTabs.Tab>
+</SelfHostingTabs.Tab>
 
-<BackendTabs.Tab value="without-docker">
+<SelfHostingTabs.Tab value="without-docker">
 
 ```bash
 supertokens hashingCalibrate --with_alg=bcrypt
 ```
 
-</BackendTabs.Tab>
-</BackendTabs>
+</SelfHostingTabs.Tab>
+</SelfHostingTabs>
 
 The above will produce an output like:
 ```text
@@ -113,4 +115,3 @@ The contents of the `====Final values====` gives you the values of the parameter
 
 The algorithm starts with the minimum recommended value (`11`), and increments it until the average time per hash is greater than the target time. The final value is then equal to the value that yiels the closest time per hash as the target one.
 
-import { BackendTabs } from "/src/components/Tabs";

v3/docs/authentication/email-password/password-reset/embed-in-page.mdx

@@ -13,7 +13,7 @@ import {
 
 # Embed in a page
 
-<UIType.Switch>
+<UIType.Switch />
 <UIType.PrebuiltUIContent>
 
 ## Step 1. Disable the default implementation 
@@ -118,7 +118,6 @@ Not applicable since you do not use our pre built UI.
 :::
 
 </UIType.CustomUIContent>
-</UIType.Switch>
 
 ## Step 3. Changing the website path for reset password UI (optional)
 
@@ -255,7 +254,6 @@ init(
 
 ### Step B. On the frontend
 
-<UIType.Switch>
 <UIType.PrebuiltUIContent>
 
 <FrontendTabs>
@@ -329,4 +327,3 @@ Not applicable since you do not use our pre built UI.
 :::
 
 </UIType.CustomUIContent>
-</UIType.Switch>

v3/docs/authentication/email-password/password-reset/generate-link-manually.mdx

@@ -6,6 +6,7 @@ sidebar_position: 1
 ---
 
 import { BackendTabs } from "/src/components/Tabs";
+import { PythonSyncAsyncCard } from "/src/components/Cards";
 
 # Manually generating a link
 
@@ -59,8 +60,8 @@ func main() {
 </BackendTabs.Tab>
 <BackendTabs.Tab value="python">
 
-<PythonSyncAsyncSubTabs>
-<TabItem value="asyncio">
+<PythonSyncAsyncCard>
+<PythonSyncAsyncCard.Content value="asyncio">
 
 ```python
 from supertokens_python.recipe.emailpassword.asyncio import create_reset_password_link
@@ -73,8 +74,8 @@ async def create_link(user_id: str, email: str):
     else:
         print("user does not exist or is not an email password user")
 ```
-</TabItem>
-<TabItem value="syncio">
+</PythonSyncAsyncCard.Content>
+<PythonSyncAsyncCard.Content value="syncio">
 
 ```python
 from supertokens_python.recipe.emailpassword.syncio import create_reset_password_link
@@ -88,18 +89,20 @@ def create_link(user_id: str, email: str):
         print("user does not exist or is not an email password user")
 ```
 
-</TabItem>
-</PythonSyncAsyncSubTabs>
+</PythonSyncAsyncCard.Content>
+</PythonSyncAsyncCard>
 
 </BackendTabs.Tab>
 </BackendTabs>
 
-<CustomAdmonition type="multi-tenancy">
+
+:::info Multy-tenancy
 
 Notice that the first argument to the function call above is `"public"`. This refers to the default tenant ID that is used in SuperTokens. It means that the generated password reset link can only be consumed by users belonging to the `"public"` tenant.
 
 If you are using our multi tenancy feature, you can pass in the tenantId that contains this user, which you can fetch by getting the user object for this userId.
 
 Finally, the generated link will use the configured `websiteDomain` from the `appInfo` object (in `supertokens.init`), however, you can change the domain of the generated link to match that of the tenant ID.
 
-</CustomAdmonition>
+:::
+

v3/docs/authentication/email-password/sign-in-form/customising-each-form-field.mdx

@@ -97,10 +97,7 @@ supertokensUIInit({
 
 <img alt="Prebuilt form UI with custom labels and placeholder" src="/img/emailpassword/modified-formfields.png" />
 
-</UIType.PrebuiltUIContent>
 
-<UIType.Switch />
-<UIType.PrebuiltUIContent>
 
 ## Setting Default Values
 
@@ -183,10 +180,6 @@ The return value of  `getDefaultValue` function must be a string
 
 :::
 
-</UIType.PrebuiltUIContent>
-
-<UIType.Switch />
-<UIType.PrebuiltUIContent>
 
 ## Changing Optional Error Message
 

v3/docs/authentication/email-password/sign-up-form/customising-each-form-field.mdx

@@ -7,6 +7,7 @@ sidebar_position: 1
 
 import { UIType } from "/src/components/UITypeSwitch";
 import { FrontendTabs } from "/src/components/Tabs";
+import { Question, Answer } from "/src/components/Question";
 
 # Customising each form field
 
@@ -17,6 +18,7 @@ import { FrontendTabs } from "/src/components/Tabs";
 :::caution Not applicable
 This section is not relevant for custom UI, as you will be creating your own UI and already have control over the form fields.
 :::
+
 </UIType.CustomUIContent>
 
 <UIType.PrebuiltUIContent>
@@ -102,11 +104,6 @@ supertokensUIInit({
 
 <img alt="Prebuilt form UI with custom labels and placeholder" src="/img/^{codeImportRecipeName}/custom-field-name-signup-ep.png" />
 
-</UIType.PrebuiltUIContent>
-
-<UIType.Switch />
-
-<UIType.PrebuiltUIContent>
 
 ## Setting Default Values
 
@@ -203,12 +200,6 @@ The return value of  `getDefaultValue` function must be a string
 
 :::
 
-</UIType.PrebuiltUIContent>
-
-<UIType.Switch />
-
-<UIType.PrebuiltUIContent>
-
 ## Changing Optional Error Message
 
 When you try to submit signup form without filling in required / non-optional fields, the SDK will, by default, show an error stating that the `Field is not optional`. You can customize this error message with `nonOptionalErrorMsg` property in the formField config.
@@ -311,11 +302,6 @@ For complex validations of fields, make use of [field validators](/docs/^{docsLi
 
 :::
 
-</UIType.PrebuiltUIContent> 
-
-<UIType.Switch />
-
-<UIType.PrebuiltUIContent>
 
 ## Creating Custom Components
 
@@ -426,11 +412,7 @@ This is not applicable for non React apps. You will have to create your own cust
 
 <img alt="Prebuilt form UI with custom components" src="/img/^{codeImportRecipeName}/signup-with-custom-components.png" />
 
-</UIType.PrebuiltUIContent> 
-
-<UIType.Switch />
 
-<UIType.PrebuiltUIContent>
 
 ## Changing Field Order
 
@@ -541,4 +523,3 @@ This is not applicable for non React apps. You will have to create your own cust
 
 </UIType.PrebuiltUIContent> 
 
-<UIType.Switch />

v3/docs/authentication/social/built-in-providers.mdx

@@ -164,7 +164,7 @@ You will need to build your own UI listing the buttons for each of the social lo
 
 You should add all the built in providers to the `providers` array during the `init` function call on the backend. At a minimum, you will require the client ID and secret (unless the provider supports PKCE flow), but you can also change our default behaviour for any of the in built providers.
 
-<BackendTabs enableCurl enableDashboard>
+<BackendTabs additionalValues={[{value: "dashboard", label: "Dashboard"}, {value: "curl", label: "cURL"}]}>
 <BackendTabs.Tab value="nodejs">
 
 ```tsx

v3/src/components/Tabs/SelfHostingTabs.tsx

@@ -0,0 +1,51 @@
+import Tabs, { Props as TabsProps } from "@theme/Tabs";
+import TabItem, { Props as TabItemProps } from "@theme/TabItem";
+import { useContext, useMemo } from "react";
+import { TabsContextProvider, TabsContext } from "./TabsContex";
+
+const SelfHostingTabsOptions = [
+	{ label: "With Docker", value: "with-docker" },
+	{ label: "Without Docker", value: "without-docker" },
+];
+
+const SelfHostingTabsGroupId = "self-hosting";
+
+type SelfHostingTabsProps = Omit<TabsProps, "values" | "groupId"> & {
+	exclude?: string[];
+};
+
+function SelfHostingTabsRoot(props: SelfHostingTabsProps) {
+	const { children, exclude, ...rest } = props;
+
+	const tabOptions = useMemo(() => {
+		if (exclude)
+			return SelfHostingTabsOptions.filter((v) => !exclude.includes(v.value));
+		return SelfHostingTabsOptions;
+	}, [exclude]);
+
+	return (
+		<TabsContextProvider tabItems={tabOptions}>
+			<Tabs values={tabOptions} groupId={SelfHostingTabsGroupId} {...rest}>
+				{children}
+			</Tabs>
+		</TabsContextProvider>
+	);
+}
+
+function SelfHostingTab({ children, value, ...rest }: TabItemProps) {
+	const { tabItems } = useContext(TabsContext);
+
+	if (!tabItems.find((v) => v.value === value)) {
+		throw new Error(`Invalid tab value ${value}`);
+	}
+
+	return (
+		<TabItem value={value} {...rest}>
+			{children}
+		</TabItem>
+	);
+}
+
+export const SelfHostingTabs = Object.assign(SelfHostingTabsRoot, {
+	Tab: SelfHostingTab,
+});

v3/src/components/Tabs/index.ts

@@ -1,2 +1,3 @@
 export * from "./FrontendTabs";
 export * from "./BackendTabs";
+export * from "./SelfHostingTabs";