From 4b13ae7d06828a1429632499ab62ed65f6805784 Mon Sep 17 00:00:00 2001
From: Roy Anger <roy@clerk.dev>
Date: Mon, 16 Dec 2024 16:32:38 -0500
Subject: [PATCH] Added appearance prop samples for hiding unsupported options
 (#1777)

Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>
Co-authored-by: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com>
---
 .../references/chrome-extension/sync-host.mdx | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/docs/references/chrome-extension/sync-host.mdx b/docs/references/chrome-extension/sync-host.mdx
index 547c22ecba..592ccce0fe 100644
--- a/docs/references/chrome-extension/sync-host.mdx
+++ b/docs/references/chrome-extension/sync-host.mdx
@@ -91,6 +91,34 @@ Clerk allows you to sync the authentication state from your web app to your Chro
   }
   ```
 
+  ### Hide unsupported authentication methods
+
+  When using the Sync Host feature, authentication methods that you want to use in your web app [may not be fully supported in the Chrome Extension environment](/docs/references/chrome-extension/overview#authentication-options). To hide unsupported methods in your Chrome Extension, you can use the [`appearance`](https://clerk.com/docs/customization/overview) prop with your extension's `<SignUp>` and `<SignIn>` components as demonstrated in the following examples.
+
+  <CodeBlockTabs options={["<SignUp>", "<SignIn>"]}>
+    ```tsx {{ filename: 'src/popup/pages/sign-up.tsx', mark: [[3, 7]] }}
+    <SignUp
+      appearance={{
+        elements: {
+          socialButtonsRoot: 'plasmo-hidden',
+          dividerRow: 'plasmo-hidden',
+        },
+      }}
+    />
+    ```
+
+    ```tsx {{ filename: 'src/popup/pages/sign-in.tsx', mark: [[3, 7]] }}
+    <SignIn
+      appearance={{
+        elements: {
+          socialButtonsRoot: 'plasmo-hidden',
+          dividerRow: 'plasmo-hidden',
+        },
+      }}
+    />
+    ```
+  </CodeBlockTabs>
+
   ## Configure `host_permissions`
 
   `host_permissions` specifies which hosts, or websites, will have permission to sync auth state with your app. It accepts an array, allowing you to add more than one host.