Skip to content

Commit

Permalink
feat: Added appearance prop samples for hiding unsupported options
Browse files Browse the repository at this point in the history
  • Loading branch information
royanger committed Dec 5, 2024
1 parent ab7bb82 commit e003dd7
Showing 1 changed file with 30 additions and 0 deletions.
30 changes: 30 additions & 0 deletions docs/references/chrome-extension/sync-host.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<CodeBlockTabs options={["Sign-up", "Sign-in"]}>
```tsx
<SignUp
routing="virtual"
appearance={{
elements: {
socialButtons: 'plasmo-hidden',
dividerRow: 'plasmo-hidden',
},
}}
/>
```

```tsx
<SignIn
routing="virtual"
appearance={{
elements: {
socialButtons: '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.
Expand Down

0 comments on commit e003dd7

Please sign in to comment.