From 17e7c42ec0166123207e214b618a69032ac2932e Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Wed, 8 Jan 2025 18:32:34 -0800 Subject: [PATCH 1/9] Add React Router 7 compatilibty issue callout (#1866) --- docs/quickstarts/react-router.mdx | 3 +++ docs/references/react-router/overview.mdx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/quickstarts/react-router.mdx b/docs/quickstarts/react-router.mdx index 4f171e5652..7536264e2e 100644 --- a/docs/quickstarts/react-router.mdx +++ b/docs/quickstarts/react-router.mdx @@ -33,6 +33,9 @@ description: Learn how to use Clerk to quickly and easily add secure authenticat Clerk's [React Router SDK](/docs/references/react-router/overview) provides prebuilt components, hooks, and stores to make it easy to integrate authentication and user management in your React Router app. This guide assumes that you're using [React Router v7 or later](https://api.reactrouter.com/v7). +> [!WARNING] +> Due to an active [issue with React Router](https://github.com/remix-run/react-router/issues/12475), Clerk and React Router currently requires using Node.js 22.11 or lower. + ## Install `@clerk/react-router` diff --git a/docs/references/react-router/overview.mdx b/docs/references/react-router/overview.mdx index c7b3b2c883..f2172fd371 100644 --- a/docs/references/react-router/overview.mdx +++ b/docs/references/react-router/overview.mdx @@ -4,7 +4,7 @@ description: Learn how to integrate Clerk into your React Router application usi --- > [!WARNING] -> The React Router SDK is currently in beta. +> Due to an active [issue with React Router](https://github.com/remix-run/react-router/issues/12475), Clerk and React Router currently requires using Node.js 22.11 or lower. The Clerk React Router SDK is built on top of the [React SDK](/docs/references/react/overview) and is the recommended method for integrating Clerk into your React Router application. From bd1cfec5412c91b6fe2db331f09238f923f3e84c Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Thu, 9 Jan 2025 07:58:01 -0800 Subject: [PATCH 2/9] Remove Vue from community SDKs list (#1856) --- docs/manifest.json | 5 ----- 1 file changed, 5 deletions(-) diff --git a/docs/manifest.json b/docs/manifest.json index 02a8a792a0..bedc7fc35e 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -3427,11 +3427,6 @@ "href": "https://github.com/markjaquith/clerk-sveltekit", "icon": "svelte" }, - { - "title": "Vue", - "href": "https://vue-clerk.vercel.app", - "icon": "vue" - }, { "title": "Elysia", "href": "https://github.com/wobsoriano/elysia-clerk", From 22a12a76748ac8cb85f4439afe3c6a0b39628e8d Mon Sep 17 00:00:00 2001 From: Lennart Date: Thu, 9 Jan 2025 21:11:13 +0100 Subject: [PATCH 3/9] fix: Move "SDKs" card on index page to correct place (#1868) Co-authored-by: victoria --- docs/index.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/index.mdx b/docs/index.mdx index 0645869ca2..cfc967dd9f 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -110,12 +110,6 @@ Find all the guides and resources you need to develop with Clerk. - [Ruby on Rails](/docs/references/ruby/overview) - Integrate user management and authentication into your Ruby application. - {} - - --- - - - [SDKs](/docs/references/overview) - - Clerk's SDKs allow you to call the Clerk server API without having to implement the calls yourself. - - {} ## Explore by feature @@ -148,6 +142,12 @@ Find all the guides and resources you need to develop with Clerk. - [Organizations](/docs/organizations/overview) - Organizations are shared accounts, useful for project and team leaders. Members with elevated privileges can manage member access to the organization's data and resources. - {} + + --- + + - [SDKs](/docs/references/overview) + - Clerk's SDKs allow you to call the Clerk server API without having to implement the calls yourself. + - {} ## Learn the concepts From b6c0e34fff4ab19a5cfa4ad4f2879120ab300da2 Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Thu, 9 Jan 2025 15:12:49 -0500 Subject: [PATCH 4/9] Update How Clerk works (#1811) --- docs/how-clerk-works/overview.mdx | 4 +++- docs/how-clerk-works/tokens-signatures.mdx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) 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. + +## More resources + +Learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers using the following guides. + + + - [Prebuilt components](/docs/components/overview) + - Learn more about Clerk's suite of components that let you quickly add authentication to your app. + + --- + + - [Customization & localization](/docs/customization/overview) + - Learn how to customize and localize Clerk components. + + --- + + - [Client-side helpers (composables)](/docs/references/vue/use-user) + - Learn more about Clerk's client-side helpers and how to use them. + From b1dc23e1c67bd5e0b19e2b3309a4de63a94d46bf Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Thu, 9 Jan 2025 15:59:01 -0500 Subject: [PATCH 8/9] fix codeowners (#1871) --- .github/CODEOWNERS | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 + From a653b0badca13a74a7d361e4304314f9b885c491 Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Thu, 9 Jan 2025 13:58:27 -0800 Subject: [PATCH 9/9] Add UI components examples for Vue (#1858) Co-authored-by: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> --- .../authentication/google-one-tap.mdx | 14 ++++- docs/components/authentication/sign-in.mdx | 14 ++++- docs/components/authentication/sign-up.mdx | 14 ++++- docs/components/control/signed-in.mdx | 17 +++++- docs/components/control/signed-out.mdx | 17 +++++- .../organization/create-organization.mdx | 16 ++++- .../organization/organization-list.mdx | 18 +++++- .../organization/organization-profile.mdx | 14 ++++- .../organization/organization-switcher.mdx | 14 ++++- docs/components/protect.mdx | 59 +++++++++++++++++-- docs/components/unstyled/sign-in-button.mdx | 38 ++++++++++-- .../unstyled/sign-in-with-metamask.mdx | 42 +++++++++---- docs/components/unstyled/sign-out-button.mdx | 55 ++++++++++++++--- docs/components/unstyled/sign-up-button.mdx | 38 ++++++++++-- docs/components/user/user-button.mdx | 18 +++++- docs/components/user/user-profile.mdx | 14 ++++- 16 files changed, 356 insertions(+), 46 deletions(-) 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