From e003dd7404959ea7211cb762c76108e2e103e192 Mon Sep 17 00:00:00 2001 From: Roy Anger Date: Thu, 5 Dec 2024 15:47:49 -0500 Subject: [PATCH 1/4] feat: Added appearance prop samples for hiding unsupported options --- .../references/chrome-extension/sync-host.mdx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/docs/references/chrome-extension/sync-host.mdx b/docs/references/chrome-extension/sync-host.mdx index 1966812b66..5f676af3ba 100644 --- a/docs/references/chrome-extension/sync-host.mdx +++ b/docs/references/chrome-extension/sync-host.mdx @@ -91,6 +91,36 @@ 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 you may want to enable authentication methods on the web application that are unsupported in the extension. The Dashboard settings affect anything using the Clerk application, so those methods would show up in your Chrome Extension's sign up and sign in components. Below you will find options to hide unsupported methods. + + + ```tsx + + ``` + + ```tsx + + ``` + + ### 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. From a519b2f3bbd1da4ffb8a357d130f135ca794350a Mon Sep 17 00:00:00 2001 From: Roy Anger Date: Tue, 10 Dec 2024 11:57:55 -0500 Subject: [PATCH 2/4] Apply suggestions from code review Co-authored-by: Alex Carpenter --- docs/references/chrome-extension/sync-host.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/references/chrome-extension/sync-host.mdx b/docs/references/chrome-extension/sync-host.mdx index 5f676af3ba..239a7b7bed 100644 --- a/docs/references/chrome-extension/sync-host.mdx +++ b/docs/references/chrome-extension/sync-host.mdx @@ -101,7 +101,7 @@ Clerk allows you to sync the authentication state from your web app to your Chro routing="virtual" appearance={{ elements: { - socialButtons: 'plasmo-hidden', + socialButtonsRoot: 'plasmo-hidden', dividerRow: 'plasmo-hidden', }, }} @@ -113,7 +113,7 @@ Clerk allows you to sync the authentication state from your web app to your Chro routing="virtual" appearance={{ elements: { - socialButtons: 'plasmo-hidden', + socialButtonsRoot: 'plasmo-hidden', dividerRow: 'plasmo-hidden', }, }} From 4873e6dfa8fae810914aa63c3513881c1b7e5b2e Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Mon, 16 Dec 2024 11:47:27 -0500 Subject: [PATCH 3/4] Update docs/references/chrome-extension/sync-host.mdx --- docs/references/chrome-extension/sync-host.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/references/chrome-extension/sync-host.mdx b/docs/references/chrome-extension/sync-host.mdx index 239a7b7bed..84cc545904 100644 --- a/docs/references/chrome-extension/sync-host.mdx +++ b/docs/references/chrome-extension/sync-host.mdx @@ -93,10 +93,10 @@ 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 you may want to enable authentication methods on the web application that are unsupported in the extension. The Dashboard settings affect anything using the Clerk application, so those methods would show up in your Chrome Extension's sign up and sign in components. Below you will find options to hide unsupported 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 `` and `` components as demonstrated in the following examples. - - ```tsx + ", ""]}> + ```tsx {{ filename: 'src/popup/pages/sign-up.tsx', mark: [[3, 7]] }} ``` - ```tsx + ```tsx {{ filename: 'src/popup/pages/sign-in.tsx', mark: [[3, 7]] }} Date: Mon, 16 Dec 2024 16:24:50 -0500 Subject: [PATCH 4/4] chore: Removed routing from appearance prop examples --- docs/references/chrome-extension/sync-host.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/references/chrome-extension/sync-host.mdx b/docs/references/chrome-extension/sync-host.mdx index 84cc545904..aa5539b4b6 100644 --- a/docs/references/chrome-extension/sync-host.mdx +++ b/docs/references/chrome-extension/sync-host.mdx @@ -98,7 +98,6 @@ Clerk allows you to sync the authentication state from your web app to your Chro ", ""]}> ```tsx {{ filename: 'src/popup/pages/sign-up.tsx', mark: [[3, 7]] }}