diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 42d0484f9e..5ff497c190 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1 +1,2 @@ -- @clerk/docs +* @clerk/docs + diff --git a/docs/authentication/social-connections/apple.mdx b/docs/authentication/social-connections/apple.mdx index da76b6f2d9..069446e010 100644 --- a/docs/authentication/social-connections/apple.mdx +++ b/docs/authentication/social-connections/apple.mdx @@ -1,6 +1,6 @@ --- title: Add Apple as a social connection -description: Learn how to allow users to sign into your Clerk app with their Apple ID using OAuth. +description: Learn how to allow users to sign up and sign in to your Clerk app with their Apple ID using OAuth. --- - - Use [Sign in with Apple](https://developer.apple.com/sign-in-with-apple/) to authenticate users with OAuth in your apps and websites. + - Use [Sign in with Apple](https://developer.apple.com/sign-in-with-apple/) to authenticate users with OAuth -Enabling OAuth via [Sign in with Apple](https://developer.apple.com/sign-in-with-apple/) allows your users to sign in and sign up to your Clerk application with their Apple ID. +Enabling OAuth via [Sign in with Apple](https://developer.apple.com/sign-in-with-apple/) allows your users to sign in and sign up to your Clerk app with their Apple ID. ## Configure for your development instance @@ -28,109 +28,105 @@ For _development instances_, Clerk uses preconfigured shared OAuth credentials a To configure your development instance, follow these steps: -1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. -1. Select the **Add connection** button, and select **For all users**. +1. In the Clerk Dashboard, navigate to the [**SSO Connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. +1. Select **Add connection** and select **For all users**. 1. In the **Choose provider** dropdown, select **Apple**. 1. Then, - - For **web based flows**, select **Add connection**. + - For **web-based flows**, select **Add connection**. - For **native sign-in flows**, enable **Use custom credentials** and provide the **Apple Bundle ID**. If you're unsure about how to find this value, see the [Get your Apple Bundle ID](#get-your-apple-bundle-id) section. ## Configure for your production instance -In _production instances_, you must provide custom credentials. +For _production instances_, you must provide custom credentials. -For **web based browser originated flows**, you need to generate and provide your own **Apple Services ID**, **Apple Private Key**, **Apple Team ID**, and **Apple Key ID** using your Apple Developer account. +For **web based browser originated flows**, you must generate and provide your own **Apple Services ID**, **Apple Private Key**, **Apple Team ID**, and **Apple Key ID** using your Apple Developer account. -For **native sign in flows** (iOS, macOS, watchOS, tvOS), you must _at least_ provide your app's **Apple Bundle ID**. For better results, it's recommended to also provide the web based flow fields. +For **native sign-in flows** (iOS, macOS, watchOS, tvOS), you must _at least_ provide your app's **Apple Bundle ID**. For better results, it's recommended to also provide the web based flow fields. -To configure your production instance, follow these steps: +To make the setup process easier, it's recommended to keep two browser tabs open: one for your [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Apple Developer dashboard](https://developer.apple.com/account). ### Enable Apple as a social connection - To get started, you must enable Apple as a social connection in the Clerk Dashboard. - - 1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. - 1. Select the **Add connection** button, and select **For all users**. + 1. In the Clerk Dashboard, navigate to the [**SSO Connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. + 1. Select **Add connection** and select **For all users**. 1. In the **Choose provider** dropdown, select **Apple**. 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. - 1. (For web based flows) Save the **Email Source for Apple Private Email Relay** and **Return URL** values somewhere secure, as you'll need to supply them to Apple later. Leave this page and modal open. + 1. (For web-based flows) Save the **Email Source for Apple Private Email Relay** and **Return URL** values somewhere secure, as you'll need to provide them to Apple later. Keep this page and modal open. ### Get your Apple Team ID - The **Apple Team ID** is _required_ for web based OAuth flows and _recommended_ for native app flows. + The **Apple Team ID** is _required_ for web-based flows and _recommended_ for native app flows. - To get your **Apple Team ID**, you must create a new **App ID** in the Apple Developer portal. + To get your **Apple Team ID**, create a new **App ID** in the Apple Developer portal by following these steps: - 1. In another tab, navigate to the [Apple Developer portal](https://developer.apple.com/account). - 1. Under **Certificates, IDs and Profiles**, select **Identifiers**. - 1. In the dropdown near the top-right of the page, select the **App IDs** option from the list. - 1. Next to **Identifiers** at the top of the page, select the plus icon (+) to register a new identifier. - 1. On the **Register a new identifier** page, select **App IDs**, then select **Continue**. - 1. On the next page, you'll be prompted to **Select a type** for your application. Choose **App** and select **Continue.** You will be redirected to the **Register an App ID** page. - 1. Fill in a description for your **App ID** and a **Bundle ID**. Any value is fine, such as "Clerk demo app" and "clerkdemoapp", respectively. Under **Capabilities**, ensure that **Sign In with Apple** is enabled. Then select **Continue**. You'll be redirected to the **Confirm your App ID** page. - 1. At the top of the page, you'll see your **App ID Prefix**. Save this value somewhere secure, as you'll need it to configure your Clerk app. This is your **App Team ID** in Clerk. - 1. Finally, select **Register**. + 1. On a separate page, navigate to the [Apple Developer dashboard](https://developer.apple.com/account). + 1. Under **Certificates, IDs and Profiles**, select [**Identifiers**](https://developer.apple.com/account/resources/identifiers/list). + 1. In the top-right, select the dropdown and select **App IDs**. + 1. Next to **Identifiers** at the top of the page, select the plus icon (+) to register a new identifier. You'll be redirected to the **Register a new identifier** page. + 1. Select **App IDs**, then select **Continue**. + 1. On the next page, you'll be prompted to **Select a type** for your app. Choose **App** and select **Continue**. You will be redirected to the **Register an App ID** page. + 1. Fill in a description for your **App ID** and a **Bundle ID**. Under **Capabilities**, ensure that **Sign In with Apple** is enabled. Then select **Continue**. You'll be redirected to the **Confirm your App ID** page. + 1. At the top of the page, you'll see your **App ID Prefix**. Save this value somewhere secure. This is your **Apple Team ID** in Clerk. + 1. Finally, select **Register**. You'll be redirected to the **Identifiers** page. ### Get your Apple Services ID - The **Apple Services ID** is _required_ for web based OAuth flows and _recommended_ for native app flows. + The **Apple Services ID** is _required_ for web-based flows and _recommended_ for native app flows. - To get your **Apple Services ID**, you must create a new **Services ID** in the Apple Developer portal. + To get your **Apple Services ID**, create a new **Services ID** in the Apple Developer portal. - 1. You should be back at the **Identifiers** page. - 1. In the dropdown near the top-right of the page, select the **Services IDs** option from the list. - 1. Next to **Identifiers** at the top of the page, select the plus icon (+) to register a new identifier. - 1. On the **Register new identifier** page, select **Services IDs**, then select **Continue**. You'll be redirected to the **Register a Services ID** page. - 1. Add a description for your **Services ID**, and set an **Identifier**. Any value is fine, such as "Clerk demo app" and "clerkdemoapp", respectively. Save the **Identifier** value somewhere secure, as you'll need it to configure your Clerk app. This is your **Services ID** in Clerk. Finally, select **Continue**. + 1. On the **Identifiers** page, in the dropdown near the top-right of the page, select the **Services IDs** option from the list. + 1. Next to **Identifiers** at the top of the page, select the plus icon (+) to register a new identifier. You'll be redirected to the **Register a new identifier** page. + 1. Select **Services IDs**, then select **Continue**. You'll be redirected to the **Register a Services ID** page. + 1. Add a description for your **Services ID**, and set an **Identifier**. Save the **Identifier** value somewhere secure. This is your **Apple Services ID** in Clerk. Finally, select **Continue**. 1. In the confirmation view, select **Register**. 1. After the registration is finished, select the newly-created **Services ID**. Ensure the **Sign In with Apple** box is enabled and select **Configure**. 1. Under **Primary App ID**, select the **App ID** you created in the previous step. - 1. Under **Domains and subdomains**, add your `clerk..com` domain. Under **Return URLS**, add the **Return URL** value you saved from the Clerk Dashboard. For example, if your domain is `myapp.com`, then you would add `clerk.myapp.com` to **Domains and subdomains** and `https://clerk.myapp.com/v1/oauth_callback` to **Return URLS**. - 1. Select **Next**. You'll be redirect to the **Confirm your web authentication configuration** screen. - 1. Select **Done**. You'll be taken back to the **Edit your Services ID Configuration** page. - 1. Select **Continue**. You'll be taken to the confirmation page. - 1. Select **Save**. + 1. Under **Domains and Subdomains**, add your Clerk **Frontend API URL** **without the protocol**. For example, if your domain is `https://myapp.com`, then your **Frontend API URL** is `https://clerk.myapp.com`, and you would add `clerk.myapp.com` to **Domains and Subdomains**. + 1. Under **Return URLS**, add the **Return URL** value you saved from the Clerk Dashboard. + 1. Select **Next**. You'll be redirected to the **Confirm your web authentication configuration** screen. + 1. Select **Done**. You'll be redirected to the **Edit your Services ID Configuration** page. + 1. Select **Continue**. You'll be redirected to the confirmation page. + 1. Select **Save**. You'll be redirected to the **Identifiers** page. ### Get your Apple Private Key and Key ID - The **Apple Private Key** and **Key ID** are _required_ for web based OAuth flows and _recommended_ for native app flows. + The **Apple Private Key** and **Key ID** are _required_ for web-based flows and _recommended_ for native app flows. - To get your **Apple Private Key** and **Key ID**, you must create a new **Key** in the Apple Developer portal. + To get your **Apple Private Key** and **Key ID**, create a new **Key** in the Apple Developer portal. - 1. You should be back at the **Identifiers** page. - 1. In the sidebar, select **Keys**. - 1. Next to **Keys** at the top of the page, select the plus icon (+) to register a new key. - 1. On the **Register a New Key** page, add a **Key Name** and ensure the **Sign In with Apple** box is enabled and select **Configure**. You'll be redirected to the **Configure Key** page. - 1. Under **Primary App ID**, select the **App ID** you created in the first step of this guide. Then select **Save**. You'll be taken back to the previous **Register a New Key** page. - 1. Select **Continue** and you'll be presented with the final confirmation screen. Verify that **Sign in with Apple** is checked and select **Register**. You'll be redirected to the **Download Your Key** page. - 1. Save the **Key ID** value as you'll need to supply it to Clerk later. - 1. Download the private key as a file (as the instructions point out, be sure to backup the key in a secure place as it cannot be redownloaded later). - 1. Select **Done**. + 1. On the **Identifiers** page, in the sidebar, select **Keys**. + 1. Next to **Keys** at the top of the page, select the plus icon (+) to register a new key. You'll be redirected to the **Register a New Key** page. + 1. Add a **Key Name** and ensure the **Sign In with Apple** box is enabled and select **Configure**. You'll be redirected to the **Configure Key** page. + 1. Under **Primary App ID**, select the **App ID** you created in the first step of this guide. Then select **Save**. You'll be redirected to the previous **Register a New Key** page. + 1. Select **Continue** and you'll be presented with the final confirmation screen. Verify that **Sign in with Apple** is checked. Select **Register**. You'll be redirected to the **Download Your Key** page. + 1. Save the **Key ID** value somewhere secure. This is your **Apple Key ID** in Clerk. + 1. Download the private key file. This is your **Apple Private Key** in Clerk. Ensure you back up the key in a secure location, as it cannot be downloaded again later. + 1. Select **Done**. You'll be redirected to the **Keys** page. ### Configure Email Source for Apple Private Relay - This step is _required_ for web based OAuth flows only. + This step is _required_ for web-based flows only. - Apple provides a privacy feature called [Hide My Email](https://support.apple.com/en-us/HT210425#hideemail), in which users can sign in to your app with Apple without revealing their real email addresses. Instead, your instance will receive an app-specific email address that will nevertheless forward any emails to the real user's address. + Apple provides a privacy feature called [Hide My Email](https://support.apple.com/en-us/HT210425#hideemail), allowing users to sign in to your app with Apple without disclosing their actual email addresses. Instead, your instance receives an app-specific email address that forwards any emails to the user real's address. To be able to send emails properly to users with hidden addresses, you must configure an additional setting in the Apple Developer portal. - 1. Return to the **Certificates, Identifiers & Profiles** page. 1. In the sidebar, select **Services**. 1. Under **Sign in with Apple for Email Communication**, select **Configure**. You'll be redirected to the **Configure Sign in with Apple for Email Communication** page. - 1. Next to **Email sources** at the top of the page, select the plus icon (+) to add a new **Email Source**. - 1. In the **Register your email sources** modal that opened, under **Email Addresses**, add the **Email Source for Apple Private Email Relay** value that you saved from the Clerk Dashboard. It should look something like this: `bounces+00000000@clkmail.myapp.com`. - 1. Select **Next**. You'll be taken to the confirmation page. - 1. Select **Register**. - 1. On the completion page, select **Done**. + 1. Next to **Email Sources** at the top of the page, select the plus icon (+) to add a new **Email Source**. + 1. In the **Register your email sources** modal that opens, under **Email Addresses**, add the **Email Source for Apple Private Email Relay** value that you saved from the Clerk Dashboard. It should look something like this: `bounces+00000000@clkmail.myapp.com`. + 1. Select **Next**. The modal will redirect to the **Confirm your email sources** page. + 1. Select **Register**. The modal will redirect to the **Email Source Registration Complete** screen. + 1. Select **Done**. - After this, you should now see the email address added to the list, and it should be marked as verified with a green check icon. If it does not appear as verified yet, DNS propagation may take some time to complete so wait before trying to select the **Reverify SPF** button. + After this step, the email address should appear in the list and display a green check icon, indicating it has been verified. If it's not marked as verified yet, DNS propagation may still be in progress. Wait for the propagation to complete before attempting to select **Reverify SPF**. For more info about Apple's Private Relay service, refer to the following documentation: - [https://support.apple.com/en-us/HT210425#hideemail](https://support.apple.com/en-us/HT210425#hideemail) - - [https://help.apple.com/developer-account/?lang=en#/devf822fb8fc](https://help.apple.com/developer-account/?lang=en#/devf822fb8fc) + - [https://developer.apple.com/help/account/configure-app-capabilities/configure-private-email-relay-service](https://developer.apple.com/help/account/configure-app-capabilities/configure-private-email-relay-service) ### Get your Apple Bundle ID @@ -142,11 +138,11 @@ To configure your production instance, follow these steps: 1. Under **Certificates, IDs and Profiles**, select **Identifiers**. 1. In the dropdown near the top-right of the page, select the **App IDs** option from the list. 1. If you've already set up your project in XCode, your Bundle ID should be already registered. Otherwise, follow the steps below to create a new identifier. - 1. Next to **Identifiers** at the top of the page, select the plus icon (+) to register a new identifier. - 1. On the **Register a new identifier** page, select **App IDs**, then select **Continue**. - 1. On the next page, you'll be prompted to **Select a type** for your application. Choose **App** and select **Continue.** You will be redirected to the **Register an App ID** page. - 1. Fill in a description for your **App ID** and a **Bundle ID**. Any value is fine, such as "Clerk demo app" and "clerkdemoapp", respectively. Under **Capabilities**, ensure that **Sign In with Apple** is enabled. Then select **Continue**. You'll be redirected to the **Confirm your App ID** page. - 1. At the top of the page, you'll see your **Bundle ID**. Save this value somewhere secure, as you'll need it to configure your Clerk app. This is your **Apple Bundle ID** in Clerk. + 1. Next to **Identifiers** at the top of the page, select the plus icon (+) to register a new identifier. You'll be redirected to the **Register a new identifier** page. + 1. Select **App IDs**, then select **Continue**. + 1. On the next page, you'll be prompted to **Select a type** for your app. Choose **App** and select **Continue**. You'll be redirected to the **Register an App ID** page. + 1. Fill in a description for your **App ID** and a **Bundle ID**. Under **Capabilities**, ensure that **Sign In with Apple** is enabled. Then select **Continue**. You'll be redirected to the **Confirm your App ID** page. + 1. At the top of the page, you'll see your **Bundle ID**. Save this value somewhere secure. This is your **Apple Bundle ID** in Clerk. 1. Finally, select **Register**. ### Connect your Apple app to your Clerk app @@ -161,17 +157,17 @@ To configure your production instance, follow these steps: Connect your Apple app to your Clerk app by adding these values to the Clerk Dashboard. - 1. Navigate back to the tab where the Clerk Dashboard and your Apple configuration modal is open. - 1. Add all the corresponding fields depending on your desired flow. For the **Apple Private Key** file, open it with a text editor and just copy/paste the contents. + 1. Navigate back to the Clerk Dashboard where the configuration modal should still be open. + 1. Add all the corresponding fields depending on your desired flow. For the **Apple Private Key** file, open it with a text editor and copy/paste the contents. 1. Select **Add connection**. ### Test your OAuth - The simplest way to test your OAuth is to visit your Clerk application's [Account Portal](/docs/customization/account-portal/overview), which is available for all Clerk applications out-of-the-box. + The simplest way to test your OAuth is to visit your Clerk app's [Account Portal](/docs/customization/account-portal/overview), which is available for all Clerk apps out-of-the-box. 1. In the Clerk Dashboard, navigate to the [**Account Portal**](https://dashboard.clerk.com/last-active?path=account-portal) page. 1. Next to the **Sign-in** URL, select **Visit**. The URL should resemble: - - **For development** – `https://your-domain.accounts.dev/sign-in` - - **For production** – `https://accounts.your-domain.com/sign-in` - 1. On the sign-in page, you should see **Apple** as an option. Use it to sign in with your Apple account. + - **For development** - `https://your-domain.accounts.dev/sign-in` + - **For production** - `https://accounts.your-domain.com/sign-in` + 1. Sign in with your Apple account. diff --git a/docs/components/authentication/google-one-tap.mdx b/docs/components/authentication/google-one-tap.mdx index c6f746f335..8a522f5172 100644 --- a/docs/components/authentication/google-one-tap.mdx +++ b/docs/components/authentication/google-one-tap.mdx @@ -54,7 +54,7 @@ The following example includes basic implementation of the `` co > [!NOTE] > `` does not render if the user is already signed into your Clerk application, so there's no need to manually check if a user is signed in yourself before rendering it. - + ```tsx {{ filename: 'app/layout.tsx', mark: [2, 11] }} import React from 'react' @@ -91,6 +91,18 @@ The following example includes basic implementation of the `` co ``` + + + ```vue {{ filename: 'App.vue' }} + + + + ``` + ## Usage with JavaScript diff --git a/docs/components/authentication/sign-in.mdx b/docs/components/authentication/sign-in.mdx index 23fd487615..9700d1a302 100644 --- a/docs/components/authentication/sign-in.mdx +++ b/docs/components/authentication/sign-in.mdx @@ -102,7 +102,7 @@ All props are optional. The following example includes basic implementation of the `` component. You can use this as a starting point for your own implementation. - + The following example demonstrates how you can use the `` component on a public page. @@ -157,6 +157,18 @@ The following example includes basic implementation of the `` componen ``` + + + ```vue {{ filename: 'sign-in.vue' }} + + + + ``` + ## Usage with JavaScript diff --git a/docs/components/authentication/sign-up.mdx b/docs/components/authentication/sign-up.mdx index c4179ac72d..86eed7c419 100644 --- a/docs/components/authentication/sign-up.mdx +++ b/docs/components/authentication/sign-up.mdx @@ -95,7 +95,7 @@ All props are optional. The following example includes basic implementation of the `` component. You can use this as a starting point for your own implementation. - + The following example demonstrates how you can use the `` component on a public page. @@ -150,6 +150,18 @@ The following example includes basic implementation of the `` componen ``` + + + ```vue {{ filename: 'sign-up.vue' }} + + + + ``` + ## Usage with JavaScript diff --git a/docs/components/control/signed-in.mdx b/docs/components/control/signed-in.mdx index 1f4ce5de05..e68ba6122d 100644 --- a/docs/components/control/signed-in.mdx +++ b/docs/components/control/signed-in.mdx @@ -9,7 +9,7 @@ The `` component offers authentication checks as a cross-cutting conce ## Usage - + ```tsx {{ filename: 'app.tsx' }} import '@/styles/globals.css' @@ -80,6 +80,21 @@ The `` component offers authentication checks as a cross-cutting conce
Always visible
``` + + + ```vue {{ filename: 'App.vue' }} + + + + ``` + ### Usage with React Router diff --git a/docs/components/control/signed-out.mdx b/docs/components/control/signed-out.mdx index 13b17b0aa3..f34504f66f 100644 --- a/docs/components/control/signed-out.mdx +++ b/docs/components/control/signed-out.mdx @@ -7,7 +7,7 @@ The `` component offers authentication checks as a cross-cutting conc ## Usage - + ```tsx {{ filename: 'app.tsx' }} import '@/styles/globals.css' @@ -108,4 +108,19 @@ The `` component offers authentication checks as a cross-cutting conc
Always visible
``` + + + ```vue {{ filename: 'App.vue' }} + + + + ``` + diff --git a/docs/components/organization/create-organization.mdx b/docs/components/organization/create-organization.mdx index 59fbc6e006..9c9354892f 100644 --- a/docs/components/organization/create-organization.mdx +++ b/docs/components/organization/create-organization.mdx @@ -64,7 +64,7 @@ All props are optional. The following example includes a basic implementation of the `` component. You can use this as a starting point for your own implementation. - + ```jsx {{ filename: 'app/create-organization/[[...create-organization]]/page.tsx' }} import { CreateOrganization } from '@clerk/nextjs' @@ -76,7 +76,7 @@ The following example includes a basic implementation of the ` - ```jsx {{ filename: '/create-organization.tsx' }} + ```jsx {{ filename: 'create-organization.tsx' }} import { CreateOrganization } from '@clerk/clerk-react' export default function CreateOrganizationPage() { @@ -104,6 +104,18 @@ The following example includes a basic implementation of the ` ``` + + + ```vue {{ filename: 'create-organization.vue' }} + + + + ``` + ## Usage with JavaScript diff --git a/docs/components/organization/organization-list.mdx b/docs/components/organization/organization-list.mdx index e6488da233..d73107c689 100644 --- a/docs/components/organization/organization-list.mdx +++ b/docs/components/organization/organization-list.mdx @@ -69,7 +69,7 @@ All props are optional. ## Usage with frameworks - + ```jsx {{ filename: 'app/discover/page.tsx' }} import { OrganizationList } from '@clerk/nextjs' @@ -131,6 +131,22 @@ All props are optional. /> ``` + + + ```vue {{ filename: 'organization-list.vue' }} + + + + ``` + ## Usage with JavaScript diff --git a/docs/components/organization/organization-profile.mdx b/docs/components/organization/organization-profile.mdx index 87fc688e18..0891523fe7 100644 --- a/docs/components/organization/organization-profile.mdx +++ b/docs/components/organization/organization-profile.mdx @@ -59,7 +59,7 @@ All props are optional. ## Usage with frameworks - + You can embed the `` component using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes). This allows you to redirect the user inside your application. @@ -101,6 +101,18 @@ All props are optional. ``` + + + ```vue {{ filename: 'organization-profile.vue' }} + + + + ``` + ## Usage with JavaScript diff --git a/docs/components/organization/organization-switcher.mdx b/docs/components/organization/organization-switcher.mdx index 505ac2446e..bd274f8e4c 100644 --- a/docs/components/organization/organization-switcher.mdx +++ b/docs/components/organization/organization-switcher.mdx @@ -108,7 +108,7 @@ All props below are optional. ## Usage with frameworks - + ```jsx {{ filename: 'app/organization-switcher/[[...organization-switcher]]/page.tsx' }} import { OrganizationSwitcher } from '@clerk/nextjs' @@ -160,6 +160,18 @@ All props below are optional. ``` + + + ```vue {{ filename: 'organization-switcher.vue' }} + + + + ``` + ## Usage with JavaScript diff --git a/docs/components/protect.mdx b/docs/components/protect.mdx index e9f90fe55e..19089fa429 100644 --- a/docs/components/protect.mdx +++ b/docs/components/protect.mdx @@ -50,7 +50,7 @@ For more complex authorization logic, [pass conditional logic to the `condition` The children of the following component will only be visible to users with roles that have the `org:invoices:create` permission. - + ```jsx import { Protect } from '@clerk/nextjs' @@ -97,13 +97,30 @@ The children of the following component will only be visible to users with roles ``` + + + ```vue + + + + ``` + ### Render content by role -While authorization by `permission` is recommended, for convenience, `` allows a `role` prop to be passed. The children of the following component will only be visible to users with the `org:billing` role. +While authorization by `permission` is **recommended**, for convenience, `` allows a `role` prop to be passed. The children of the following component will only be visible to users with the `org:billing` role. - + ```jsx import { Protect } from '@clerk/nextjs' @@ -150,13 +167,30 @@ While authorization by `permission` is recommended, for convenience, `` ``` + + + ```vue + + + + ``` + ### Render content conditionally The following example uses ``'s `condition` prop to conditionally render its children if the user has the correct role. - + ```tsx {{ filename: 'app/dashboard/settings/layout.tsx' }} import type { PropsWithChildren } from 'react' @@ -187,4 +221,21 @@ The following example uses ``'s `condition` prop to conditionally rende ``` + + + ```vue + + + + ``` + diff --git a/docs/components/unstyled/sign-in-button.mdx b/docs/components/unstyled/sign-in-button.mdx index 9bbcd55c30..d90e0c71d3 100644 --- a/docs/components/unstyled/sign-in-button.mdx +++ b/docs/components/unstyled/sign-in-button.mdx @@ -67,7 +67,7 @@ The `` component is a button that links to the sign-in page or dis ### Basic usage - + ```jsx {{ filename: 'pages/index.js' }} import { SignInButton } from '@clerk/nextjs' @@ -107,13 +107,25 @@ The `` component is a button that links to the sign-in page or dis ``` + + + ```vue {{ filename: 'example.vue' }} + + + + ``` + ### Custom usage You can create a custom button by wrapping your own button, or button text, in the `` component. - + ```jsx {{ filename: 'pages/index.js' }} import { SignInButton } from '@clerk/nextjs' @@ -121,7 +133,7 @@ You can create a custom button by wrapping your own button, or button text, in t export default function Home() { return ( - + ) } @@ -135,7 +147,7 @@ You can create a custom button by wrapping your own button, or button text, in t export default function Example() { return ( - + ) } @@ -149,7 +161,7 @@ You can create a custom button by wrapping your own button, or button text, in t export default function Home() { return ( - + ) } @@ -165,8 +177,22 @@ You can create a custom button by wrapping your own button, or button text, in t --- - + ``` + + + ```vue {{ filename: 'example.vue' }} + + + + ``` + diff --git a/docs/components/unstyled/sign-in-with-metamask.mdx b/docs/components/unstyled/sign-in-with-metamask.mdx index 1ac99a6564..75a84a3ec6 100644 --- a/docs/components/unstyled/sign-in-with-metamask.mdx +++ b/docs/components/unstyled/sign-in-with-metamask.mdx @@ -9,14 +9,13 @@ The `` component is used to complete a one-click, cryp ### Basic usage - + ```jsx {{ filename: 'pages/index.js' }} import { SignInWithMetamaskButton } from '@clerk/nextjs' export default function Home() { return (
-

Sign in

) @@ -29,7 +28,6 @@ The `` component is used to complete a one-click, cryp export default function Example() { return (
-

Sign in

) @@ -42,28 +40,38 @@ The `` component is used to complete a one-click, cryp export default function Home() { return (
-

Sign in

) } ``` + + ```vue {{ filename: 'example.vue' }} + + + + ``` ### Custom usage In some cases, you will want to use your own button, or button text. You can do that by wrapping your button in the `` component. - + ```jsx {{ filename: 'pages/index.js' }} import { SignInWithMetamaskButton } from '@clerk/nextjs' export default function Home() { return (
-

Sign in

- +
) @@ -76,9 +84,8 @@ In some cases, you will want to use your own button, or button text. You can do export default function Example() { return (
-

Sign in

- +
) @@ -91,12 +98,25 @@ In some cases, you will want to use your own button, or button text. You can do export default function Home() { return (
-

Sign in

- +
) } ``` + + ```vue {{ filename: 'example.vue' }} + + + + ``` diff --git a/docs/components/unstyled/sign-out-button.mdx b/docs/components/unstyled/sign-out-button.mdx index 0b19ea3483..885a6e403a 100644 --- a/docs/components/unstyled/sign-out-button.mdx +++ b/docs/components/unstyled/sign-out-button.mdx @@ -57,7 +57,7 @@ The type of the `signOutOptions` prop for the `` component is def ### Basic usage - + ```jsx {{ filename: 'app/page.js' }} import { SignOutButton } from '@clerk/nextjs' @@ -97,13 +97,25 @@ The type of the `signOutOptions` prop for the `` component is def ``` + + + ```vue {{ filename: 'pages/index.vue' }} + + + + ``` + ### Custom usage You can create a custom button by wrapping your own button, or button text, in the `` component. - + ```jsx {{ filename: 'app/page.js' }} import { SignOutButton } from '@clerk/nextjs' @@ -111,7 +123,7 @@ You can create a custom button by wrapping your own button, or button text, in t export default function Home() { return ( - + ) } @@ -125,7 +137,7 @@ You can create a custom button by wrapping your own button, or button text, in t export default function Example() { return ( - + ) } @@ -139,7 +151,7 @@ You can create a custom button by wrapping your own button, or button text, in t export default function Home() { return ( - + ) } @@ -155,10 +167,24 @@ You can create a custom button by wrapping your own button, or button text, in t --- - + ``` + + + ```vue {{ filename: 'example.vue' }} + + + + ``` + ### Multi-session usage @@ -173,7 +199,7 @@ You can sign out of a specific session by passing in a `sessionId` to the `signO In the following example, the `sessionId` is retrieved from the [`useAuth()`](/docs/references/react/use-auth) hook. If the user is not signed in, the `sessionId` will be `null`, and the user is shown the [``](/docs/components/unstyled/sign-in-button) component. If the user is signed in, the user is shown the `` component, which when clicked, signs the user out of that specific session. - + ```tsx {{ filename: 'app/page.tsx' }} 'use client' @@ -223,4 +249,19 @@ In the following example, the `sessionId` is retrieved from the [`useAuth()`](/d } ``` + + + ```vue {{ filename: 'example.vue' }} + + + + ``` + diff --git a/docs/components/unstyled/sign-up-button.mdx b/docs/components/unstyled/sign-up-button.mdx index 54b69d26f7..af6fb512d8 100644 --- a/docs/components/unstyled/sign-up-button.mdx +++ b/docs/components/unstyled/sign-up-button.mdx @@ -67,7 +67,7 @@ The `` component is a button that links to the sign-up page or dis ### Basic usage - + ```jsx {{ filename: 'pages/index.js' }} import { SignUpButton } from '@clerk/nextjs' @@ -107,13 +107,25 @@ The `` component is a button that links to the sign-up page or dis ``` + + + ```vue {{ filename: 'example.vue' }} + + + + ``` + ### Custom usage You can create a custom button by wrapping your own button, or button text, in the `` component. - + ```jsx {{ filename: 'pages/index.js' }} import { SignUpButton } from '@clerk/nextjs' @@ -121,7 +133,7 @@ You can create a custom button by wrapping your own button, or button text, in t export default function Home() { return ( - + ) } @@ -135,7 +147,7 @@ You can create a custom button by wrapping your own button, or button text, in t export default function Example() { return ( - + ) } @@ -149,7 +161,7 @@ You can create a custom button by wrapping your own button, or button text, in t export default function Home() { return ( - + ) } @@ -165,8 +177,22 @@ You can create a custom button by wrapping your own button, or button text, in t --- - + ``` + + + ```vue {{ filename: 'example.vue' }} + + + + ``` + diff --git a/docs/components/user/user-button.mdx b/docs/components/user/user-button.mdx index 6771014ded..90960fb621 100644 --- a/docs/components/user/user-button.mdx +++ b/docs/components/user/user-button.mdx @@ -94,7 +94,7 @@ All props are optional. In the following example, `` is mounted inside a header component, which is a common pattern on many websites and applications. When the user is signed in, they will see their avatar and be able to open the popup menu. - + ```tsx {{ filename: 'layout.tsx' }} @@ -254,6 +254,22 @@ In the following example, `` is mounted inside a header component, ``` + + + ```vue {{ filename: 'header.vue' }} + + + + ``` + ## Usage with JavaScript diff --git a/docs/components/user/user-profile.mdx b/docs/components/user/user-profile.mdx index 82570040f2..cf56e25d12 100644 --- a/docs/components/user/user-profile.mdx +++ b/docs/components/user/user-profile.mdx @@ -55,7 +55,7 @@ All props are optional. ## Usage with frameworks - + You can embed the `` component using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes). This allows you to redirect the user inside your application. @@ -107,6 +107,18 @@ All props are optional. ``` + + + ```vue {{ filename: 'user.vue' }} + + + + ``` + ## Usage with JavaScript diff --git a/docs/how-clerk-works/overview.mdx b/docs/how-clerk-works/overview.mdx index 7b54e02a7f..588078767f 100644 --- a/docs/how-clerk-works/overview.mdx +++ b/docs/how-clerk-works/overview.mdx @@ -178,7 +178,9 @@ This example assumes that the user already signed up and their credentials are s > > --- > - > This is a great test of your mastery of [how cookies work](/docs/how-clerk-works/cookies)! For security reasons, the domain of a cookie can only be set as the domain of the server that set the cookie. The server that is returning the request to your application is FAPI. For the client cookie, this is ok, since the client cookie is set on FAPI. However, FAPI cannot set a cookie with your app's domain because it's not your app. Remember, if your app is running at `example.com`, FAPI would run at `clerk.example.com`. Instead, FAPI it sends back the **JWT value** of the session cookie in its response, and Clerk's client side SDK picks it up and uses javascript to set the session cookie on your app directly, since the javascript is running on your app's domain. + > This is a great test of your mastery of [how cookies work](/docs/how-clerk-works/cookies)! + > + > Remember, **the domain of a cookie can only be set as the domain of the server that set the cookie**. In this case, the server returning the request to your app is FAPI. For the **client cookie**, this is ok, since the **client cookie** needs to be set on FAPI. However, the **session cookie** needs to be set on your app's domain, not on FAPI. So, FAPI returns the **JWT value** of the session cookie in its response, and when the Clerk client-side SDK integrated in your app receives the response, it gets the **JWT value** and uses JavaScript to set the **session cookie** on your app directly, since the JavaScript is running on your app's domain.