diff --git a/docs/advanced-usage/satellite-domains.mdx b/docs/advanced-usage/satellite-domains.mdx index 2f8cddd422..d451505ce4 100644 --- a/docs/advanced-usage/satellite-domains.mdx +++ b/docs/advanced-usage/satellite-domains.mdx @@ -12,7 +12,7 @@ Clerk supports sharing sessions across different domains by adding one or many s Your "primary" domain is where the authentication state lives, and satellite domains are able to securely read that state from the primary domain, enabling a seamless authentication flow across domains. -Users must complete both the sign-in and sign-up flows on the primary domain by using Clerk's [``](/docs/components/authentication/sign-in) component or [`useSignIn()`](/docs/references/react/use-sign-in) hook for sign-in and [``](/docs/components/authentication/sign-up) component or [`useSignUp()`](/docs/references/react/use-sign-up) hook for sign-up. +Users must complete both the sign-in and sign-up flows on the primary domain by using the [``](/docs/components/authentication/sign-in) component or [`useSignIn()`](/docs/references/react/use-sign-in) hook for sign-in and [``](/docs/components/authentication/sign-up) component or [`useSignUp()`](/docs/references/react/use-sign-up) hook for sign-up. To access authentication state from a satellite domain, users will be transparently redirected to the primary domain. If users need to sign in, they must be redirected to a sign in flow hosted on the primary domain, then redirected back to the originating satellite domain. The same redirection process applies to sign-up flows. @@ -35,7 +35,7 @@ To access authentication state from a satellite domain, users will be transparen When building your sign-in flow, you must configure it to run within your primary application, e.g. on `/sign-in`. > [!NOTE] - > For more information about creating your application, check out Clerk's [detailed guide](/docs/quickstarts/setup-clerk). + > For more information about creating your application, see the [setup guide](/docs/quickstarts/setup-clerk). ### Add your first satellite domain diff --git a/docs/advanced-usage/using-proxies.mdx b/docs/advanced-usage/using-proxies.mdx index dff1261dc1..7c053bebc5 100644 --- a/docs/advanced-usage/using-proxies.mdx +++ b/docs/advanced-usage/using-proxies.mdx @@ -4,7 +4,7 @@ description: Learn how to proxy the Clerk Frontend API through your domain. --- > [!WARNING] -> This guide is for users who need to proxy Clerk's Frontend API for deployment. If your application already uses a CNAME subdomain that is required for deploying with Clerk, then you must proxy Clerk's API using a different subdomain. Refer to [the Clerk deployment guide](/docs/deployments/overview#dns-records) on how to configure DNS records for deployment. +> This guide is for users who need to proxy the Frontend API for deployment. If your application already uses a CNAME subdomain that is required for deploying with Clerk, then you must proxy the Frontend API using a different subdomain. Refer to the [deployment guide](/docs/deployments/overview#dns-records) on how to configure DNS records for deployment. Clerk supports two configuration methods for connecting to the Clerk Frontend API: CNAME and Proxy. @@ -322,7 +322,7 @@ When using a proxy, all requests to the Frontend API will be made through your d ### Ready to go 🎉 - Your application should now be able to access Clerk's Frontend API from your proxy! + Your application should now be able to access the Frontend API from your proxy! If you have any questions about proxying, or you're having any trouble setting this up, please contact [support@clerk.com](mailto:support@clerk.com). diff --git a/docs/authentication/configuration/session-options.mdx b/docs/authentication/configuration/session-options.mdx index 08e766d58d..8d4576ded5 100644 --- a/docs/authentication/configuration/session-options.mdx +++ b/docs/authentication/configuration/session-options.mdx @@ -11,7 +11,7 @@ Depending on the business domain of an application, there might be different req Ultimately, picking the ideal session lifetime is a trade-off between security and user experience. Longer sessions are generally better for UX but worse for security; and vice-versa. -Fortunately, with Clerk you have to ability to fully control the lifetime of your users' sessions. There are two settings for doing so and you can set them via your instance settings in the [Clerk Dashboard](https://dashboard.clerk.com/): Inactivity timeout and Maximum lifetime. +Fortunately, with Clerk, you have the ability to fully control the lifetime of your users' sessions. There are two settings for doing so and you can set them via your instance settings in the [Clerk Dashboard](https://dashboard.clerk.com/): Inactivity timeout and Maximum lifetime. > [!NOTE] > Note that either one or both must be enabled at all times. For security reasons, you are not allowed to disable both settings. @@ -56,7 +56,7 @@ To enable multi-session in your application, you need to configure it in the Cle There are two main ways to add the multi-session feature to your application: -- Use the [``](/docs/components/user/user-button) component if you want to use Clerk's prebuilt UI. +- Use the [``](/docs/components/user/user-button) component if you want to use a prebuilt UI. - [Build a custom flow](/docs/custom-flows/multi-session-applications) if you want to rebuild the existing Clerk flow using the Clerk API. ## Customize session token diff --git a/docs/authentication/configuration/sign-up-sign-in-options.mdx b/docs/authentication/configuration/sign-up-sign-in-options.mdx index ef96371f4e..733ff2a0c3 100644 --- a/docs/authentication/configuration/sign-up-sign-in-options.mdx +++ b/docs/authentication/configuration/sign-up-sign-in-options.mdx @@ -9,7 +9,7 @@ You can modify your authentication options after your application has been creat ## Identifiers -Identifiers are how your application recognizes an individual user. Clerk offers three primary identifiers: +Identifiers are how your application recognizes an individual user. There are three primary identifiers: - **Email address** - **Phone number** @@ -39,9 +39,9 @@ To update your identifiers after your application has been created: Authentication strategies are methods that users can use to sign up and sign in to your application. -Clerk offers two kinds of authentication strategies: **password** and **passwordless**. +There are two kinds of authentication strategies: **password** and **passwordless**. -Choosing the **password** strategy requires users to set a password during the sign up process. Passwords are required to be at least 8 characters long, and Clerk offers out-of-the-box protection against weak and compromised passwords. +Choosing the **password** strategy requires users to set a password during the sign up process. Passwords are required to be at least 8 characters long, and have built-in protection against weak and compromised passwords. > [!NOTE] > Passwordless authentication remains available to users, even if the password strategy is enabled. @@ -75,7 +75,7 @@ Users can only create passkeys after signing up, so you'll need to enable anothe The easiest way to allow your users to create and manage their passkeys is to use the prebuilt [``](/docs/components/user/user-profile) component, which includes passkey management in the **Security** tab. -If you're building a custom user interface, refer to the [passkeys custom flow](/docs/custom-flows/passkeys) guide to learn how to create a custom passkey management flow using Clerks API. +If you're building a custom user interface, refer to the [passkeys custom flow](/docs/custom-flows/passkeys) guide to learn how to create a custom passkey management flow using the Clerk API. #### Passkey limitations @@ -156,7 +156,7 @@ Clerk's OAuth process is designed to be seamless. If an existing user attempts t {/* TODO: Is this too much to add? */} -Users can link multiple social providers to their account, depending on your application's setup. You can configure your application to use the [Account Portal User Profile page](/docs/customization/account-portal/overview#user-profile), the prebuilt [``](/docs/components/user/user-profile) component, or [build your own custom user interface using the Clerk API](/docs/custom-flows/oauth-connections). +Users can link multiple social providers to their account, depending on your application's setup. You can configure your application to use the [Account Portal User Profile page](/docs/customization/account-portal/overview#user-profile), the prebuilt [``](/docs/components/user/user-profile) component, or [build your own custom user interface using the Clerk API.](/docs/custom-flows/oauth-connections). To enable social connections: @@ -185,7 +185,7 @@ MFA is not available on the new application screen, but it can be enabled in the 1. In the navigation sidebar, select **User & Authentication > Multi-factor**. 1. Toggle on the MFA strategies you would like to enable. -Clerk currently offers the following MFA strategies: +The following MFA strategies are currently available: - **SMS verification code** - **Authenticator application (also known as TOTP - Time-based One-time Password)** @@ -193,7 +193,7 @@ Clerk currently offers the following MFA strategies: Enabling MFA allows users of your app to turn it on for their own accounts through their [User Profile](/docs/customization/account-portal/overview#user-profile) page. Enabling MFA does not automatically turn on MFA for all users. -If you're building a custom user interface instead of using Clerk's [Account Portal](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview), you can use [Clerk elements](/docs/customization/elements/examples/sign-in#multi-factor-authentication-mfa) or use [Clerk's API](/docs/custom-flows/email-password-mfa) to build a custom sign-in flow that allows users to sign in with MFA. +If you're building a custom user interface instead of using the [Account Portal](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview), you can use [elements](/docs/customization/elements/examples/sign-in#multi-factor-authentication-mfa) or [the Clerk API](/docs/custom-flows/email-password-mfa) to build a custom sign-in flow that allows users to sign in with MFA. ### Reset a user's MFA diff --git a/docs/authentication/overview.mdx b/docs/authentication/overview.mdx index f8afb52616..ce6700cf48 100644 --- a/docs/authentication/overview.mdx +++ b/docs/authentication/overview.mdx @@ -3,7 +3,7 @@ title: Sign-up & sign-in overview description: Learn how to configure authentication and user management for your Clerk application. --- -Clerk supports multiple authentication strategies so that you can implement the strategy that makes sense for _your_ users. You can use Clerk's [Account Portal](/docs/customization/account-portal/overview), [prebuilt components](/docs/components/overview), or [build your own custom flows](/docs/custom-flows/overview). +Clerk supports multiple authentication strategies so that you can implement the strategy that makes sense for _your_ users. You can use the [Account Portal](/docs/customization/account-portal/overview), [prebuilt components](/docs/components/overview), or build your own [custom flows](/docs/custom-flows/overview). ## Configuration diff --git a/docs/authentication/social-connections/google.mdx b/docs/authentication/social-connections/google.mdx index f6bb5d308e..cf3aac7cd3 100644 --- a/docs/authentication/social-connections/google.mdx +++ b/docs/authentication/social-connections/google.mdx @@ -110,4 +110,4 @@ To configure this setting: ## Google One Tap -[Google One Tap](https://developers.google.com/identity/gsi/web/guides/features) enables users to sign up or sign in to your Clerk app with the press of a button. After adding Google to your Clerk app as a social connection, you can use Clerk's prebuilt `` component to render the One Tap UI in your app. See [the `` component reference](/docs/components/authentication/google-one-tap) to learn more. +[Google One Tap](https://developers.google.com/identity/gsi/web/guides/features) enables users to sign up or sign in to your Clerk app with the press of a button. After adding Google to your Clerk app as a social connection, you can use the prebuilt `` component to render the One Tap UI in your app. See [the `` component reference](/docs/components/authentication/google-one-tap) to learn more. diff --git a/docs/authentication/social-connections/oauth.mdx b/docs/authentication/social-connections/oauth.mdx index f41bbd0461..80695dd1cd 100644 --- a/docs/authentication/social-connections/oauth.mdx +++ b/docs/authentication/social-connections/oauth.mdx @@ -8,12 +8,12 @@ Clerk makes it easy to add social connection capabilities to your application. W > [!NOTE] > When using social connections, the sign-up and sign-in flows are equivalent. If a user doesn't have an account and tries to sign in, an account will be made for them, and vice versa. -The easiest way to add social connections is by using Clerk's [prebuilt components](/docs/components/overview). If you prefer a more custom solution, check out how to [build a completely custom social connection flow](/docs/custom-flows/oauth-connections). +The easiest way to add social connections to your Clerk app is by using [prebuilt components](/docs/components/overview). If you prefer a more custom solution, check out how to [build a social connection flow using the Clerk API](/docs/custom-flows/oauth-connections). ## Before you start - You need to create a Clerk application in your [Clerk Dashboard](https://dashboard.clerk.com/). For more information, check out the [Set up your application](/docs/quickstarts/setup-clerk) guide. -- You need to install the correct SDK for your application. You can find steps on how to do so through Clerk's [quickstart](/docs/quickstarts/overview) guides. +- You need to install the correct SDK for your application. You can find steps on how to do so through the [quickstart guides.](/docs/quickstarts/overview) ## Enable a social connection @@ -128,9 +128,7 @@ export async function GET() { For each social provider, you can disable the option to sign up and sign in to your application using the provider. This is especially useful for users that want to connect their OAuth account _after_ authentication. -For example, say your application wants to read a user's GitHub repository data but doesn't want to allow the user to authenticate with their GitHub account. The user can sign up with their email and password, or whatever method you choose, and then afterwards, connect their GitHub account to your application. - -After sign-up, connections can be made through Clerk's [``](/docs/components/user/user-profile) component, or with a [custom flow](/docs/custom-flows/oauth-connections). +For example, say your application wants to read a user's GitHub repository data but doesn't want to allow the user to authenticate with their GitHub account. The user can sign up with their email and password, or whatever authentication method you choose, and then afterwards, connect their GitHub account to your application through their user profile. The easiest way to enable this for your users is by using the [``](/docs/components/user/user-profile) component. If you prefer to build a custom user interface, see how to [build a social connection flow using the Clerk API](/docs/custom-flows/oauth-connections). To configure the option for users to sign up and sign in with a social provider: @@ -144,13 +142,13 @@ To configure the option for users to sign up and sign in with a social provider: When signed in, a user can connect to further social providers. There is no need to perform another sign-up. -When using Clerk's [Account Portal](/docs/customization/account-portal/overview) pages, users can see which providers they have already connected to and which ones they can still connect to on their [user profile page.](/docs/customization/account-portal/overview#user-profile) +When using the [Account Portal](/docs/customization/account-portal/overview) pages, users can see which providers they have already connected to and which ones they can still connect to on their [user profile page.](/docs/customization/account-portal/overview#user-profile) -When using Clerk's [prebuilt components](/docs/components/overview), you can use the [``](/docs/components/user/user-profile) component to allow users to connect to further social providers. +When using the [prebuilt components](/docs/components/overview), you can use the [``](/docs/components/user/user-profile) component to allow users to connect to further social providers. ## OAuth for native applications -Currently, Clerk's prebuilt components are not supported in native applications, but you can use the Clerk API to [build a custom flow for authenticating with social connections.](/docs/custom-flows/oauth-connections) +Currently, the prebuilt components are not supported in native applications, but you can use the Clerk API to [build a custom flow for authenticating with social connections.](/docs/custom-flows/oauth-connections) Clerk ensures that security critical nonces are passed only to allowlisted URLs when the OAuth flow is completed in native browsers or webviews. For maximum security in your **production** instances, you need to allowlist your custom redirect URLs via the [Clerk Dashboard](https://dashboard.clerk.com/) or the [Clerk Backend API](/docs/references/backend/redirect-urls/create-redirect-url). diff --git a/docs/backend-requests/handling/manual-jwt.mdx b/docs/backend-requests/handling/manual-jwt.mdx index 984fc0b0bc..bdb780d2f4 100644 --- a/docs/backend-requests/handling/manual-jwt.mdx +++ b/docs/backend-requests/handling/manual-jwt.mdx @@ -7,7 +7,7 @@ Your Clerk-generated [session tokens](/docs/backend-requests/resources/session-t For every request, you must validate its token to make sure it hasn't expired and it is authentic (i.e. no malicious user tried to tamper with it). If these validations pass, then it means that the user is authenticated to your application and you should consider them signed in. -The `authenticateRequest()` method from Clerk's JavaScript Backend SDK does all of this for you. It accepts the request object and authenticates the session token in it. See the [reference page](/docs/references/backend/authenticate-request) for more information. +The `authenticateRequest()` method from the JavaScript Backend SDK does all of this for you. It accepts the `request` object and authenticates the session token in it. See the [reference page](/docs/references/backend/authenticate-request) for more information. ## Networkless token verification diff --git a/docs/backend-requests/making/cross-origin.mdx b/docs/backend-requests/making/cross-origin.mdx index 6771419486..3d834bc021 100644 --- a/docs/backend-requests/making/cross-origin.mdx +++ b/docs/backend-requests/making/cross-origin.mdx @@ -25,9 +25,9 @@ export default function useFetch() { } ``` -## useSWR hook +## `useSWR()` hook -If you are using React or Next.js and want to use the [`useSWR`](https://swr.vercel.app/) hook, you can create a custom hook by utilizing Clerk's [`useAuth()`](/docs/references/react/use-auth) hook. `useAuth()` returns the asynchronous `getToken` function that can be called to add the session token as a Bearer token in the Authorization header of requests. +If you are using React or Next.js and want to use SWR's [`useSWR()`](https://swr.vercel.app/) hook, you can create a custom hook by using the [`useAuth()`](/docs/references/react/use-auth) hook. `useAuth()` returns the asynchronous `getToken()` method that can be called to add the session token as a Bearer token in the Authorization header of requests. ```js import useSWR from 'swr' diff --git a/docs/backend-requests/resources/rate-limits.mdx b/docs/backend-requests/resources/rate-limits.mdx index e00e69b853..4ca2712792 100644 --- a/docs/backend-requests/resources/rate-limits.mdx +++ b/docs/backend-requests/resources/rate-limits.mdx @@ -1,6 +1,6 @@ --- title: Rate limits -description: Learn about rate limiting on Clerk's APIs. +description: Learn about rate limiting on the Clerk APIs. --- Clerk rate limits certain endpoints to help protect users against brute-force attacks or to stop abuse of Clerk's platform. diff --git a/docs/components/authentication/google-one-tap.mdx b/docs/components/authentication/google-one-tap.mdx index 0f7bdc2763..cae665f66c 100644 --- a/docs/components/authentication/google-one-tap.mdx +++ b/docs/components/authentication/google-one-tap.mdx @@ -322,6 +322,6 @@ See [`authenticateWithGoogleOneTap()` usage](#authenticate-with-google-one-tap-u ## Limitations -- If your application will use the Google API on behalf of your users, Clerk's `` component is not recommended, as Google does not provide Clerk with an access or refresh token that you can use. +- If your application will use the Google API on behalf of your users, the `` component is not recommended, as Google does not provide Clerk with an access or refresh token that you can use. - Users with the 1Password browser extension may not be able to render the Google One Tap UI. They must disable this extension. - When testing in development, if you select the `X` button to close the Google One Tap UI, you may encounter [a cooldown](https://developers.google.com/identity/gsi/web/guides/features#exponential_cooldown) that prevents you from rendering it again for a period of time. To bypass the cooldown, remove the `g_state` cookie. diff --git a/docs/components/authentication/sign-in.mdx b/docs/components/authentication/sign-in.mdx index b81eef4f27..4639e09793 100644 --- a/docs/components/authentication/sign-in.mdx +++ b/docs/components/authentication/sign-in.mdx @@ -3,7 +3,7 @@ title: '`` component' description: Clerk's component renders a UI for signing in users. --- -![Clerk's \ component renders a UI for signing in users.](/docs/images/ui-components/sign-in.svg) +![The \ component renders a UI for signing in users.](/docs/images/ui-components/sign-in.svg) The `` component renders a UI for signing in users. The functionality of the `` component is controlled by the instance settings you specify in your [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-in and sign-up options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). You can further customize your `` component by passing additional [properties](#properties) at the time of rendering. diff --git a/docs/components/authentication/sign-up.mdx b/docs/components/authentication/sign-up.mdx index f06ac49296..a4b407937d 100644 --- a/docs/components/authentication/sign-up.mdx +++ b/docs/components/authentication/sign-up.mdx @@ -3,7 +3,7 @@ title: '`` component' description: Clerk's component renders a UI for signing up users. --- -![Clerk's \ component renders a UI for signing up users.](/docs/images/ui-components/sign-up.svg) +![The \ component renders a UI for signing up users.](/docs/images/ui-components/sign-up.svg) The `` component renders a UI for signing up users. The functionality of the `` component is controlled by the instance settings you specify in your [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-in and sign-up options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). You can further customize your `` component by passing additional [properties](#properties) at the time of rendering. diff --git a/docs/components/organization/create-organization.mdx b/docs/components/organization/create-organization.mdx index 59d140f994..e6634c3e74 100644 --- a/docs/components/organization/create-organization.mdx +++ b/docs/components/organization/create-organization.mdx @@ -3,7 +3,7 @@ title: '`` component' description: Clerk's component is used to render an organization creation UI that allows users to create brand new organizations within your application. --- -![Clerk's \ component renders an organization creation UI that allows users to create brand new organizations within your application.](/docs/images/ui-components/create-organization.svg) +![The \ component renders an organization creation UI that allows users to create brand new organizations within your application.](/docs/images/ui-components/create-organization.svg) The `` component is used to render an organization creation UI that allows users to create brand new organizations within your application. diff --git a/docs/components/organization/organization-list.mdx b/docs/components/organization/organization-list.mdx index 1b14765ec9..24c8a2eda5 100644 --- a/docs/components/organization/organization-list.mdx +++ b/docs/components/organization/organization-list.mdx @@ -3,7 +3,7 @@ title: '`` component' description: Clerk's component is used to display organization related memberships, invitations, and suggestions for the user. --- -![Clerk's \ component is used to display organization related memberships, invitations, and suggestions for the user.](/docs/images/ui-components/organization-list.svg) +![The \ component is used to display organization related memberships, invitations, and suggestions for the user.](/docs/images/ui-components/organization-list.svg) The `` component is used to display organization related memberships, [invitations, and suggestions](/docs/organizations/overview#automatic-invitations-and-suggestions) for the user. diff --git a/docs/components/organization/organization-profile.mdx b/docs/components/organization/organization-profile.mdx index 69e6e45ff3..620b365ccd 100644 --- a/docs/components/organization/organization-profile.mdx +++ b/docs/components/organization/organization-profile.mdx @@ -3,7 +3,7 @@ title: '`` component' description: Clerks component is used to render a beautiful, full-featured organization management UI that allows users to manage their organization profile and security settings. --- -![Clerk's \ component renders a full-featured organization management UI that allows users to manage their organization profile and security settings.](/docs/images/ui-components/organization-profile.svg) +![The \ component renders a full-featured organization management UI that allows users to manage their organization profile and security settings.](/docs/images/ui-components/organization-profile.svg) The `` component is used to render a beautiful, full-featured organization management UI that allows users to manage their organization profile and security settings. diff --git a/docs/components/organization/organization-switcher.mdx b/docs/components/organization/organization-switcher.mdx index 37c69dc2a2..ecc6f7184a 100644 --- a/docs/components/organization/organization-switcher.mdx +++ b/docs/components/organization/organization-switcher.mdx @@ -3,7 +3,7 @@ title: '`` component' description: Clerk's component is used to enable the ability to switch between available organizations the user may be part of in your application. --- -![Clerk's \ component is used to enable the ability to switch between available organizations the user may be part of in your application.](/docs/images/ui-components/organization-switcher.svg) +![The \ component is used to enable the ability to switch between available organizations the user may be part of in your application.](/docs/images/ui-components/organization-switcher.svg) The `` component allows a user to switch between their account types - their personal account and their joined organizations. This component is useful for applications that have a multi-tenant architecture, where users can be part of multiple organizations. diff --git a/docs/components/user/user-button.mdx b/docs/components/user/user-button.mdx index b9730e6479..859fa93e73 100644 --- a/docs/components/user/user-button.mdx +++ b/docs/components/user/user-button.mdx @@ -3,7 +3,7 @@ title: '`` component' description: Clerk's component is used to render the familiar user button UI popularized by Google. --- -![Clerk's \ component renders the familiar user button UI popularized by Google.](/docs/images/ui-components/user-button.svg) +![The \ component renders the familiar user button UI popularized by Google.](/docs/images/ui-components/user-button.svg) The `` component is used to render the familiar user button UI popularized by Google. diff --git a/docs/components/user/user-profile.mdx b/docs/components/user/user-profile.mdx index 2465d2c3e0..4f1a37a149 100644 --- a/docs/components/user/user-profile.mdx +++ b/docs/components/user/user-profile.mdx @@ -3,7 +3,7 @@ title: '`` component' description: Clerk's component is used to render a beautiful, full-featured account management UI that allows users to manage their profile and security settings. --- -![Clerk's \ component renders a full-featured account management UI that allows users to manage their profile and security settings.](/docs/images/ui-components/user-profile.svg) +![The \ component renders a full-featured account management UI that allows users to manage their profile and security settings.](/docs/images/ui-components/user-profile.svg) The `` component is used to render a beautiful, full-featured account management UI that allows users to manage their profile and security settings. diff --git a/docs/custom-flows/add-email.mdx b/docs/custom-flows/add-email.mdx index 44e79f7106..80243ea8d1 100644 --- a/docs/custom-flows/add-email.mdx +++ b/docs/custom-flows/add-email.mdx @@ -1,10 +1,10 @@ --- title: Build a custom flow for adding an email to a user's account -description: Learn how to use Clerk's API to 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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). 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 index a2049e37a5..c80c3e040a 100644 --- a/docs/custom-flows/add-phone.mdx +++ b/docs/custom-flows/add-phone.mdx @@ -1,10 +1,10 @@ --- title: Build a custom flow for adding a phone number to a user's account -description: Learn how to use Clerk's API to 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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). 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 index bd0937fa0e..5b469586b9 100644 --- a/docs/custom-flows/bot-sign-up-protection.mdx +++ b/docs/custom-flows/bot-sign-up-protection.mdx @@ -4,9 +4,9 @@ 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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). -Clerk provides the ability to add a CAPTCHA widget to your sign-up flows to protect against bot sign-ups. Clerk's [``](/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. +Clerk provides the ability to add a CAPTCHA widget to your sign-up flows to protect against bot sign-ups. The [``](/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. ### Enable bot sign-up protection diff --git a/docs/custom-flows/email-links.mdx b/docs/custom-flows/email-links.mdx index d91fc06fd0..56d5238fde 100644 --- a/docs/custom-flows/email-links.mdx +++ b/docs/custom-flows/email-links.mdx @@ -38,7 +38,7 @@ We take care of the boring stuff, like efficient polling, secure session managem ## Before you start - You need to create a Clerk Application in your [Clerk Dashboard](https://dashboard.clerk.com/). For more information, check out our [Set up your application](/docs/quickstarts/setup-clerk) guide. -- You need to install the correct SDK for your application. You can find steps on how to do so through Clerk's [quickstart](/docs/quickstarts/overview) guides. +- You need to install the correct SDK for your application. You can find steps on how to do so through the [quickstart guides.](/docs/quickstarts/overview) ## Set up email link authentication in Your Clerk application diff --git a/docs/custom-flows/email-password-mfa.mdx b/docs/custom-flows/email-password-mfa.mdx index 4f39e11a68..9a1df5f982 100644 --- a/docs/custom-flows/email-password-mfa.mdx +++ b/docs/custom-flows/email-password-mfa.mdx @@ -4,7 +4,7 @@ description: Learn how to build a custom email/password sign-in flow that requir --- > [!WARNING] -> This guide is for users who want to build a _custom_ user interface using the Clerk API. To use a _prebuilt_ UI, use Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). [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 index 1961b21aa3..dee9cf2b8d 100644 --- a/docs/custom-flows/email-password.mdx +++ b/docs/custom-flows/email-password.mdx @@ -1,10 +1,10 @@ --- title: Build a custom email/password authentication flow -description: Learn how to build a custom email/password sign-up and sign-in flow using Clerk's API. +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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). 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 index 6d0f453e87..12c334c27a 100644 --- a/docs/custom-flows/email-sms-otp.mdx +++ b/docs/custom-flows/email-sms-otp.mdx @@ -1,10 +1,10 @@ --- 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 Clerk's API. +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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). 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/embedded-email-links.mdx b/docs/custom-flows/embedded-email-links.mdx index a349a6d4f4..a7c6a6a6e9 100644 --- a/docs/custom-flows/embedded-email-links.mdx +++ b/docs/custom-flows/embedded-email-links.mdx @@ -32,7 +32,7 @@ This guide will demonstrate how to generate a sign-in token and use it to sign i -d '{ "user_id": "user_123" }' ``` - This will return a `url` property, which can be used as your email link. Keep in mind that this link will use Clerk's [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in) to sign in the user. + This will return a `url` property, which can be used as your email link. Keep in mind that this link will use the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in) to sign in the user. If you would rather use your own sign-in page, you can use the `token` property that is returned. Add the `token` as a query param in any link, such as the following example: diff --git a/docs/custom-flows/forgot-password.mdx b/docs/custom-flows/forgot-password.mdx index 5027de2de3..0ba0872447 100644 --- a/docs/custom-flows/forgot-password.mdx +++ b/docs/custom-flows/forgot-password.mdx @@ -1,12 +1,12 @@ --- -title: Create a custom Forgot Password flow using Clerk's API +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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). -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 Clerk's API to build a custom **Forgot Password** flow. +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. In the following example, the user is asked to provide their email address. After submitting their email, the user is asked to provide a new password and the password reset code that was sent to their email. The user is then signed in with their new password. diff --git a/docs/custom-flows/google-one-tap.mdx b/docs/custom-flows/google-one-tap.mdx index d77b87c367..b45088e973 100644 --- a/docs/custom-flows/google-one-tap.mdx +++ b/docs/custom-flows/google-one-tap.mdx @@ -1,10 +1,10 @@ --- title: Build a custom Google One Tap authentication flow -description: Learn how to build a custom Google One Tap authentication flow using Clerk's API. +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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). [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 index e911df6ad2..ba93549384 100644 --- a/docs/custom-flows/invitations.mdx +++ b/docs/custom-flows/invitations.mdx @@ -1,14 +1,14 @@ --- title: Sign-up with application invitations -description: Learn how to use Clerk's API to build a custom flow for handling 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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). -When a user visits an [invitation](/docs/users/invitations) link, and no custom redirect URL was specified, then they will be redirected to Clerk's [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-up) and **their email address will be automatically verified.** +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.** -However, if you specified [a redirect URL when creating the invitation](/docs/users/invitations#redirect-url), you must handle the sign-up flow in your code for that page. You can either embed Clerk's [``](/docs/components/authentication/sign-up) component on that page, or if the prebuilt component doesn't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. +However, if you specified [a redirect URL when creating the invitation](/docs/users/invitations#redirect-url), you must handle the sign-up flow in your code for that page. You can either embed the [``](/docs/components/authentication/sign-up) component on that page, or if the prebuilt component doesn't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. This guide will demonstrate how to build a custom sign-up flow to handle application invitations. diff --git a/docs/custom-flows/manage-sms-based-mfa.mdx b/docs/custom-flows/manage-sms-based-mfa.mdx index 66969c296e..f71bad8002 100644 --- a/docs/custom-flows/manage-sms-based-mfa.mdx +++ b/docs/custom-flows/manage-sms-based-mfa.mdx @@ -1,10 +1,10 @@ --- title: Build a custom flow for managing SMS-based multi-factor authentication -description: Learn how to use Clerk's API to 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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). [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 index b500b5c0d5..57fc7cebd2 100644 --- a/docs/custom-flows/manage-totp-based-mfa.mdx +++ b/docs/custom-flows/manage-totp-based-mfa.mdx @@ -1,10 +1,10 @@ --- title: Build a custom flow for managing TOTP-based multi-factor authentication -description: Learn how to use Clerk's API to 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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). [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 index 0e45ed665d..fa2d6dcab8 100644 --- a/docs/custom-flows/multi-session-applications.mdx +++ b/docs/custom-flows/multi-session-applications.mdx @@ -1,14 +1,14 @@ --- title: Build a custom multi-session flow -description: Learn how to use Clerk's API to add multi-session handling to your application. +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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). 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. -This guide provides you with the necessary information to build a custom multi-session flow using Clerk's API. +This guide provides you with the necessary information to build a custom multi-session flow using the Clerk API. To implement the multi-session feature to your application, you need to handle the following scenarios: diff --git a/docs/custom-flows/oauth-connections.mdx b/docs/custom-flows/oauth-connections.mdx index 5f700cb157..20cb1f64bc 100644 --- a/docs/custom-flows/oauth-connections.mdx +++ b/docs/custom-flows/oauth-connections.mdx @@ -1,10 +1,10 @@ --- title: Build a custom flow for authenticating with OAuth connections -description: Learn how to use Clerk's API to build a custom sign-up and sign-in flow that supports 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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). ## Before you start diff --git a/docs/custom-flows/overview.mdx b/docs/custom-flows/overview.mdx index 0684c2e778..f3b1162cb3 100644 --- a/docs/custom-flows/overview.mdx +++ b/docs/custom-flows/overview.mdx @@ -3,7 +3,7 @@ title: Custom flows description: Learn the process behind building custom sign-up and sign-in flows with Clerk. --- -A _custom flow_ refers to a user flow created entirely from scratch using the Clerk API. If Clerk's [prebuilt components](/docs/components/overview) don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. +A _custom flow_ refers to a user flow created entirely from scratch using the Clerk API. If [prebuilt components](/docs/components/overview) don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. > [!TIP] > The information in this guide will help you get a general understanding of custom flow concepts. To skip to code examples, choose the guide that best fits your needs from the navigation on the left. diff --git a/docs/custom-flows/passkeys.mdx b/docs/custom-flows/passkeys.mdx index e44ed9b25c..7e82c783b6 100644 --- a/docs/custom-flows/passkeys.mdx +++ b/docs/custom-flows/passkeys.mdx @@ -1,14 +1,14 @@ --- title: Build a custom authentication flow using passkeys -description: Learn how to use Clerk's API to 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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). 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. -This guide will walk you through how to use Clerk's API to build custom flows for creating, signing users in with, and managing passkeys. +This guide will walk you through how to use the Clerk API to build custom flows for creating, signing users in with, and managing passkeys. ## Enable passkeys diff --git a/docs/custom-flows/saml-connections.mdx b/docs/custom-flows/saml-connections.mdx index 6b11cf76c7..6f877bdfb2 100644 --- a/docs/custom-flows/saml-connections.mdx +++ b/docs/custom-flows/saml-connections.mdx @@ -1,10 +1,10 @@ --- title: Build a custom flow for authenticating with SAML connections -description: Learn how to use Clerk's API to build a custom sign-up and sign-in flow that supports 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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). ## Before you start diff --git a/docs/custom-flows/sign-out.mdx b/docs/custom-flows/sign-out.mdx index f814d16a1e..4fe4085d4c 100644 --- a/docs/custom-flows/sign-out.mdx +++ b/docs/custom-flows/sign-out.mdx @@ -1,10 +1,10 @@ --- title: Build a custom sign-out flow -description: Learn how to use Clerk's API to build a custom sign-out flow using Clerk's signOut() function. +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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). Clerk's [``](/docs/components/user/user-button) and [``](/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 index 15fd7a1bd7..4f228318df 100644 --- a/docs/custom-flows/user-impersonation.mdx +++ b/docs/custom-flows/user-impersonation.mdx @@ -1,10 +1,10 @@ --- title: Build a custom flow for handling user impersonation -description: Learn how to build a custom flow using Clerk's API that handles 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 Clerk's [Account Portal pages](/docs/customization/account-portal/overview) or [prebuilt components](/docs/components/overview). +> 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). 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. @@ -18,9 +18,9 @@ This guide will walk you through how to build a custom flow that handles user im Use the following tabs to view the code for: - - The main page that gets the list of the application's users using [Clerk's Backend SDK](/docs/references/backend/user/get-user-list) + - The main page that gets the list of the application's users using the [JavaScript Backend SDK](/docs/references/backend/user/get-user-list) - The Client Component that has the UI for displaying the users and the ability to impersonate them - - The Server Action that generates the actor token using [Clerk's Backend API](/docs/reference/backend-api/tag/Actor-Tokens#operation/CreateActorToken){{ target: '_blank' }} + - The Server Action that generates the actor token using the [Backend API](/docs/reference/backend-api/tag/Actor-Tokens#operation/CreateActorToken){{ target: '_blank' }} ```tsx {{ filename: 'app/dashboard/page.tsx' }} @@ -346,7 +346,7 @@ This guide will walk you through how to build a custom flow that handles user im ### Create an API route to generate actor tokens - Now create an endpoint that will call Clerk's [create actor token](/docs/reference/backend-api/tag/Actor-Tokens#operation/CreateActorToken) endpoint at `/actor_tokens` and pass in the Clerk secret key for authorization. In your API, you should build in permission checks to make sure this is only being accessed from a trusted source. + Now create an endpoint that will call the [create actor token](/docs/reference/backend-api/tag/Actor-Tokens#operation/CreateActorToken) endpoint at `/actor_tokens` and pass in the Clerk secret key for authorization. In your API, you should build in permission checks to make sure this is only being accessed from a trusted source. ```tsx {{ filename: 'app/generateActorToken+api.tsx' }} export async function POST(request: Request) { @@ -404,7 +404,7 @@ This guide will walk you through how to build a custom flow that handles user im ### Create an API route to retrieve user data - With your hook setup you can now create an API route that will call Clerk's [retrieve user endpoint](/docs/reference/backend-api/tag/Users#operation/GetUserList){{ target: '_blank' }} at `/users` and get back the Impersonated user's full [`User` object](/docs/references/javascript/user/user#user-object). + With your hook setup you can now create an API route that will call the [retrieve user endpoint](/docs/reference/backend-api/tag/Users#operation/GetUserList){{ target: '_blank' }} at `/users` and get back the Impersonated user's full [`User` object](/docs/references/javascript/user/user#user-object). ```tsx {{ filename: 'app/getImpersonatedUser+api.tsx' }} export async function POST(request: Request) { @@ -427,7 +427,7 @@ This guide will walk you through how to build a custom flow that handles user im Now that you have the functionality for generating an impersonated session & getting the impersonated user's data, there are a few more functions to complete that will: 1. Get the `ticket` from the URL generated by your `useImpersonation()` hook. - 1. Pass the `ticket` to Clerk's `signIn()` function to create a new impersonated session, allowing you to sign in the impersonated user or impersonator. + 1. Pass the `ticket` to the `signIn()` function to create a new impersonated session, allowing you to sign in the impersonated user or impersonator. The following code should be placed in the `Page` component of your `app/(dashboard)/index.tsx` file: @@ -471,7 +471,7 @@ This guide will walk you through how to build a custom flow that handles user im ### Create a hook for signing out - Finally, create a helper function for signing out. Usually this can be as simple as calling Clerk's [`signOut()`](/docs/references/javascript/clerk/clerk#sign-out) function, but since you're handling multiple sessions, you must add some checks to ensure you're signing out of the right session. + Finally, create a helper function for signing out. Usually this can be as simple as calling the [`signOut()`](/docs/references/javascript/clerk/clerk#sign-out) function, but since you're handling multiple sessions, you must add some checks to ensure you're signing out of the right session. ```tsx {{ filename: 'app/(dashboard)/index.tsx' }} const onSignOutPress = async (sessionId: string) => { diff --git a/docs/customization/account-portal/disable-account-portal.mdx b/docs/customization/account-portal/disable-account-portal.mdx index 9fa62c19e6..31cae60539 100644 --- a/docs/customization/account-portal/disable-account-portal.mdx +++ b/docs/customization/account-portal/disable-account-portal.mdx @@ -15,4 +15,4 @@ To disable the Account Portal: ## Customizing your sign-up/sign-in flow -If you would like to migrate away from the Account Portal and create your own sign-up/sign-in flow, Clerk provides a set of [prebuilt components](/docs/components/overview) that you can use, or you can opt to build [custom flows using Clerk's API](/docs/custom-flows/overview). +If you would like to migrate away from the Account Portal and create your own sign-up/sign-in flow, Clerk provides a set of [prebuilt components](/docs/components/overview) that you can use, or you can opt to build [custom flows using the Clerk API](/docs/custom-flows/overview). diff --git a/docs/customization/account-portal/getting-started.mdx b/docs/customization/account-portal/getting-started.mdx index 731d434f2b..c7fd25e7b9 100644 --- a/docs/customization/account-portal/getting-started.mdx +++ b/docs/customization/account-portal/getting-started.mdx @@ -5,7 +5,7 @@ description: The Account Portal offers a comprehensive solution for managing use To integrate the Account Portal into your application, simply follow one of the [quickstart guides](/docs/quickstarts/overview). Once your application is set up, all you have to do is run it. Clerk will automatically redirect your users to the Account Portal sign-up/sign-in pages. After successful authentication, users will be redirected back to your application with an active session. -You can also integrate the Account Portal into your application using Clerk's prebuilt components. For example, the [``](/docs/components/unstyled/sign-up-button) and [``](/docs/components/unstyled/sign-in-button) components will redirect users to the Account Portal sign-up/sign-in pages if no props or [environment variables](/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects) are configured to override this behavior. +You can also integrate the Account Portal into your application using prebuilt components. For example, the [``](/docs/components/unstyled/sign-up-button) and [``](/docs/components/unstyled/sign-in-button) components will redirect users to the Account Portal sign-up and sign-in pages if no props or [environment variables](/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects) are configured to override this behavior. > [!NOTE] > **Dynamic Development Host Detection** diff --git a/docs/customization/account-portal/overview.mdx b/docs/customization/account-portal/overview.mdx index 92e7879a07..7b5b6174f0 100644 --- a/docs/customization/account-portal/overview.mdx +++ b/docs/customization/account-portal/overview.mdx @@ -11,7 +11,7 @@ The Account Portal in Clerk is a powerful feature that allows you to streamline The Account Portal provides the pages necessary for your users to sign-up, sign-in, and manage their accounts, all while maintaining seamless integration with your application. These pages are hosted on Clerk servers for you and they require minimal setup to get started. If you're looking for the fastest way to add authentication and user management to your application, then this is a great choice. -However, if you require more precise customization or prefer having your application self-contained, then you can use Clerk's fully customizable [prebuilt components](/docs/components/overview), or you can [build your own custom user interface using Clerk's API](/docs/custom-flows/overview). +However, if you require more precise customization or prefer having your application self-contained, then you can use Clerk's fully customizable [prebuilt components](/docs/components/overview), or you can build your own [custom user interface using the Clerk API](/docs/custom-flows/overview). ## How the Account Portal works @@ -24,46 +24,46 @@ After a user has finished their flow in an Account Portal page, Clerk automatica For each application environment, Clerk provides pages for sign-up, sign-in, user profile, organization profile, and organization creation flow. **To integrate the Account Portal with your application, check out the [setup guide](/docs/customization/account-portal/getting-started).** > [!IMPORTANT] -> These pages cannot be customized beyond the options provided in the [Clerk Dashboard](https://dashboard.clerk.com). If you need more customization such as [localization](/docs/customization/localization), consider using Clerk's [prebuilt components](/docs/components/overview) or [building your own custom user interface using Clerk's API](/docs/custom-flows/overview). +> These pages cannot be customized beyond the options provided in the [Clerk Dashboard](https://dashboard.clerk.com). If you need more customization such as [localization](/docs/customization/localization), consider using [prebuilt components](/docs/components/overview) or building your own [custom user interface](/docs/custom-flows/overview). ## Hosted pages ### Sign-in -The sign-in page hosts Clerk's prebuilt [``](/docs/components/authentication/sign-in) component, which renders a UI for signing in users. The functionality of the `` component is controlled by the instance settings you specify in your [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-up and sign-in options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). +The sign-in page hosts the prebuilt [``](/docs/components/authentication/sign-in) component, which renders a UI for signing in users. The functionality of the `` component is controlled by the instance settings you specify in your [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-up and sign-in options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). -![Clerk's Account Portal sign-in page hosts the \ component](/docs/images/account-portal/sign-in.png) +![The Account Portal sign-in page hosts the \ component](/docs/images/account-portal/sign-in.png) Redirect users to the sign-in page using the [``](/docs/components/control/redirect-to-signin) control component. ### Sign-up -The sign-up page hosts Clerk's prebuilt [``](/docs/components/authentication/sign-up) component, which renders a UI for signing up users. The functionality of the `` component is controlled by the instance settings you specify in your [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-up and sign-in options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). +The sign-up page hosts the prebuilt [``](/docs/components/authentication/sign-up) component, which renders a UI for signing up users. The functionality of the `` component is controlled by the instance settings you specify in your [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-up and sign-in options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). -![Clerk's Account Portal sign-up page hosts the \ component](/docs/images/account-portal/sign-up.png) +![The Account Portal sign-up page hosts the \ component](/docs/images/account-portal/sign-up.png) Redirect users to the sign-up page using the [``](/docs/components/control/redirect-to-signup) control component. ### User profile -The user profile page hosts Clerk's prebuilt [``](/docs/components/user/user-profile) component, which renders a beautiful, full-featured account management UI that allows users to manage their profile and security settings. +The user profile page hosts the prebuilt [``](/docs/components/user/user-profile) component, which renders a beautiful, full-featured account management UI that allows users to manage their profile and security settings. -![Clerk's Account Portal user profile page hosts the \ component](/docs/images/account-portal/user-profile.png) +![The Account Portal user profile page hosts the \ component](/docs/images/account-portal/user-profile.png) Redirect your authenticated users to their user profile page using the [``](/docs/components/control/redirect-to-userprofile) control component. ### Create organization -The create organization page hosts Clerk's prebuilt [``](/docs/components/organization/create-organization) component, which provides a streamlined interface for users to create new organizations within your application. +The create organization page hosts the prebuilt [``](/docs/components/organization/create-organization) component, which provides a streamlined interface for users to create new organizations within your application. -![Clerk's Account Portal create organization page hosts the \ component](/docs/images/account-portal/create-org.png) +![The Account Portal create organization page hosts the \ component](/docs/images/account-portal/create-org.png) Redirect your authenticated users to the create organization page using the [``](/docs/components/control/redirect-to-createorganization) control component. ### Organization profile -The user profile page hosts Clerk's prebuilt [``](/docs/components/organization/organization-profile) component, which renders a beautiful, full-featured organization management UI that allows users to manage their organization profile and security settings. +The user profile page hosts the prebuilt [``](/docs/components/organization/organization-profile) component, which renders a beautiful, full-featured organization management UI that allows users to manage their organization profile and security settings. -![Clerk's Account Portal organization profile page hosts the \ component](/docs/images/account-portal/org-profile.png) +![The Account Portal organization profile page hosts the \ component](/docs/images/account-portal/org-profile.png) Redirect your authenticated users to their organization profile page using the [``](/docs/components/control/redirect-to-organizationprofile) control component. diff --git a/docs/customization/elements/overview.mdx b/docs/customization/elements/overview.mdx index 8c44327412..71fb54cccc 100644 --- a/docs/customization/elements/overview.mdx +++ b/docs/customization/elements/overview.mdx @@ -1,6 +1,6 @@ --- title: Clerk Elements (Beta) -description: Learn how to use Clerk Elements to build custom UIs on top of Clerk's APIs without having to manage the underlying logic. +description: Learn how to use Clerk Elements to build custom UIs on top of the Clerk APIs without having to manage the underlying logic. --- > [!WARNING] @@ -8,13 +8,13 @@ description: Learn how to use Clerk Elements to build custom UIs on top of Clerk > > If you have any feedback, please reach out to [beta-elements@clerk.dev](mailto:beta-elements@clerk.dev) or head over to the [GitHub Discussion](https://github.com/orgs/clerk/discussions/3315). -Clerk Elements is a library of unstyled, composable components that can be used to build custom UIs on top of Clerk's APIs without having to manage the underlying logic. +Clerk Elements is a library of unstyled, composable components that can be used to build custom UIs on top of the Clerk APIs without having to manage the underlying logic. ![Clerk Elements](/images/elements/elements-hero-light.webp){{ dark: '/images/elements/elements-hero-dark.webp' }} ## Why use Clerk Elements? -You should use Clerk Elements if you want a deeper level of control and customization of the styles and layout of your UI while using Clerk's APIs. For example, if [the appearance prop](/docs/customization/overview) does not meet your needs, Clerk Elements might be for you. That said, you can also use Clerk Elements alongside the prebuilt components. +You should use Clerk Elements if you want a deeper level of control and customization of the styles and layout of your UI while using the Clerk APIs. For example, if [the appearance prop](/docs/customization/overview) does not meet your needs, Clerk Elements might be for you. That said, you can also use Clerk Elements alongside the prebuilt components. - **Component-first** - Make it as easy to build custom UIs with Clerk as it is with Clerk's drop-in prebuilt components. Clerk Elements handles the underlying business logic for you and provides a curated library of components without sacrificing on best practices or features. - **Unstyled, with a little bit of magic** - Use the web platform and best-in-class components for building great authentication flows. Baked-in to the components are little bits of magic, like the fully accessible segmented one-time-passcode (OTP) input, and instant password validation during sign up. @@ -25,7 +25,7 @@ Clerk Elements can be integrated into your existing application and workflows. F - **Tailwind CSS** – If you use Tailwind CSS, you can pass a `className` prop to most elements that Clerk Elements renders. See [the styling guide](/docs/customization/elements/guides/styling#tailwind-css) to learn more. - **Existing styles or component library** – If you have an existing component library that you want to use to build your authentication UIs, Clerk Elements supports composition via an `asChild` prop. Read [the styling guide](/docs/customization/elements/guides/styling#with-existing-components-via-as-child) to learn more. -- **With Clerk's prebuilt components** - Continue using Clerk's prebuilt components while customizing the flows you care most about. +- **With prebuilt components** - Continue using prebuilt components while customizing the flows you care most about. ## Getting started @@ -57,4 +57,4 @@ Once you have your project set up, you can start building custom UIs with Clerk - [Sign-in components](/docs/customization/elements/reference/sign-in) > [!NOTE] -> With the beta release, only sign-up and sign-in flows are supported. Support for building the rest of Clerk's prebuilt components with Elements is actively being worked on. +> With the beta release, only sign-up and sign-in flows are supported. Support for building the rest of the prebuilt components with Elements is actively being worked on. diff --git a/docs/customization/overview.mdx b/docs/customization/overview.mdx index 18f8111408..8108ede792 100644 --- a/docs/customization/overview.mdx +++ b/docs/customization/overview.mdx @@ -49,7 +49,7 @@ Clerk offers a set of prebuilt themes that can be used to quickly style Clerk co ## Customize the layout -The `layout` property is used to adjust the layout of Clerk's [``](/docs/components/authentication/sign-in) and [``](/docs/components/authentication/sign-up) components, as well as set important links to your support, terms, and privacy pages. See the [Layout](/docs/customization/layout) docs for more information. +The `layout` property is used to adjust the layout of the [``](/docs/components/authentication/sign-in) and [``](/docs/components/authentication/sign-up) components, as well as set important links to your support, terms, and privacy pages. See the [Layout](/docs/customization/layout) docs for more information. ## Customize the base theme @@ -375,7 +375,7 @@ Here are a few resources you can utilize to customize your Clerk components furt --- - [prebuilt themes](/docs/customization/themes) - - Explore Clerk's prebuilt themes that you can use to quickly style your Clerk components. + - Explore the prebuilt themes that you can use to quickly style your Clerk components. --- diff --git a/docs/deployments/changing-domains.mdx b/docs/deployments/changing-domains.mdx index 233d4320b6..bb053f2afa 100644 --- a/docs/deployments/changing-domains.mdx +++ b/docs/deployments/changing-domains.mdx @@ -11,8 +11,8 @@ Learn how to change your Clerk production instance's domain or subdomain. ## Change domain 1. Update your production domain in two ways: - - [the Clerk Dashboard](#update-your-domain-via-clerk-dashboard) - - [Clerk's backend API](#update-your-domain-via-backend-api) + - the [Clerk Dashboard](#update-your-domain-via-clerk-dashboard) + - the [Backend API](#update-your-domain-via-backend-api) 1. Once you make the change to your domain, you will need to update the following: - Update DNS records - Generate new SSL certificates @@ -30,7 +30,7 @@ To update your production domain in the Clerk Dashboard: ### Update your domain via backend API -To update your production domain using Clerk's backend API, you will need to make a POST request to the `change_domain` endpoint. You will need to provide your new domain in the request body. +To update your production domain using the [Backend API](https://clerk.com/docs/reference/backend-api), you will need to make a POST request to the `change_domain` endpoint. You will need to provide your new domain in the request body. 1. Copy the following cURL command. diff --git a/docs/deployments/environments.mdx b/docs/deployments/environments.mdx index 9e087acea2..d7f6a9297f 100644 --- a/docs/deployments/environments.mdx +++ b/docs/deployments/environments.mdx @@ -32,7 +32,7 @@ Some notable differences between `Production` and `Development` instances in a C - You must associate a production domain within the Clerk Dashboard - You are required to provision your own SSO credentials -When deploying to production, you must first activate your `Production` environment. Check out Clerk's [Deploying to Production](/docs/deployments/overview#deploying-to-production) guide to learn about the process and avoid common pitfalls. +When deploying to production, you must first activate your `Production` environment. See the [Deploying to Production](/docs/deployments/overview#deploying-to-production) guide to learn about the process and avoid common pitfalls. ## Staging environments diff --git a/docs/deployments/exporting-users.mdx b/docs/deployments/exporting-users.mdx index b96dea16d3..9f3559248b 100644 --- a/docs/deployments/exporting-users.mdx +++ b/docs/deployments/exporting-users.mdx @@ -5,7 +5,7 @@ description: Learn how to export user's data from your Clerk application. ## Access user data in the backend -By using Clerk's [`GetUserList`](/docs/reference/backend-api/tag/Users#operation/GetUserList){{ target: '_blank' }} Backend API endpoint, you can programmatically export your user's data safely. +By using the [`GetUserList`](/docs/reference/backend-api/tag/Users#operation/GetUserList){{ target: '_blank' }} Backend API endpoint, you can programmatically export your user's data safely. Additionally, the [`getUserList()`](/docs/references/backend/user/get-user-list) method in the [JavaScript Backend SDK](/docs/references/backend/overview) can also be used to retrieve a list of users. diff --git a/docs/deployments/migrate-overview.mdx b/docs/deployments/migrate-overview.mdx index e04dbc99db..b5dbe59558 100644 --- a/docs/deployments/migrate-overview.mdx +++ b/docs/deployments/migrate-overview.mdx @@ -12,7 +12,7 @@ Each of these have trade-offs you'll need to consider on behalf of for your appl ## Basic export / import -With basic export / import, you are taking an export from your previous tool and importing data into Clerk. The most common way to handle this is by making use of Clerk's [`CreateUser`](/docs/reference/backend-api/tag/Users#operation/CreateUser){{ target: '_blank' }} Backend API endpoint. It's important to note that the `CreateUser` endpoint is rate limited. Please review our [Rate Limits](/docs/backend-requests/resources/rate-limits#backend-api-requests) page for more details. +With basic export / import, you are taking an export from your previous tool and importing data into Clerk. The most common way to handle this is by making use of the [`CreateUser`](/docs/reference/backend-api/tag/Users#operation/CreateUser){{ target: '_blank' }} Backend API endpoint. It's important to note that the `CreateUser` endpoint is rate limited. Please review our [Rate Limits](/docs/backend-requests/resources/rate-limits#backend-api-requests) page for more details. You'll also need to provide your `password_hasher` value (The hashing algorithm used to generate the password digest) and in some instances Clerk will transparently upgrade your users' password hashes to the more secure Bcrypt hashing algorithm. More details on this topic are available in the [Create a new user](/docs/reference/backend-api/tag/Users#operation/CreateUser!path=password_hasher\&t=request) Backend API Reference docs. @@ -66,7 +66,7 @@ A trickle migration is great for upgrading active users and sessions to take adv ## Migration tools -To aid in basic migrations, Clerk provides an open-source script that takes a JSON file as input, containing a list of users, and creates a user in Clerk using Clerk's Backend API. The script respects Clerk's [backend rate limits](/docs/backend-requests/resources/rate-limits#backend-api-requests) and gracefully handles errors. We suggest you customize the [Zod schema](https://github.com/clerk/migration-script/blob/main/index.ts#L25-L43){{ target: '_blank' }} to your application's needs. +To aid in basic migrations, Clerk provides an open-source script that takes a JSON file as input, containing a list of users, and creates a user in Clerk using the Backend API. The script respects the [backend rate limits](/docs/backend-requests/resources/rate-limits#backend-api-requests) and gracefully handles errors. We suggest you customize the [Zod schema](https://github.com/clerk/migration-script/blob/main/index.ts#L25-L43){{ target: '_blank' }} to your application's needs. To use Clerk's migration script, clone the [repository](https://github.com/clerk/migration-script) and follow the instructions in the `README`. diff --git a/docs/deployments/overview.mdx b/docs/deployments/overview.mdx index 52756f6656..957c9fad70 100644 --- a/docs/deployments/overview.mdx +++ b/docs/deployments/overview.mdx @@ -85,4 +85,4 @@ If the command returns an empty response, your domain is correctly configured. I ### Incorrect domain -If you accidentally set the wrong domain, you can change it through the Clerk Dashboard or Clerk's backend API. For more information, see the [dedicated guide.](/docs/deployments/changing-domains) +If you accidentally set the wrong domain, you can change it through the Clerk Dashboard or the Backend API. For more information, see the [dedicated guide.](/docs/deployments/changing-domains) diff --git a/docs/deployments/set-up-staging.mdx b/docs/deployments/set-up-staging.mdx index 03909bef66..2eafdbb04a 100644 --- a/docs/deployments/set-up-staging.mdx +++ b/docs/deployments/set-up-staging.mdx @@ -3,7 +3,7 @@ title: Set up a staging environment with Clerk description: Learn how to set up a staging environment with Clerk authentication. --- -Staging environments enable you to internally test and demo changes to your application or website before deploying them to production. Currently, Clerk only offers **Development** and **Production** instances. Official support for **Staging** instances is still on [Clerk's roadmap](https://feedback.clerk.com/roadmap/de417dd1-fa2e-4997-868f-4c9248027e7d). However, you can set up a "staging environment" by creating a subdomain for a separate Clerk application. +Staging environments enable you to internally test and demo changes to your application or website before deploying them to production. Currently, Clerk only offers **Development** and **Production** instances. Official support for **Staging** instances is still on the [roadmap](https://feedback.clerk.com/roadmap/de417dd1-fa2e-4997-868f-4c9248027e7d). However, you can set up a "staging environment" by creating a subdomain for a separate Clerk application. Creating a separate Clerk application will prevent you from using live production environment data in your staging environment. If you are on a Pro, Enterprise, or Startup plan, **Clerk will fully upgrade your staging application for free.** diff --git a/docs/guides/add-onboarding-flow.mdx b/docs/guides/add-onboarding-flow.mdx index 4c4cddb53b..8306d431d9 100644 --- a/docs/guides/add-onboarding-flow.mdx +++ b/docs/guides/add-onboarding-flow.mdx @@ -5,7 +5,7 @@ description: Leverage Clerk’s customizable session tokens, public metadata, an Onboarding is a crucial part of many authentication flows. Sometimes you need to make sure certain criteria is met and collected before allowing access to parts of your application. With Clerk, you can leverage customizable session tokens, public metadata, and Middleware to create a custom onboarding experience. -This guide demonstrates how to create a custom onboarding flow that requires users to complete a form before they can access the application. After a user authenticates using Clerk's [Account portal](/docs/customization/account-portal/overview), the user is prompted to fill out a form with an application name and type. Once the user has completed the form, they are redirected to the application's homepage. +This guide demonstrates how to create a custom onboarding flow that requires users to complete a form before they can access the application. After a user authenticates using the [Account portal](/docs/customization/account-portal/overview), the user is prompted to fill out a form with an application name and type. Once the user has completed the form, they are redirected to the application's homepage. In this guide, you will learn how to: @@ -61,9 +61,9 @@ declare global { ## Configure your Middleware to read session data -Clerk's [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware) allows you to configure access to your routes with fine grained control. It also allows you to retrieve claims directly from the session and redirect your user accordingly. +[`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware) allows you to configure access to your routes with fine grained control. It also allows you to retrieve claims directly from the session and redirect your user accordingly. -The following example demonstrates how to use Clerk's `clerkMiddleware()` to redirect users based on their onboarding status. If the user is signed in and has not completed onboarding, they will be redirected to the onboarding page. +The following example demonstrates how to use `clerkMiddleware()` to redirect users based on their onboarding status. If the user is signed in and has not completed onboarding, they will be redirected to the onboarding page. Note that the following example protects all routes except one. This is so that any user visiting your application is forced to authenticate, and then forced to onboard. You can customize the array in the `createRouteMatcher()` function assigned to `isPublicRoute` to include any routes that should be accessible to all users, even unauthenticated ones. @@ -167,7 +167,7 @@ export default function OnboardingComponent() { const handleSubmit = async (formData: FormData) => { const res = await completeOnboarding(formData) if (res?.message) { - // Reloads the user's data from Clerk's API + // Reloads the user's data from the Clerk API await user?.reload() router.push('/') } diff --git a/docs/guides/authjs-migration.mdx b/docs/guides/authjs-migration.mdx index 2d57c67ba5..5b1aea726e 100644 --- a/docs/guides/authjs-migration.mdx +++ b/docs/guides/authjs-migration.mdx @@ -114,8 +114,8 @@ This guide shows how to migrate an application using Auth.js (formerly NextAuth. If Clerk's Account Portal pages aren't a good fit your app, you can build a custom sign-in and sign-up UI in one of two ways: - - use Clerk's [prebuilt components](/docs/references/nextjs/custom-signup-signin-pages), such as the [``](/docs/components/authentication/sign-in) and [``](/docs/components/authentication/sign-up) components - - build a [fully custom UI using Clerk's API](/docs/custom-flows/overview), leveraging Clerk's React hooks such as [`useSignIn()`](/docs/references/react/use-sign-in) and [`useSignUp()`](/docs/references/react/use-sign-up) + - use the [prebuilt components](/docs/references/nextjs/custom-signup-signin-pages), such as the [``](/docs/components/authentication/sign-in) and [``](/docs/components/authentication/sign-up) components + - build a [fully custom UI using the Clerk API](/docs/custom-flows/overview), leveraging Clerk's React hooks such as [`useSignIn()`](/docs/references/react/use-sign-in) and [`useSignUp()`](/docs/references/react/use-sign-up) ### Protect your app @@ -207,7 +207,7 @@ This guide shows how to migrate an application using Auth.js (formerly NextAuth. Replace Auth.js's `useSession()` hook with Clerk's hooks. - Clerk's [`useAuth()`](/docs/references/react/use-auth) hook can be used to retrieve basic authentication information. Clerk's [`useUser()`](/docs/references/react/use-user) hook can be used to retrieve the full [`User`](/docs/references/javascript/user/user#user) object, which includes information about the user, such as their first name, emails, phone numbers, and more. + The [`useAuth()`](/docs/references/react/use-auth) hook can be used to retrieve basic authentication information. The [`useUser()`](/docs/references/react/use-user) hook can be used to retrieve the full [`User`](/docs/references/javascript/user/user#user) object, which includes information about the user, such as their first name, emails, phone numbers, and more. ```tsx {{ filename: 'app/page.tsx' }} 'use client' diff --git a/docs/guides/basic-rbac.mdx b/docs/guides/basic-rbac.mdx index 497b1fb374..89f2730d9c 100644 --- a/docs/guides/basic-rbac.mdx +++ b/docs/guides/basic-rbac.mdx @@ -3,7 +3,7 @@ title: Implement basic Role Based Access Control (RBAC) with metadata description: Learn how to leverage Clerk's publicMetadata to implement your own basic Role Based Access Controls. --- -To control which users can access certain parts of your application, you can leverage Clerk's [roles](/docs/organizations/roles-permissions#roles) feature. Although Clerk offers a roles feature as part of the feature set for [organizations](/docs/organizations/overview), not every app implements organizations. **This guide covers a workaround to set up a basic Role Based Access Control (RBAC) system for products that don't use Clerk's organizations or roles.** +To control which users can access certain parts of your application, you can leverage the [roles feature.](/docs/organizations/roles-permissions#roles) Although Clerk offers a roles feature as part of the feature set for [organizations](/docs/organizations/overview), not every app implements organizations. **This guide covers a workaround to set up a basic Role Based Access Control (RBAC) system for products that don't use Clerk's organizations or roles.** This guide assumes that you're using Next.js App Router, but the concepts can be adapted to Next.js Pages Router and Remix. @@ -168,7 +168,7 @@ This guide assumes that you're using Next.js App Router, but the concepts can be Create a server action for managing a user's role. 1. In your `app/admin/` directory, create an `_actions.ts` file. - 1. Create a server action that sets a user's role. Use the `checkRole()` function to verify that the current user has the `admin` role. If they do, proceed to update the specified user's role using Clerk's [JavaScript Backend SDK](/docs/references/backend/user/update-user). This ensures that only administrators can modify user roles. + 1. Create a server action that sets a user's role. Use the `checkRole()` function to verify that the current user has the `admin` role. If they do, proceed to update the specified user's role using the [JavaScript Backend SDK](/docs/references/backend/user/update-user). This ensures that only administrators can modify user roles. 1. Create a server action that removes a user's role. ```ts {{ filename: 'app/admin/_actions.ts' }} diff --git a/docs/guides/force-organizations.mdx b/docs/guides/force-organizations.mdx index 5d22d331a7..ec0c39201e 100644 --- a/docs/guides/force-organizations.mdx +++ b/docs/guides/force-organizations.mdx @@ -111,9 +111,9 @@ This guide will be written for Next.js applications using App Router, but the sa #### Set an active organization - In the case of [Clerk components](/docs/components/overview), an organization will _automatically_ be set as active each time the user creates an organization, accepts an invitation, or selects a membership from the organization switcher. In the case of custom flows, you will need to implement the logic for setting an organization as active. Clerk's [`useOrganizationList()`](/docs/references/react/use-organization-list) hook provides a `setActive` method to help you with this. + In the case of [prebuilt components](/docs/components/overview), an organization will _automatically_ be set as active each time the user creates an organization, accepts an invitation, or selects a membership from the organization switcher. In the case of custom flows, you will need to implement the logic for setting an organization as active. The [`useOrganizationList()`](/docs/references/react/use-organization-list) hook provides a `setActive` method to help you with this. - In the example below, a custom organization switcher is created. It allows a user to select an organization from a list of their memberships. The `useOrganizationList()` hook is used to fetch a list of the user's memberships, and the `setActive` method is used to set the selected organization as active. + In the following example, a custom organization switcher is created. It allows a user to select an organization from a list of their memberships. The `useOrganizationList()` hook is used to fetch a list of the user's memberships, and the `setActive` method is used to set the selected organization as active. > [!WARNING] > Setting an active organization can only be performed client-side. diff --git a/docs/integrations/databases/neon.mdx b/docs/integrations/databases/neon.mdx index 9d49b68a99..56abd969e8 100644 --- a/docs/integrations/databases/neon.mdx +++ b/docs/integrations/databases/neon.mdx @@ -141,7 +141,7 @@ This tutorial demonstrates how to integrate Neon Postgres with Clerk in a Next.j ### Create Server Actions to handle user interactions - To handle form submissions for adding and deleting user messages, create two Server Actions in `app/actions.ts`. Use the [`auth()`](/docs/references/nextjs/auth) function from Clerk to obtain the user ID, which will be used to interact with the database. + To handle form submissions for adding and deleting user messages, create two Server Actions in `app/actions.ts`. Use Clerk's [`auth()` helper](/docs/references/nextjs/auth) to obtain the user ID, which will be used to interact with the database. ```typescript {{ filename: 'app/actions.ts' }} 'use server' @@ -174,7 +174,7 @@ This tutorial demonstrates how to integrate Neon Postgres with Clerk in a Next.j In your `app/page.tsx` file, add the following code to create the UI for the home page. If a message exists, the user can view and delete it; otherwise, they can add a new message. - To retrieve the user's messages, use Clerk's [`auth()`](/docs/references/nextjs/auth) to obtain the user's ID. Then, use this ID to query the database for the user's messages. + To retrieve the user's messages, use Clerk's [`auth()` helper](/docs/references/nextjs/auth) to obtain the user's ID. Then, use this ID to query the database for the user's messages. To enable the user to delete or add a message, use the `deleteUserMessage()` and `createUserMessage()` actions created in the previous step. diff --git a/docs/organizations/accept-organization-invitations.mdx b/docs/organizations/accept-organization-invitations.mdx index efaf5f77fc..efae0851f8 100644 --- a/docs/organizations/accept-organization-invitations.mdx +++ b/docs/organizations/accept-organization-invitations.mdx @@ -1,14 +1,14 @@ --- title: Accept organization invitations -description: Learn how to use Clerk's API to build a custom flows for handling 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 Clerk's [Account Portal pages](/docs/customization/account-portal//overview) or [prebuilt components](/docs/components/overview). +> 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). -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 Clerk's [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 Clerk's [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-up). +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). -However, if you specified [a redirect URL when creating the invitation](/docs/users/invitations#redirect-url), you must handle the sign-up and sign-in flows in your code for that page. You can either embed Clerk's [`](/docs/components/authentication/sign-in) component on that page, or if the prebuilt component doesn't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. +However, if you specified [a redirect URL when creating the invitation](/docs/users/invitations#redirect-url), you must handle the sign-up and sign-in flows in your code for that page. You can either embed the [`](/docs/components/authentication/sign-in) component on that page, or if the prebuilt component doesn't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. This guide will demonstrate how to build custom flows to handle organization invitations. diff --git a/docs/organizations/creating-organizations.mdx b/docs/organizations/creating-organizations.mdx index 0a4c0c244b..d45a1be2d5 100644 --- a/docs/organizations/creating-organizations.mdx +++ b/docs/organizations/creating-organizations.mdx @@ -1,14 +1,14 @@ --- title: Build a custom flow for creating organizations -description: Learn how to use Clerk's API to 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 Clerk's [prebuilt components](/docs/components/overview). +> 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). [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. -This guide will demonstrate how to use Clerk's API to build a custom flow for creating organizations. +This guide will demonstrate how to use the Clerk API to build a custom flow for creating organizations. diff --git a/docs/organizations/custom-organization-switcher.mdx b/docs/organizations/custom-organization-switcher.mdx index a5005d15ea..e4e95ec3f6 100644 --- a/docs/organizations/custom-organization-switcher.mdx +++ b/docs/organizations/custom-organization-switcher.mdx @@ -1,12 +1,12 @@ --- title: Build a custom flow for switching organizations -description: Learn how to use Clerk's API to build a custom flow for switching between 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 Clerk's [``](/docs/components/organization/organization-switcher) component. +> 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 [``](/docs/components/organization/organization-switcher) component. -This guide will demonstrate how to use Clerk's API to build a custom flow for switching between organizations. +This guide will demonstrate how to use the Clerk API to build a custom flow for switching between organizations. diff --git a/docs/organizations/invitations.mdx b/docs/organizations/invitations.mdx index 475b0a48ff..0f7a9fec80 100644 --- a/docs/organizations/invitations.mdx +++ b/docs/organizations/invitations.mdx @@ -5,7 +5,7 @@ description: Learn how to invite users to your organization. Organization invitations allow you to add new members to your organization, granting them access to organization-specific features and resources. -Once you create an invitation, Clerk sends an email to the invited user with a unique invitation link. When the user visits the organization invitation link, they will be redirected to Clerk's [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in). If the user is already signed in, they will be redirected to your application's homepage (`/`). If you want to redirect the user to a specific page in your application, you can [specify a redirect URL when creating the invitation.](#redirect-url) +Once you create an invitation, Clerk sends an email to the invited user with a unique invitation link. When the user visits the organization invitation link, they will be redirected to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in). If the user is already signed in, they will be redirected to your application's homepage (`/`). If you want to redirect the user to a specific page in your application, you can [specify a redirect URL when creating the invitation.](#redirect-url) ## Create an invitation @@ -19,7 +19,7 @@ To create an organization invitation on the client-side, see the [dedicated guid ### Server-side -You can also create organization invitations via the [Backend API](/docs/reference/backend-api/tag/Organization-Invitations#operation/CreateOrganizationInvitation){{ target: '_blank' }} either by using a cURL command or Clerk's [JavaScript Backend SDK](/docs/references/backend/overview). Clerk's JavaScript Backend SDK is a wrapper around the Backend API that makes it easier to interact with the API. +You can also create organization invitations via the [Backend API](/docs/reference/backend-api/tag/Organization-Invitations#operation/CreateOrganizationInvitation){{ target: '_blank' }} either by using a cURL command or the [JavaScript Backend SDK](/docs/references/backend/overview). The JavaScript Backend SDK is a wrapper around the Backend API that makes it easier to interact with the API. Use the following tabs to see examples for each method. @@ -65,7 +65,7 @@ curl 'https://api.clerk.com/v1/organizations//invitations' -d '{ "inviter_user_id": "user_123", "email_address": "test@gmail.com", "role": "org:member", "redirect_url": "https://www.example.com/accept-invitation" }' ``` -Once the user visits the invitation link, they will be redirected to the page you specified. On that page, you must handle the authentication flow in your code. You can either embed Clerk's [`](/docs/components/authentication/sign-in) component or, if the prebuilt component doesn't meet your needs or you require more control over the logic, you can build a [custom flow](/docs/organizations/accept-organization-invitations). +Once the user visits the invitation link, they will be redirected to the page you specified. On that page, you must handle the authentication flow in your code. You can either embed the [`](/docs/components/authentication/sign-in) component or, if the prebuilt component doesn't meet your needs or you require more control over the logic, you can build a [custom flow](/docs/organizations/accept-organization-invitations). > [!TIP] > For testing redirect URLs in your development environment, you can pass your port (`http://localhost:3000`). If you'd like to use Clerk's Account Portal, pass your Clerk Frontend API URL as the base URL. For example, `https://prepared-phoenix-98.clerk.accounts.dev/sign-up` redirects the user to the Account Portal sign-up page. You can find your Frontend API URL in the Clerk Dashboard on the [API Keys](https://dashboard.clerk.com/last-active?path=api-keys) page. In the left sidebar, select **Show API URLs**. diff --git a/docs/organizations/inviting-users.mdx b/docs/organizations/inviting-users.mdx index 8678c95661..79d5d0f0d0 100644 --- a/docs/organizations/inviting-users.mdx +++ b/docs/organizations/inviting-users.mdx @@ -1,18 +1,18 @@ --- title: Build a custom flow for creating and managing organization invitations -description: Learn how to use Clerk's API to build a custom flow for creating and managing organization invitations. +description: Learn how to use the Clerk API to build a custom flow for creating and managing organization invitations. --- {/* 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 Clerk's [prebuilt components](/docs/components/overview). +> 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). 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. Users with the appropriate permissions can also revoke organization invitations for users that have not yet joined, which will prevent the user from becoming an organization member. -This guide will demonstrate how to use Clerk's API to build a custom flow for inviting users to an organization and managing an organization's pending invitations. +This guide will demonstrate how to use the Clerk API to build a custom flow for inviting users to an organization and managing an organization's pending invitations. > [!NOTE] > This guide is for creating and managing organization invitations client-side. You can also create an organization invitation using the Backend API. See the [organization invitations reference](/docs/organizations/invitations) for more information. diff --git a/docs/organizations/manage-invitations.mdx b/docs/organizations/manage-invitations.mdx index 45b6caba68..61d87bc1db 100644 --- a/docs/organizations/manage-invitations.mdx +++ b/docs/organizations/manage-invitations.mdx @@ -1,12 +1,12 @@ --- title: Build a custom flow for managing a user's organization invitations -description: Learn how to use Clerk's API to 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 Clerk's [prebuilt components](/docs/components/overview). +> 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). -This guide will demonstrate how to use Clerk's API to build a custom flow for managing a user's [organization invitations](/docs/organizations/overview#organization-invitations). +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 index e8c218ed78..ac6e6d8882 100644 --- a/docs/organizations/manage-membership-requests.mdx +++ b/docs/organizations/manage-membership-requests.mdx @@ -1,12 +1,12 @@ --- title: Build a custom flow for managing organization membership requests -description: Learn how to use Clerk's API to 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 Clerk's [prebuilt components](/docs/components/overview). +> 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). -This guide will demonstrate how to use Clerk's API to build a custom flow for managing [organization membership requests](/docs/organizations/overview#membership-requests). +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 index 3ad8d91fd1..fb8458dcae 100644 --- a/docs/organizations/managing-roles.mdx +++ b/docs/organizations/managing-roles.mdx @@ -1,14 +1,14 @@ --- title: Build a custom flow for managing member roles in an organization -description: Learn how to use Clerk's API 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 Clerk's [prebuilt components](/docs/components/overview). +> 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). 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. -This guide will demonstrate how to use Clerk's API to build a custom flow for managing member roles in an organization. +This guide will demonstrate how to use the Clerk API to build a custom flow for managing member roles in an organization. diff --git a/docs/organizations/metadata.mdx b/docs/organizations/metadata.mdx index 1eb9bcb24d..d8a3131ff0 100644 --- a/docs/organizations/metadata.mdx +++ b/docs/organizations/metadata.mdx @@ -4,7 +4,7 @@ description: Organization objects hold a set of metadata that can be used intern --- > [!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 Clerk's [prebuilt components](/docs/components/overview). +> 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). Organization metadata allows you to store information about an organization that is not part of the standard fields, such as custom attributes that are specific to your application. diff --git a/docs/organizations/overview.mdx b/docs/organizations/overview.mdx index 62799b73a4..bcccaf36ca 100644 --- a/docs/organizations/overview.mdx +++ b/docs/organizations/overview.mdx @@ -74,7 +74,7 @@ When a user is a member of an organization, they can switch between their person By default, when a user initially signs in to a Clerk-powered application, they are signed in to their personal workspace and no active organization is set. Even if they are a member of only one organization, they must explicitly set it as active or the application can have logic to set this automatically. -The easiest way to allow users to set an organization as active is to use Clerk's [``](/docs/components/organization/organization-switcher) component. +The easiest way to allow users to set an organization as active is to use the [``](/docs/components/organization/organization-switcher) component. You can also use the `setActive()` method, which is available on the [`Clerk`](/docs/references/javascript/clerk/session-methods#set-active) object and is returned by the [`useOrganizationList()`](/docs/references/react/use-organization-list) hook. @@ -133,7 +133,7 @@ When a user creates an organization, they become the organization's admin. As th A single user within one of your applications can create _up to_ 100 organizations in that application. If you need users to be able to create more organizations than this, [reach out to support](/contact/support){{ target: '_blank' }} and you can have the limit raised. -The easiest way to allow users to create organizations is to use Clerk's [``](/docs/components/organization/create-organization) and/or [``](/docs/components/organization/organization-switcher) components. +The easiest way to allow users to create organizations is to use the [``](/docs/components/organization/create-organization) and/or [``](/docs/components/organization/organization-switcher) components. ## Organization invitations @@ -165,7 +165,7 @@ For managing organizations in your application, Clerk provides a set of prebuilt - [``](/docs/components/organization/organization-switcher) - A dropdown menu that allows a user to switch between their personal account and their organization account(s), as well as create a new organization if they have permission to do so. - [``](/docs/components/organization/organization-list) - A list of organizations that a user is a member of. -If Clerk's prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild and customize the existing Clerk flows using the Clerk API. Some useful guides include: +If the prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild and customize the existing Clerk flows using the Clerk API. Some useful guides include: - [Creating an organization](/docs/organizations/creating-organizations) - [Updating an organization](/docs/organizations/updating-organizations) diff --git a/docs/organizations/roles-permissions.mdx b/docs/organizations/roles-permissions.mdx index 1c7057246c..190092cf4d 100644 --- a/docs/organizations/roles-permissions.mdx +++ b/docs/organizations/roles-permissions.mdx @@ -74,6 +74,6 @@ To learn more about creating custom permissions, see the [Create roles and permi ## Next steps - [Learn how to create roles and permissions in the Clerk Dashboard](/docs/organizations/create-roles-permissions) -- [Learn how to use roles and permissions to limit the content a user can see with Clerk's prebuilt `` component](/docs/components/protect) +- [Learn how to use roles and permissions to limit the content a user can see with the prebuilt `` component](/docs/components/protect) - [Learn how to allow and limit access to resources by role and permissions](/docs/organizations/verify-user-permissions) - [Learn how to reassign the **Creator** role](/docs/organizations/creator-role) diff --git a/docs/organizations/updating-organizations.mdx b/docs/organizations/updating-organizations.mdx index 80624c0205..24bf1b024d 100644 --- a/docs/organizations/updating-organizations.mdx +++ b/docs/organizations/updating-organizations.mdx @@ -1,14 +1,14 @@ --- title: Build a custom flow for updating an organization -description: Learn how to use Clerk's API to build a custom flow for updating an organization in your application. +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 Clerk's [prebuilt components](/docs/components/overview). +> 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). Organization members with appropriate [permissions](/docs/organizations/roles-permissions) can update an organization. Currently, only the organization name and slug can be updated. -This guide will demonstrate how to use Clerk's API to build a custom flow for updating an organization. +This guide will demonstrate how to use the Clerk API to build a custom flow for updating an organization. diff --git a/docs/organizations/verified-domains.mdx b/docs/organizations/verified-domains.mdx index 7da49ee292..0645b1f849 100644 --- a/docs/organizations/verified-domains.mdx +++ b/docs/organizations/verified-domains.mdx @@ -41,7 +41,7 @@ You can create up to 10 domains per organization to meet your needs. If you need ### Custom flow -If Clerk's \[``] does not meet your specific needs or if you require more control over the logic, you can use the Clerk API to add and verify a domain and update the domain's enrollment mode. Here's an example of how you can do this: +If Clerk's [``](/docs/components/organization/organization-switcher) does not meet your specific needs or if you require more control over the logic, you can use the Clerk API to add and verify a domain and update the domain's enrollment mode. Here's an example of how you can do this: ```tsx const { organization, domains } = useOrganization() diff --git a/docs/organizations/verify-user-permissions.mdx b/docs/organizations/verify-user-permissions.mdx index 87de1b1c46..c4a73a3efc 100644 --- a/docs/organizations/verify-user-permissions.mdx +++ b/docs/organizations/verify-user-permissions.mdx @@ -22,7 +22,7 @@ The following examples work for both SSR and CSR. ", "has()"]}> - The following example uses Clerk's `` component to only render the form for users with the correct permission. The example uses the `fallback` prop to render a different UI if the user is not authorized. + The following example uses the `` component to only render the form for users with the correct permission. The example uses the `fallback` prop to render a different UI if the user is not authorized. ```tsx {{ filename: '/app/dashboard/settings/form.tsx' }} 'use client' @@ -71,7 +71,7 @@ The following examples work for both SSR and CSR. ", "has()", "auth.protect()"]}> - The following example uses Clerk's `` component to only render the layout for users with the correct permission. If the user is not authorized, the component will not render its children. + The following example uses the `` component to only render the layout for users with the correct permission. If the user is not authorized, the component will not render its children. > [!WARNING] > Be cautious when doing authorization checks in layouts, as these don't re-render on navigation, meaning the user session won't be checked on every route change. [Read more in the Next.js docs.](https://nextjs.org/docs/app/building-your-application/authentication#layouts-and-auth-checks) diff --git a/docs/organizations/viewing-memberships.mdx b/docs/organizations/viewing-memberships.mdx index ab22221927..dd3a6c1f80 100644 --- a/docs/organizations/viewing-memberships.mdx +++ b/docs/organizations/viewing-memberships.mdx @@ -1,12 +1,12 @@ --- title: Build a custom flow for viewing a user's organization memberships -description: Learn how to use Clerk's API to 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 view the list of a user's organization memberships using a _prebuilt_ UI, you should use Clerk's [``](/docs/components/organization/organization-list) component. +> 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). -This guide will demonstrate how to use Clerk's API to build a custom flow for viewing the list of a user's organization memberships. +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. diff --git a/docs/quickstarts/expo.mdx b/docs/quickstarts/expo.mdx index f63a9520ba..6724174f32 100644 --- a/docs/quickstarts/expo.mdx +++ b/docs/quickstarts/expo.mdx @@ -250,7 +250,7 @@ description: Add authentication and user management to your Expo app with Clerk. ### Add `sign-up` and `sign-in` pages - Clerk currently only supports control components for Expo native. UI components are only available for Expo web. Instead, you must build [custom flows](/docs/custom-flows/overview) using Clerk's API. The following sections demonstrate how to build [custom email/password sign-up and sign-in flows](/docs/custom-flows/email-password). If you want to use different authentication methods, such as passwordless or OAuth, see the dedicated custom flow guides. + Clerk currently only supports control components for Expo native. UI components are only available for Expo web. Instead, you must build [custom flows](/docs/custom-flows/overview) using the Clerk API. The following sections demonstrate how to build [custom email/password sign-up and sign-in flows](/docs/custom-flows/email-password). If you want to use different authentication methods, such as passwordless or OAuth, see the dedicated custom flow guides. First, protect your `auth` routes in the `layout`. Create a new route group `(auth)` with a `_layout.tsx` file. This layout will redirect users to the home page if they're already signed in: diff --git a/docs/quickstarts/nextjs.mdx b/docs/quickstarts/nextjs.mdx index b9c1fc8f7c..6a81913aa6 100644 --- a/docs/quickstarts/nextjs.mdx +++ b/docs/quickstarts/nextjs.mdx @@ -77,7 +77,7 @@ description: Add authentication and user management to your Next.js app with Cle 1. Create a `middleware.ts` file. - If you're using the `/src` directory, create `middleware.ts` in the `/src` directory. - If you're not using the `/src` directory, create `middleware.ts` in the root directory alongside `.env.local`. - 1. In your `middleware.ts` file, export Clerk's `clerkMiddleware()` helper: + 1. In your `middleware.ts` file, export the `clerkMiddleware()` helper: ```tsx {{ filename: 'middleware.ts' }} import { clerkMiddleware } from '@clerk/nextjs/server' diff --git a/docs/quickstarts/react.mdx b/docs/quickstarts/react.mdx index c2eaa6e5bf..fbe664f474 100644 --- a/docs/quickstarts/react.mdx +++ b/docs/quickstarts/react.mdx @@ -146,7 +146,7 @@ description: Add authentication and user management to your React app with Clerk ### Create a header with Clerk components - You can control which content signed-in and signed-out users can see with Clerk's [prebuilt control components](/docs/components/overview#what-are-control-components). Create a header using the following components: + You can control which content signed-in and signed-out users can see with the [prebuilt control components](/docs/components/overview#what-are-control-components). Create a header using the following components: - [``](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**. - [``](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**. diff --git a/docs/quickstarts/remix.mdx b/docs/quickstarts/remix.mdx index ec08d052c9..16225f5b48 100644 --- a/docs/quickstarts/remix.mdx +++ b/docs/quickstarts/remix.mdx @@ -297,5 +297,5 @@ Learn how to use Clerk to quickly and easily add secure authentication and user --- - [Clerk components](/docs/components/overview) - - Learn more about Clerk's prebuilt components. + - Learn more about the prebuilt components. diff --git a/docs/quickstarts/tanstack-start.mdx b/docs/quickstarts/tanstack-start.mdx index e63f471388..039a6692a0 100644 --- a/docs/quickstarts/tanstack-start.mdx +++ b/docs/quickstarts/tanstack-start.mdx @@ -181,7 +181,7 @@ description: Learn how to use Clerk to quickly and easily add secure authenticat #### Server-side - To protect your routes, create a [server function](https://tanstack.com/router/latest/docs/framework/react/start/server-functions) that checks the user's authentication state via Clerk's [`getAuth()`](/docs/references/tanstack-start/get-auth) method. If the user is not authenticated, they are redirected to a sign-in page. If authenticated, the user's `userId` is passed to the route, allowing access to the `` component, which welcomes the user and displays their `userId`. The [`beforeLoad()`](https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#beforeload-method) method ensures authentication is checked before loading the page, and the [`loader()`](https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#loader-method) method returns the user data for use in the component. + To protect your routes, create a [server function](https://tanstack.com/router/latest/docs/framework/react/start/server-functions) that checks the user's authentication state via the [`getAuth()`](/docs/references/tanstack-start/get-auth) method. If the user is not authenticated, they are redirected to a sign-in page. If authenticated, the user's `userId` is passed to the route, allowing access to the `` component, which welcomes the user and displays their `userId`. The [`beforeLoad()`](https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#beforeload-method) method ensures authentication is checked before loading the page, and the [`loader()`](https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#loader-method) method returns the user data for use in the component. > [!TIP] > Ensure that your app has the [TanStack Start API entry handler](https://tanstack.com/router/latest/docs/framework/react/start/api-routes#setting-up-the-entry-handler) configured in order for your API routes to work. diff --git a/docs/references/astro/endpoints.mdx b/docs/references/astro/endpoints.mdx index 1782947bda..b0454c2936 100644 --- a/docs/references/astro/endpoints.mdx +++ b/docs/references/astro/endpoints.mdx @@ -64,7 +64,7 @@ export async function GET({ locals }) { ## Interact with Clerk's Backend API -The [JavaScript Backend SDK](/docs/references/backend/overview) exposes [Clerk's backend API](/docs/reference/backend-api){{ target: '_blank' }} resources and low-level authentication utilities for JavaScript environments. +The [JavaScript Backend SDK](/docs/references/backend/overview) exposes the [Backend API](/docs/reference/backend-api){{ target: '_blank' }} resources and low-level authentication utilities for JavaScript environments. `clerkClient` exposes an instance of the JavaScript Backend SDK for use in server environments. Use this instance to interact with the Clerk backend API, as shown in the following example: diff --git a/docs/references/astro/hybrid-rendering.mdx b/docs/references/astro/hybrid-rendering.mdx index 657a31eab0..4565d705ae 100644 --- a/docs/references/astro/hybrid-rendering.mdx +++ b/docs/references/astro/hybrid-rendering.mdx @@ -3,7 +3,7 @@ title: Astro hybrid rendering description: Clerk's Astro SDK supports Astro's on-demand rendering output modes (`server` and `hybrid`). --- -Astro's on-demand rendering output modes (`server` and `hybrid`) allow you to pre-render certain pages while keeping others server-rendered. The Clerk Astro SDK supports these output modes out-of-the-box; no additional configuration is required. However, you may need to make some adjustments to your code to ensure that Clerk's [control components](/docs/components/overview#what-are-control-components) are rendered correctly in hybrid mode. +Astro's on-demand rendering output modes (`server` and `hybrid`) allow you to pre-render certain pages while keeping others server-rendered. The Clerk Astro SDK supports these output modes out-of-the-box; no additional configuration is required. However, you may need to make some adjustments to your code to ensure that the [control components](/docs/components/overview#what-are-control-components) are rendered correctly in hybrid mode. ## Server output mode diff --git a/docs/references/astro/react.mdx b/docs/references/astro/react.mdx index 4fe35104d9..1cc36ded9c 100644 --- a/docs/references/astro/react.mdx +++ b/docs/references/astro/react.mdx @@ -45,7 +45,7 @@ If you have not set up your Astro application to work with Clerk, visit the [Ast ### Use Clerk components - You can use Clerk's [prebuilt components](/docs/components/overview) in your Astro pages or regular React components. + You can use the [prebuilt components](/docs/components/overview) in your Astro pages or regular React components. #### Astro pages diff --git a/docs/references/astro/sign-in-store.mdx b/docs/references/astro/sign-in-store.mdx index 179d386d94..da877484f4 100644 --- a/docs/references/astro/sign-in-store.mdx +++ b/docs/references/astro/sign-in-store.mdx @@ -65,4 +65,4 @@ The possible values for the `status` property of the `SignIn` resource are liste ### Create a custom sign-in flow -The `$signInStore` store can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `$signInStore` store to create custom flows, check out the [custom flow guides.](/docs/custom-flows/overview) +The `$signInStore` store can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `$signInStore` store to create custom flows, see the [custom flow guides.](/docs/custom-flows/overview) diff --git a/docs/references/backend/authenticate-request.mdx b/docs/references/backend/authenticate-request.mdx index ca9bef4ae6..debdc96f42 100644 --- a/docs/references/backend/authenticate-request.mdx +++ b/docs/references/backend/authenticate-request.mdx @@ -5,7 +5,7 @@ description: Use Clerk's Backend SDK to verify a token passed from the frontend. {/* clerk/javascript file: https://github.com/clerk/javascript/blob/main/packages/backend/src/tokens/request.ts#L62 */} -Authenticates a token passed from the frontend. Networkless if the `jwtKey` is provided. Otherwise, performs a network call to retrieve the JWKS from [Clerk's Backend API](/docs/reference/backend-api/tag/JWKS#operation/GetJWKS). +Authenticates a token passed from the frontend. Networkless if the `jwtKey` is provided. Otherwise, performs a network call to retrieve the JWKS from the [Backend API](/docs/reference/backend-api/tag/JWKS#operation/GetJWKS). ```ts function authenticateRequest( diff --git a/docs/references/backend/overview.mdx b/docs/references/backend/overview.mdx index 40ead99bb4..1b3d25147d 100644 --- a/docs/references/backend/overview.mdx +++ b/docs/references/backend/overview.mdx @@ -3,9 +3,9 @@ title: JavaScript Backend SDK description: The JavaScript Backend SDK exposes Clerk's backend API resources and low-level authentication utilities for JavaScript environments. --- -Clerk's JavaScript Backend SDK exposes [Clerk's Backend API](/docs/reference/backend-api){{ target: '_blank' }} resources and low-level authentication utilities **for JavaScript environments**. +Clerk's JavaScript Backend SDK exposes the [Backend API](/docs/reference/backend-api){{ target: '_blank' }} resources and low-level authentication utilities **for JavaScript environments**. -For example, if you wanted to get a list of all users in your application, instead of creating a fetch to Clerk's [`https://api.clerk.com/v1/users`](/docs/reference/backend-api/tag/Users#operation/GetUserList){{ target: '_blank' }} endpoint, you can use the [`users.getUserList()`](/docs/references/backend/user/get-user-list) method provided by the JavaScript Backend SDK. +For example, if you wanted to get a list of all users in your application, instead of creating a fetch to [`https://api.clerk.com/v1/users`](/docs/reference/backend-api/tag/Users#operation/GetUserList){{ target: '_blank' }} endpoint, you can use the [`users.getUserList()`](/docs/references/backend/user/get-user-list) method provided by the JavaScript Backend SDK. ## Installation diff --git a/docs/references/backend/verify-token.mdx b/docs/references/backend/verify-token.mdx index 6574f16638..bb2eec4f3d 100644 --- a/docs/references/backend/verify-token.mdx +++ b/docs/references/backend/verify-token.mdx @@ -8,7 +8,7 @@ description: Use Clerk's Backend SDK to verify a token signature. > [!WARNING] > This is a lower-level method intended for more advanced use-cases. It's recommended to use [`authenticateRequest()`](/docs/references/backend/authenticate-request), which fully authenticates a token passed from the `request` object. -Verifies a Clerk-generated token signature. Networkless if the `jwtKey` is provided. Otherwise, performs a network call to retrieve the JWKS from [Clerk's Backend API](/docs/reference/backend-api/tag/JWKS#operation/GetJWKS). +Verifies a Clerk-generated token signature. Networkless if the `jwtKey` is provided. Otherwise, performs a network call to retrieve the JWKS from the [Backend API](/docs/reference/backend-api/tag/JWKS#operation/GetJWKS). ```ts function verifyToken( diff --git a/docs/references/expo/overview.mdx b/docs/references/expo/overview.mdx index 3981a77f3b..d85ce1fe15 100644 --- a/docs/references/expo/overview.mdx +++ b/docs/references/expo/overview.mdx @@ -9,7 +9,7 @@ See [the quickstart](/docs/quickstarts/expo) to get started. ## Custom flow examples -Clerk's prebuilt components are not supported in native applications. You must use Clerk's API to build custom UI's for flows such as signing in and signing up. See the [custom flow](/docs/custom-flows/overview) guides for more information. +Clerk's prebuilt components are not supported in native applications. You must use the Clerk API to build custom UI's for flows such as signing in and signing up. See the [custom flow](/docs/custom-flows/overview) guides for more information. ## Deploy your app diff --git a/docs/references/express/overview.mdx b/docs/references/express/overview.mdx index ed27f686c2..5d817b6080 100644 --- a/docs/references/express/overview.mdx +++ b/docs/references/express/overview.mdx @@ -119,7 +119,7 @@ app.listen(port, () => { ### `clerkClient` -[Clerk's JavaScript Backend SDK](/docs/references/backend/overview) exposes Clerk's Backend API resources and low-level authentication utilities for JavaScript environments. For example, if you wanted to get a list of all users in your application, instead of creating a fetch to Clerk's `https://api.clerk.com/v1/users` endpoint, you can use the `users.getUserList()` method provided by the JavaScript Backend SDK. +[Clerk's JavaScript Backend SDK](/docs/references/backend/overview) exposes the Backend API resources and low-level authentication utilities for JavaScript environments. For example, if you wanted to get a list of all users in your application, instead of creating a fetch to the `https://api.clerk.com/v1/users` endpoint, you can use the `users.getUserList()` method provided by the JavaScript Backend SDK. All resource operations are mounted as sub-APIs on the `clerkClient` object. See the [reference documentation](/docs/references/backend/overview#usage) for more information. diff --git a/docs/references/javascript/clerk/clerk.mdx b/docs/references/javascript/clerk/clerk.mdx index 9dceaa0102..943f90440e 100644 --- a/docs/references/javascript/clerk/clerk.mdx +++ b/docs/references/javascript/clerk/clerk.mdx @@ -466,7 +466,7 @@ function signOut( ## Components -The `Clerk` class also contains a number of methods for interacting with Clerk's prebuilt components. +The `Clerk` class also contains a number of methods for interacting with prebuilt components. ### `` diff --git a/docs/references/javascript/clerk/organization-methods.mdx b/docs/references/javascript/clerk/organization-methods.mdx index b82b5eb80d..cfb90e844e 100644 --- a/docs/references/javascript/clerk/organization-methods.mdx +++ b/docs/references/javascript/clerk/organization-methods.mdx @@ -141,7 +141,7 @@ The following example demonstrates how to retrieve information about the current Creates an organization programatically. > [!NOTE] -> You can use Clerk's [``](/docs/components/organization/create-organization) component if you prefer a prebuilt user interface. +> You can use the [``](/docs/components/organization/create-organization) component if you prefer a prebuilt user interface. ```typescript function createOrganization({ name, slug }: CreateOrganizationParams): Promise diff --git a/docs/references/javascript/web3-wallet/web3-wallet.mdx b/docs/references/javascript/web3-wallet/web3-wallet.mdx index 76eafc4c50..7d3859e005 100644 --- a/docs/references/javascript/web3-wallet/web3-wallet.mdx +++ b/docs/references/javascript/web3-wallet/web3-wallet.mdx @@ -7,7 +7,7 @@ The `Web3Wallet` object describes a Web3 wallet address. The address can be used Web3 addresses must be verified to ensure that they can be assigned to their rightful owners. The verification is completed via Web3 wallet browser extensions, such as [Metamask](https://metamask.io/) and [Coinbase Wallet](https://www.coinbase.com/wallet). The `Web3Wallet3` object holds all the necessary state around the verification process. -The verification process always starts with the [`Web3Wallet.prepareVerification()`](/docs/references/javascript/web3-wallet/verification#prepare-verification) or [`signIn.prepareFirstFactor()`](/docs/references/javascript/sign-in/first-factor#prepare-first-factor) method, which will send the wallet address to Clerk's [Frontend API](/docs/reference/frontend-api){{ target: '_blank' }} and will receive a nonce that needs to be signed by the Web3 wallet browser extension. +The verification process always starts with the [`Web3Wallet.prepareVerification()`](/docs/references/javascript/web3-wallet/verification#prepare-verification) or [`signIn.prepareFirstFactor()`](/docs/references/javascript/sign-in/first-factor#prepare-first-factor) method, which will send the wallet address to the [Frontend API](/docs/reference/frontend-api){{ target: '_blank' }} and will receive a nonce that needs to be signed by the Web3 wallet browser extension. The second and final step involves an attempt to complete the verification by calling [`Web3Wallet.attemptVerification()`](/docs/references/javascript/web3-wallet/verification#attempt-verification) method, passing the generated signature as a parameter. diff --git a/docs/references/nextjs/clerk-middleware.mdx b/docs/references/nextjs/clerk-middleware.mdx index eec3017342..c9b5e0adc1 100644 --- a/docs/references/nextjs/clerk-middleware.mdx +++ b/docs/references/nextjs/clerk-middleware.mdx @@ -173,7 +173,7 @@ There are two methods that you can use: You can use more than one `createRouteMatcher()` in your application if you have two or more groups of routes. -The following example uses the [`has()`](/docs/references/nextjs/auth-object#has) method from Clerk's `auth()` helper. +The following example uses the [`has()`](/docs/references/nextjs/auth-object#has) method from the `auth()` helper. ```tsx {{ filename: 'middleware.ts' }} import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server' diff --git a/docs/references/nextjs/custom-signup-signin-pages.mdx b/docs/references/nextjs/custom-signup-signin-pages.mdx index edf6b342d0..a6f77e7b4a 100644 --- a/docs/references/nextjs/custom-signup-signin-pages.mdx +++ b/docs/references/nextjs/custom-signup-signin-pages.mdx @@ -5,7 +5,7 @@ description: Learn how to add custom sign-in and sign-up pages to your Next.js a This guide shows you how to use the [``](/docs/components/authentication/sign-in) and [``](/docs/components/authentication/sign-up) components with the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments) in order to build custom sign-in and sign-up pages for your Next.js app. -If Clerk's prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, check out the [custom flows](/docs/custom-flows/overview) guides. +If the prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the [custom flow guides.](/docs/custom-flows/overview) > [!NOTE] > Watch the video version of this guide on the Clerk YouTube channel → [YouTube (4 minutes)](https://youtu.be/fsuHLafTYyg). diff --git a/docs/references/nextjs/read-session-data.mdx b/docs/references/nextjs/read-session-data.mdx index 56b2385014..370f7678b3 100644 --- a/docs/references/nextjs/read-session-data.mdx +++ b/docs/references/nextjs/read-session-data.mdx @@ -15,7 +15,7 @@ The `auth()` helper will return the [`Auth`](/docs/references/nextjs/auth-object The `currentUser()` helper will return the [`Backend User`](/docs/references/backend/types/backend-user) object of the currently active user. This is helpful if you want to render information, like their first and last name, directly from the server. -Under the hood, `currentUser()` uses the [`clerkClient`](/docs/references/backend/overview) wrapper to make a call to Clerk's Backend API. **This does count towards the [Backend API Request Rate Limit](/docs/backend-requests/resources/rate-limits#rate-limits)**. This also uses `fetch()` so it is automatically deduped per request. +Under the hood, `currentUser()` uses the [`clerkClient`](/docs/references/backend/overview) wrapper to make a call to the Backend API. **This does count towards the [Backend API request rate limit](/docs/backend-requests/resources/rate-limits#rate-limits)**. This also uses `fetch()` so it is automatically deduped per request. > [!NOTE] > Any requests from a Client Component to a Route Handler will read the session from cookies and will not need the token sent as a Bearer token. diff --git a/docs/references/nextjs/route-handlers.mdx b/docs/references/nextjs/route-handlers.mdx index 142edd928b..50763c4633 100644 --- a/docs/references/nextjs/route-handlers.mdx +++ b/docs/references/nextjs/route-handlers.mdx @@ -89,7 +89,7 @@ export async function GET() { ## Interact with Clerk's Backend API -The [JavaScript Backend SDK](/docs/references/backend/overview) exposes Clerk's [Backend API](/docs/reference/backend-api){{ target: '_blank' }} resources and low-level authentication utilities for JavaScript environments. +The [JavaScript Backend SDK](/docs/references/backend/overview) exposes the [Backend API](/docs/reference/backend-api){{ target: '_blank' }} resources and low-level authentication utilities for JavaScript environments. `clerkClient` exposes an instance of the JavaScript Backend SDK for use in server environments. diff --git a/docs/security/bot-protection.mdx b/docs/security/bot-protection.mdx index 24c8964034..1bf8f04dc1 100644 --- a/docs/security/bot-protection.mdx +++ b/docs/security/bot-protection.mdx @@ -16,4 +16,4 @@ To protect your sign-ups from bots, Clerk leverages data from our CDN to determi ## Limitations - Clerk's Expo SDK does not support **Bot sign-up protection** yet. -- If you're building a custom sign-up flow using Clerk's API, instead of using Clerk components, and you have enabled **Bot sign-up protection**, then you need to ensure you have added a DOM node to render the CAPTCHA widget. Refer to the [Add bot protection to your custom sign-up flow](/docs/custom-flows/bot-sign-up-protection) guide for more information. +- If you're building a custom sign-up flow using the Clerk API, instead of using Clerk components, and you have enabled **Bot sign-up protection**, then you need to ensure you have added a DOM node to render the CAPTCHA widget. Refer to the [Add bot protection to your custom sign-up flow](/docs/custom-flows/bot-sign-up-protection) guide for more information. diff --git a/docs/security/clerk-csp.mdx b/docs/security/clerk-csp.mdx index b5e81c0f2c..5c0b2ac3a7 100644 --- a/docs/security/clerk-csp.mdx +++ b/docs/security/clerk-csp.mdx @@ -1,6 +1,6 @@ --- title: Configure Clerk Content-Security-Policy headers -description: Learn how to configure your Content Security Policy to work with Clerk's APIs. +description: Learn how to configure your Content Security Policy to work with the Clerk APIs. --- [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) headers secure your document by preventing resources from being loaded from unexpected sources. This protects your apps from [XSS](/docs/security/xss-leak-protection#xss-leak-protection) attacks and data injections. @@ -132,7 +132,7 @@ export default function Page() { } ``` -If you're using one of Clerk's React-based SDKs, in order for Clerk to load correctly, the nonce value must also be passed to Clerk's `` component. This can be done by passing the nonce value as a `nonce` prop to the `` component. For example: +If you're using one of Clerk's React-based SDKs, in order for Clerk to load correctly, the nonce value must also be passed to the `` component. This can be done by passing the nonce value as a `nonce` prop to the `` component. For example: ```tsx {{ filename: 'app/layout.tsx' }} import { ClerkProvider } from '@clerk/nextjs' diff --git a/docs/security/user-lock-guide.mdx b/docs/security/user-lock-guide.mdx index c3a8c5653c..daac7f0b98 100644 --- a/docs/security/user-lock-guide.mdx +++ b/docs/security/user-lock-guide.mdx @@ -38,4 +38,4 @@ When a user exceeds the maximum sign-in attempts, the Clerk [``](/docs ![The Clerk component sign-in form with a red alert stating 'Your account is locked. You will be able to try again in 59 minutes. For more information, please contact support.'](/docs/images/security/userlock_login.png) > [!NOTE] -> Currently, users cannot unlock their own account or submit a request to the admin to be unlocked ("self-service unlock"). This is an upcoming feature, so please check Clerk's [changelog](/blog){{ target: '_blank' }} periodically to find out when it is available. Until then, you can [programmatically lock and unlock user accounts with a custom flow](/docs/security/programmatically-lock-user-accounts). +> Currently, users cannot unlock their own account or submit a request to the admin to be unlocked ("self-service unlock"). This is an upcoming feature, so please check the [changelog](https://clerk.com/changelog){{ target: '_blank' }} periodically to find out when it is available. Until then, you can [programmatically lock and unlock user accounts with a custom flow](/docs/security/programmatically-lock-user-accounts). diff --git a/docs/troubleshooting/create-a-minimal-reproduction.mdx b/docs/troubleshooting/create-a-minimal-reproduction.mdx index bf70a49ba1..06978ae992 100644 --- a/docs/troubleshooting/create-a-minimal-reproduction.mdx +++ b/docs/troubleshooting/create-a-minimal-reproduction.mdx @@ -36,7 +36,7 @@ The best way to create a minimal reproduction is to start fresh, with a minimal ### Create a Clerk application - Create a new Clerk application through the Clerk Dashboard. You can follow Clerk's [setup guide](/docs/quickstarts/setup-clerk) to help you get started. + Create a new Clerk application through the Clerk Dashboard. You can follow the [setup guide](/docs/quickstarts/setup-clerk) to help you get started. ### Set the environment variables diff --git a/docs/upgrade-guides/core-2/backend.mdx b/docs/upgrade-guides/core-2/backend.mdx index a1e181d5a0..b34b4d3cd3 100644 --- a/docs/upgrade-guides/core-2/backend.mdx +++ b/docs/upgrade-guides/core-2/backend.mdx @@ -397,7 +397,7 @@ There were some changes made to pagination-related arguments passed into functio ### Changes to some function return signatures -There have been changes to return signatures for some functions. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. This change also aligns the response shape with what is returned from the Clerk backend API. Each impacted function is listed below, along with code examples: +There have been changes to return signatures for some functions. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. This change also aligns the response shape with what is returned from the Clerk backend API. Each impacted function is listed below, along with code examples: Users.getOrganizationMembershipList return signature changed", "Users.getOrganizationInvitationList return signature changed", "Organizations.getOrganizationInvitationList return type changed", "User.getOrganizationMembershipList return type changed", "Users.getOrganizationList return signature changed", "Organization.getOrganizationList return type changed", "Invitations.getInvitationList return signature changed", "Sessions.getSessionList return signature changed", "Users.getUserList return signature changed", "AllowlistIdentifiers.getAllowlistIdentifierList return signature changed", "Clients.getClientList return signature changed", "RedirectUrls.getRedirectUrlList return signature changed", "Users.getUserOauthAccessToken return signature changed", "Users.getOrganizationMembershipList return signature changed"]} @@ -425,7 +425,7 @@ There have been changes to return signatures for some functions. Since Clerk's A - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [5], ins: [6] }} const data = await clerkClient.organizations.getOrganizationInvitationList({ @@ -438,7 +438,7 @@ There have been changes to return signatures for some functions. Since Clerk's A - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { user } = useUser() @@ -461,7 +461,7 @@ There have been changes to return signatures for some functions. Since Clerk's A - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { organization } = useOrganization() diff --git a/docs/upgrade-guides/core-2/chrome-extension.mdx b/docs/upgrade-guides/core-2/chrome-extension.mdx index db6b73ab86..25c572f176 100644 --- a/docs/upgrade-guides/core-2/chrome-extension.mdx +++ b/docs/upgrade-guides/core-2/chrome-extension.mdx @@ -374,7 +374,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [5], ins: [6] }} const data = await clerkClient.organizations.getOrganizationInvitationList({ @@ -387,7 +387,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { user } = useUser() @@ -410,7 +410,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { organization } = useOrganization() diff --git a/docs/upgrade-guides/core-2/component-redesign.mdx b/docs/upgrade-guides/core-2/component-redesign.mdx index 67f2aee131..49183f5943 100644 --- a/docs/upgrade-guides/core-2/component-redesign.mdx +++ b/docs/upgrade-guides/core-2/component-redesign.mdx @@ -89,7 +89,7 @@ The sections below contain more info on each change made to the customization id - When signing in with Clerk's `` component, after entering a username or email the user is brought to a second pane where they can enter a second factor such as a password. On this pane, there is an area called "identity preview" that shows the username/email that they are entering a password/etc for. Previously, this area included the user's avatar, but this is no longer the case in updated designs. As such, the customization ids related to the user's avatar have been removed. + When signing in with the `` component, after entering a username or email the user is brought to a second pane where they can enter a second factor such as a password. On this pane, there is an area called "identity preview" that shows the username/email that they are entering a password/etc for. Previously, this area included the user's avatar, but this is no longer the case in updated designs. As such, the customization ids related to the user's avatar have been removed. diff --git a/docs/upgrade-guides/core-2/fastify.mdx b/docs/upgrade-guides/core-2/fastify.mdx index 2520abe2cf..f473bb0ef8 100644 --- a/docs/upgrade-guides/core-2/fastify.mdx +++ b/docs/upgrade-guides/core-2/fastify.mdx @@ -337,7 +337,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [5], ins: [6] }} const data = await clerkClient.organizations.getOrganizationInvitationList({ @@ -350,7 +350,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { user } = useUser() @@ -373,7 +373,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { organization } = useOrganization() diff --git a/docs/upgrade-guides/core-2/javascript.mdx b/docs/upgrade-guides/core-2/javascript.mdx index 6f554ffa33..e67248ea90 100644 --- a/docs/upgrade-guides/core-2/javascript.mdx +++ b/docs/upgrade-guides/core-2/javascript.mdx @@ -325,7 +325,7 @@ There were some changes made to pagination-related arguments passed into functio ### Changes to some function return signatures -There have been changes to return signatures for some functions. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. This change also aligns the response shape with what is returned from the Clerk backend API. Each impacted function is listed below, along with code examples: +There have been changes to return signatures for some functions. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. This change also aligns the response shape with what is returned from the Clerk backend API. Each impacted function is listed below, along with code examples: Users.getOrganizationMembershipList return signature changed", "Users.getOrganizationInvitationList return signature changed", "Organizations.getOrganizationInvitationList return type changed", "User.getOrganizationMembershipList return type changed", "Users.getOrganizationList return signature changed", "Organization.getOrganizationList return type changed", "Invitations.getInvitationList return signature changed", "Sessions.getSessionList return signature changed", "Users.getUserList return signature changed", "AllowlistIdentifiers.getAllowlistIdentifierList return signature changed", "Clients.getClientList return signature changed", "RedirectUrls.getRedirectUrlList return signature changed", "Users.getUserOauthAccessToken return signature changed"]} @@ -353,7 +353,7 @@ There have been changes to return signatures for some functions. Since Clerk's A - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [5], ins: [6] }} const data = await clerkClient.organizations.getOrganizationInvitationList({ @@ -366,7 +366,7 @@ There have been changes to return signatures for some functions. Since Clerk's A - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { user } = useUser() @@ -389,7 +389,7 @@ There have been changes to return signatures for some functions. Since Clerk's A - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { organization } = useOrganization() diff --git a/docs/upgrade-guides/core-2/nextjs.mdx b/docs/upgrade-guides/core-2/nextjs.mdx index 0eaa28ac96..bd7fbe02fe 100644 --- a/docs/upgrade-guides/core-2/nextjs.mdx +++ b/docs/upgrade-guides/core-2/nextjs.mdx @@ -910,7 +910,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [5], ins: [6] }} const data = await clerkClient.organizations.getOrganizationInvitationList({ @@ -923,7 +923,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { user } = useUser() @@ -946,7 +946,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { organization } = useOrganization() diff --git a/docs/upgrade-guides/core-2/node.mdx b/docs/upgrade-guides/core-2/node.mdx index 21443f82b5..855d451c81 100644 --- a/docs/upgrade-guides/core-2/node.mdx +++ b/docs/upgrade-guides/core-2/node.mdx @@ -459,7 +459,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [5], ins: [6] }} const data = await clerkClient.organizations.getOrganizationInvitationList({ @@ -472,7 +472,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { user } = useUser() @@ -495,7 +495,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { organization } = useOrganization() diff --git a/docs/upgrade-guides/core-2/react.mdx b/docs/upgrade-guides/core-2/react.mdx index cce2066b3f..16a155f905 100644 --- a/docs/upgrade-guides/core-2/react.mdx +++ b/docs/upgrade-guides/core-2/react.mdx @@ -416,7 +416,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [5], ins: [6] }} const data = await clerkClient.organizations.getOrganizationInvitationList({ @@ -429,7 +429,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { user } = useUser() @@ -452,7 +452,7 @@ As part of this major version, a number of previously deprecated props, argument - The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: + The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since the Clerk API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below: ```js {{ del: [4], ins: [5] }} const { organization } = useOrganization() diff --git a/docs/users/invitations.mdx b/docs/users/invitations.mdx index be6fd8845d..e0b61fdd3c 100644 --- a/docs/users/invitations.mdx +++ b/docs/users/invitations.mdx @@ -5,12 +5,12 @@ description: Learn how to invite users to your Clerk application. Inviting users to your Clerk application allows you to onboard new users seamlessly by sending them a unique invitation link. -Once you create an invitation, Clerk sends an email to the invited user with a unique invitation link. When the user visits the invitation link, they will be redirected to Clerk's [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-up) and **their email address will be automatically verified.** If you want to redirect the user to a specific page in your application, you can [specify a redirect URL when creating the invitation.](#redirect-url) +Once you create an invitation, Clerk sends an email to the invited user with a unique invitation link. When the user visits the invitation link, 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.** If you want to redirect the user to a specific page in your application, you can [specify a redirect URL when creating the invitation.](#redirect-url) Invitations expire after a month. If the user clicks on an expired invitation, they will get redirected to the application's sign-up page and will have to go through the normal sign-up flow. Their email address will not be auto-verified. > [!TIP] -> Invitations are only used to invite users to your application. The application will still be available to everyone even without an invitation. If you're looking to restrict access to invited users only, please refer to Clerk's [**Restricted** sign-up mode](/docs/authentication/configuration/restrictions#sign-up-modes). +> Invitations are only used to invite users to your application. The application will still be available to everyone even without an invitation. If you're looking to restrict access to invited users only, refer to the [**Restricted** sign-up mode](/docs/authentication/configuration/restrictions#sign-up-modes). ## Create an invitation @@ -25,7 +25,7 @@ To invite users, navigate to the **Users** page from the top-level menu, then se ### Using Backend API -You can either use a cURL command or Clerk's [JavaScript Backend SDK](/docs/references/backend/overview) to create an invitation. Clerk's JavaScript Backend SDK is a wrapper around the Backend API that makes it easier to interact with the API. Use the following tabs to see examples for each method. +You can either use a cURL command or the [JavaScript Backend SDK](/docs/references/backend/overview) to create an invitation. Clerk's JavaScript Backend SDK is a wrapper around the Backend API that makes it easier to interact with the API. Use the following tabs to see examples for each method. @@ -61,10 +61,10 @@ The following example demonstrates how to use cURL to create an invitation with curl https://api.clerk.com/v1/invitations -X POST -d '{"email_address": "email@example.com", "redirect_url": "https://www.example.com/accept-invitation"}' -H "Authorization:Bearer {{secret}}" -H 'Content-Type:application/json' ``` -Once the user visits the invitation link, they will be redirected to the page you specified, which means you must handle the sign-up flow in your code for that page. You can either embed Clerk's [``](/docs/components/authentication/sign-up) component on that page, or if the prebuilt component doesn't meet your specific needs or if you require more control over the logic, you can build a [custom flow](/docs/custom-flows/invitations). +Once the user visits the invitation link, they will be redirected to the page you specified, which means you must handle the sign-up flow in your code for that page. You can either embed the [``](/docs/components/authentication/sign-up) component on that page, or if the prebuilt component doesn't meet your specific needs or if you require more control over the logic, you can build a [custom flow](/docs/custom-flows/invitations). > [!TIP] -> For testing redirect URL's in your development environment, you can pass your port (`http://localhost:3000`). If you would like to use Clerk's Account Portal, you can pass your Clerk Frontend API URL as the base URL. For example, `https://prepared-phoenix-98.clerk.accounts.dev/sign-up` would send the user to the Account Portal sign-up page. You can find your Frontend API URL in the Clerk Dashboard on the [API Keys](https://dashboard.clerk.com/last-active?path=api-keys) page. On the left side, select **Show API URLs**. +> For testing redirect URL's in your development environment, you can pass your port (`http://localhost:3000`). If you would like to use the Account Portal, you can pass your Clerk Frontend API URL as the base URL. For example, `https://prepared-phoenix-98.clerk.accounts.dev/sign-up` would send the user to the Account Portal sign-up page. You can find your Frontend API URL in the Clerk Dashboard on the [API Keys](https://dashboard.clerk.com/last-active?path=api-keys) page. On the left side, select **Show API URLs**. ### Invitation metadata @@ -99,7 +99,7 @@ To revoke an invitation, navigate to the **Users** page from the top-level menu, ### Using Backend API -You can either use a cURL command or Clerk's [JavaScript Backend SDK](/docs/references/backend/overview) to create an invitation. Use the following tabs to see examples for each method. +You can either use a cURL command or the [JavaScript Backend SDK](/docs/references/backend/overview) to create an invitation. Use the following tabs to see examples for each method. @@ -126,7 +126,7 @@ You can either use a cURL command or Clerk's [JavaScript Backend SDK](/docs/refe Check out [the Backend API reference](/docs/reference/backend-api/tag/Invitations#operation/RevokeInvitation) to see an example of the response. > [!WARNING] -> Revoking an invitation does **not** prevent the user from signing up on their own. If you're looking to restrict access to invited users only, please refer to Clerk's [**Restricted** sign-up mode](/docs/authentication/configuration/restrictions#sign-up-modes). +> Revoking an invitation does **not** prevent the user from signing up on their own. If you're looking to restrict access to invited users only, refer to the [**Restricted** sign-up mode](/docs/authentication/configuration/restrictions#sign-up-modes). ## Custom flow diff --git a/docs/users/overview.mdx b/docs/users/overview.mdx index e0c9a074eb..cccb0c7196 100644 --- a/docs/users/overview.mdx +++ b/docs/users/overview.mdx @@ -3,7 +3,7 @@ title: Users description: Learn how to manage your users in your Clerk application. --- -Depending on your need, Clerk provides a set of tools to manage your users. You can manage user information [in the frontend](#manage-user-information-in-the-frontend) using Clerk's prebuilt components, React hooks, or JavaScript methods, or [in the backend](#manage-user-information-in-the-backend) using the JavaScript Backend SDK. +Depending on your need, Clerk provides a set of tools to manage your users. You can manage user information [in the frontend](#manage-user-information-in-the-frontend) using the prebuilt components, React hooks, or JavaScript methods, or [in the backend](#manage-user-information-in-the-backend) using the JavaScript Backend SDK. ## Understand the `User` object @@ -23,10 +23,10 @@ Clerk provides the prebuilt components [``](/docs/components/user/ If you are using React, the [React SDK](/docs/references/react/use-user) provides hooks to help manage user authentication and profile data. -If Clerk's prebuilt components don't meet your specific needs or if you require more control over the logic, you can use React hooks and JavaScript methods to [rebuild existing Clerk flows.](/docs/custom-flows/overview) +If the prebuilt components don't meet your specific needs or if you require more control over the logic, you can use React hooks and JavaScript methods to [rebuild existing Clerk flows.](/docs/custom-flows/overview) ## Manage user information in the backend -The [JavaScript Backend SDK](/docs/references/backend/overview) exposes Clerk's backend API resources and low-level authentication utilities for JavaScript environments. +The [JavaScript Backend SDK](/docs/references/backend/overview) exposes the Backend API resources and low-level authentication utilities for JavaScript environments. For information about the `User` operations available, such as `getUser()`, `createUser()`, and `deleteUser()`, check out the [Backend SDK reference docs](/docs/references/backend/overview). diff --git a/docs/users/user-impersonation.mdx b/docs/users/user-impersonation.mdx index 2d0a632a3f..bea44b9736 100644 --- a/docs/users/user-impersonation.mdx +++ b/docs/users/user-impersonation.mdx @@ -62,7 +62,7 @@ Once you've successfully created an actor token, you can use the `url` attribute The `url` attribute is a Clerk Frontend API URL that will use the token to sign out existing users and prepare the [`SignIn`](/docs/references/javascript/sign-in/sign-in) object for impersonation. You can directly visit the `url` provided in the response to consume the actor token. -Clerk's [Frontend API](/docs/reference/frontend-api/){{ target: '_blank' }} will redirect you to the `/sign-in` page of your application, where the flow will continue by consuming the `__clerk_ticket` parameter. +The [Frontend API](/docs/reference/frontend-api/){{ target: '_blank' }} will redirect you to the `/sign-in` page of your application, where the flow will continue by consuming the `__clerk_ticket` parameter. ## How to detect impersonated sessions