chore: use a partial for the custom flows callout (#1704)

clerk · Nov 14, 2024 · e385501 · e385501
1 parent 19c80f4
commit e385501
Show file tree

Hide file tree

Showing 27 changed files with 28 additions and 52 deletions.
diff --git a/docs/_partials/custom-flows-callout.mdx b/docs/_partials/custom-flows-callout.mdx
@@ -0,0 +1,2 @@
+> [!WARNING]
+> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
diff --git a/docs/custom-flows/add-email.mdx b/docs/custom-flows/add-email.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for adding an email to a user's account
 description: Learn how to use the Clerk API to build a custom flow for adding an email to a user's account.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 Users are able to add multiple email addresses to their account.
 

diff --git a/docs/custom-flows/add-phone.mdx b/docs/custom-flows/add-phone.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for adding a phone number to a user's account
 description: Learn how to use the Clerk API to build a custom flow for adding a phone number to a user's account.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 Users are able to add multiple phone numbers to their account.
 

diff --git a/docs/custom-flows/bot-sign-up-protection.mdx b/docs/custom-flows/bot-sign-up-protection.mdx
@@ -3,8 +3,7 @@ title: Add bot protection to your custom sign-up flow
 description: Learn how to add Clerk's bot protection to your custom sign-up flow.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 Clerk provides the ability to add a CAPTCHA widget to your sign-up flows to protect against bot sign-ups. The [`<SignUp />`](/docs/components/authentication/sign-up) component handles this flow out-of-the-box. However, if you're building a custom user interface, this guide will show you how to add the CAPTCHA widget to your custom sign-up flow.
 

diff --git a/docs/custom-flows/email-password-mfa.mdx b/docs/custom-flows/email-password-mfa.mdx
@@ -3,8 +3,7 @@ title: Build a custom sign-in flow with multi-factor authentication
 description: Learn how to build a custom email/password sign-in flow that requires multi-factor authentication (MFA).
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 [Multi-factor verification (MFA)](/docs/authentication/configuration/sign-up-sign-in-options) is an added layer of security that requires users to provide a second verification factor to access an account.
 

diff --git a/docs/custom-flows/email-password.mdx b/docs/custom-flows/email-password.mdx
@@ -3,8 +3,7 @@ title: Build a custom email/password authentication flow
 description: Learn how to build a custom email/password sign-up and sign-in flow using the Clerk API.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 This guide will walk you through how to build a custom email/password sign-up and sign-in flow.
 

diff --git a/docs/custom-flows/email-sms-otp.mdx b/docs/custom-flows/email-sms-otp.mdx
@@ -3,8 +3,7 @@ title: Build a custom email or SMS OTP authentication flow
 description: Learn how build a custom email or SMS one time code (OTP) authentication flow using the Clerk API.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 Clerk supports passwordless authentication, which lets users sign in and sign up without having to remember a password. Instead, users receive a one-time password (OTP), also known as a one-time code, via email or SMS, which they can use to authenticate themselves.
 

diff --git a/docs/custom-flows/forgot-password.mdx b/docs/custom-flows/forgot-password.mdx
@@ -3,8 +3,7 @@ title: Create a custom Forgot Password flow using the Clerk API
 description: Create a custom forgot password flow for your users using the lower level methods provided by the ClerkJS SDK.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, you should use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 Clerk's [prebuilt components](/docs/components/overview) provide a **Forgot Password** flow for your users out-of-the-box. However, if you're building a custom user interface, this guide will show you how to use the Clerk API to build a custom **Forgot Password** flow.
 

diff --git a/docs/custom-flows/google-one-tap.mdx b/docs/custom-flows/google-one-tap.mdx
@@ -3,8 +3,7 @@ title: Build a custom Google One Tap authentication flow
 description: Learn how to build a custom Google One Tap authentication flow using the Clerk API.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 [Google One Tap](https://developers.google.com/identity/gsi/web/guides/features) enables users to press a single button to authentication in your Clerk application with a Google account.
 

diff --git a/docs/custom-flows/invitations.mdx b/docs/custom-flows/invitations.mdx
@@ -3,8 +3,7 @@ title: Sign-up with application invitations
 description: Learn how to use the Clerk API to build a custom flow for handling application invitations.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, you should use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 When a user visits an [invitation](/docs/users/invitations) link, and no custom redirect URL was specified, then they will be redirected to the [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-up) and **their email address will be automatically verified.**
 

diff --git a/docs/custom-flows/manage-sms-based-mfa.mdx b/docs/custom-flows/manage-sms-based-mfa.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for managing SMS-based multi-factor authentication
 description: Learn how to use the Clerk API to build a custom flow for managing SMS-based multi-factor authentication.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 [Multi-factor verification (MFA)](/docs/authentication/configuration/sign-up-sign-in-options) is an added layer of security that requires users to provide a second verification factor to access an account.
 

diff --git a/docs/custom-flows/manage-totp-based-mfa.mdx b/docs/custom-flows/manage-totp-based-mfa.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for managing TOTP-based multi-factor authentication
 description: Learn how to use the Clerk API to build a custom flow for managing TOTP-based multi-factor authentication.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 [Multi-factor verification (MFA)](/docs/authentication/configuration/sign-up-sign-in-options) is an added layer of security that requires users to provide a second verification factor to access an account.
 

diff --git a/docs/custom-flows/multi-session-applications.mdx b/docs/custom-flows/multi-session-applications.mdx
@@ -3,8 +3,7 @@ title: Build a custom multi-session flow
 description: Learn how to use the Clerk API to add multi-session handling to your application.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 A multi-session application is an application that allows multiple accounts to be signed in from the same browser at the same time. The user can switch from one account to another seamlessly. Each account is independent from the rest and has access to different resources.
 

diff --git a/docs/custom-flows/oauth-connections.mdx b/docs/custom-flows/oauth-connections.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for authenticating with OAuth connections
 description: Learn how to use the Clerk API to build a custom sign-up and sign-in flow that supports OAuth connections.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, you should use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 ## Before you start
 

diff --git a/docs/custom-flows/passkeys.mdx b/docs/custom-flows/passkeys.mdx
@@ -3,8 +3,7 @@ title: Build a custom authentication flow using passkeys
 description: Learn how to use the Clerk API to build a custom authentication flow using passkeys.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 Clerk supports passwordless authentication via passkeys, enabling users to sign in without having to remember a password. Instead, users select a passkey associated with their device, which they can use to authenticate themselves.
 

diff --git a/docs/custom-flows/saml-connections.mdx b/docs/custom-flows/saml-connections.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for authenticating with SAML connections
 description: Learn how to use the Clerk API to build a custom sign-up and sign-in flow that supports OAuth connections.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, you should use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 ## Before you start
 

diff --git a/docs/custom-flows/sign-out.mdx b/docs/custom-flows/sign-out.mdx
@@ -3,8 +3,7 @@ title: Build a custom sign-out flow
 description: Learn how to use the Clerk API to build a custom sign-out flow using Clerk's signOut() function.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, you should use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 Clerk's [`<UserButton />`](/docs/components/user/user-button) and [`<SignOutButton />`](/docs/components/unstyled/sign-out-button) components provide an out-of-the-box solution for signing out users. However, if you're building a custom solution, you can use the [`signOut()`](/docs/references/javascript/clerk/clerk#sign-out) function to handle the sign-out process.
 

diff --git a/docs/custom-flows/user-impersonation.mdx b/docs/custom-flows/user-impersonation.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for handling user impersonation
 description: Learn how to build a custom flow using the Clerk API that handles user impersonation.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, you should use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 User impersonation is a way to offer customer support by logging into your application from their accounts. Doing so enables you to directly reproduce and remedy any issues they're experiencing.
 

diff --git a/docs/organizations/accept-organization-invitations.mdx b/docs/organizations/accept-organization-invitations.mdx
@@ -3,8 +3,7 @@ title: Accept organization invitations
 description: Learn how to use the Clerk API to build a custom flows for handling organization invitations.
 ---
 
-> [!WARNING]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, you should use the [Account Portal pages](/docs/customization/account-portal//overview) or [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 When a user visits an [organization invitation](/docs/organizations/invitations) link, and no custom redirect URL was specified, and they have an account for your application, then they will be redirected to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in). If they do not have an account for your application, they will be redirected to the [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-up).
 

diff --git a/docs/organizations/creating-organizations.mdx b/docs/organizations/creating-organizations.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for creating organizations
 description: Learn how to use the Clerk API to build a custom flow for creating organizations.
 ---
 
-> [!CAUTION]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To create organizations using a _prebuilt_ UI, you should use the [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 [Organizations](/docs/organizations/overview) are a powerful feature in Clerk that allow you to group users together and manage their permissions. Organizations can be created and managed using the [Clerk Dashboard](https://dashboard.clerk.com), but you can also allow users within your application to create organizations.
 

diff --git a/docs/organizations/custom-organization-switcher.mdx b/docs/organizations/custom-organization-switcher.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for switching organizations
 description: Learn how to use the Clerk API to build a custom flow for switching between organizations.
 ---
 
-> [!CAUTION]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To switch organizations using a _prebuilt_ UI, you should use the [`<OrganizationSwitcher />`](/docs/components/organization/organization-switcher) component.
+<Include src="_partials/custom-flows-callout" />
 
 This guide will demonstrate how to use the Clerk API to build a custom flow for switching between organizations.
 

diff --git a/docs/organizations/inviting-users.mdx b/docs/organizations/inviting-users.mdx
@@ -5,8 +5,7 @@ description: Learn how to use the Clerk API to build a custom flow for creating
 
 {/* TODO: POST-IA rename this file. Don't do right now because the sidebar is going to be changed for the IA anyways, and it's one less redirect we have to deal with. */}
 
-> [!CAUTION]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To invite users to an organization using a _prebuilt_ UI, you should use the [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 Organization members with appropriate [permissions](/docs/organizations/roles-permissions) can invite new users to their organization and manage those invitations. The invitation recipient can be either an existing user of your application or a new user. If they are a new user, they will need to sign up in order to accept the invitation.
 

diff --git a/docs/organizations/manage-invitations.mdx b/docs/organizations/manage-invitations.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for managing a user's organization invitations
 description: Learn how to use the Clerk API to build a custom flow for managing a user's organization invitations.
 ---
 
-> [!CAUTION]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, you should use the [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 This guide will demonstrate how to use the Clerk API to build a custom flow for managing a user's [organization invitations](/docs/organizations/overview#organization-invitations).
 

diff --git a/docs/organizations/manage-membership-requests.mdx b/docs/organizations/manage-membership-requests.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for managing organization membership requests
 description: Learn how to use the Clerk API to build a custom flow for managing organization membership requests.
 ---
 
-> [!CAUTION]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To manage organization membership requests using a _prebuilt_ UI, you should use the [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 This guide will demonstrate how to use the Clerk API to build a custom flow for managing [organization membership requests](/docs/organizations/overview#membership-requests).
 

diff --git a/docs/organizations/managing-roles.mdx b/docs/organizations/managing-roles.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for managing member roles in an organization
 description: Learn how to use the Clerk API build a custom flow for managing member roles in an organization.
 ---
 
-> [!CAUTION]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To manage member roles in an organization using a _prebuilt_ UI, you should use the [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 Organization members with appropriate [permissions](/docs/organizations/roles-permissions#permissions) can manage a member's [role](/docs/organizations/roles-permissions#roles) and remove members within an organization.
 

diff --git a/docs/organizations/updating-organizations.mdx b/docs/organizations/updating-organizations.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for updating an organization
 description: Learn how to use the Clerk API to build a custom flow for updating an organization in your application.
 ---
 
-> [!CAUTION]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To update organizations using a _prebuilt_ UI, you should use the [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 Organization members with appropriate [permissions](/docs/organizations/roles-permissions) can update an organization. Currently, only the organization name and slug can be updated.
 

diff --git a/docs/organizations/viewing-memberships.mdx b/docs/organizations/viewing-memberships.mdx
@@ -3,8 +3,7 @@ title: Build a custom flow for viewing a user's organization memberships
 description: Learn how to use the Clerk API to build a custom flow for viewing a user's organization memberships.
 ---
 
-> [!CAUTION]
-> This guide is for users who want to build a _custom_ user interface using the Clerk API. To update organizations using a _prebuilt_ UI, you should use the [prebuilt components](/docs/components/overview).
+<Include src="_partials/custom-flows-callout" />
 
 This guide will demonstrate how to use the Clerk API to build a custom flow for viewing the list of a user's organization memberships.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		> [!WARNING]
		> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use the [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview).