diff --git a/docs/_partials/react-hooks.mdx b/docs/_partials/react-hooks.mdx index 594ffdf1e8..a84452f5eb 100644 --- a/docs/_partials/react-hooks.mdx +++ b/docs/_partials/react-hooks.mdx @@ -1,9 +1,9 @@ -- [`useUser()`](/docs/references/react/use-user){{ target: '_blank' }} -- [`useClerk()`](/docs/references/react/use-clerk){{ target: '_blank' }} -- [`useAuth()`](/docs/references/react/use-auth){{ target: '_blank' }} -- [`useSignIn()`](/docs/references/react/use-sign-in){{ target: '_blank' }} -- [`useSignUp()`](/docs/references/react/use-sign-up){{ target: '_blank' }} -- [`useSession()`](/docs/references/react/use-session){{ target: '_blank' }} -- [`useSessionList()`](/docs/references/react/use-session-list){{ target: '_blank' }} -- [`useOrganization()`](/docs/references/react/use-organization){{ target: '_blank' }} -- [`useOrganizationList()`](/docs/references/react/use-organization-list){{ target: '_blank' }} +- [`useUser()`](/docs/sdk/react/use-user){{ target: '_blank' }} +- [`useClerk()`](/docs/sdk/react/use-clerk){{ target: '_blank' }} +- [`useAuth()`](/docs/sdk/react/use-auth){{ target: '_blank' }} +- [`useSignIn()`](/docs/sdk/react/use-sign-in){{ target: '_blank' }} +- [`useSignUp()`](/docs/sdk/react/use-sign-up){{ target: '_blank' }} +- [`useSession()`](/docs/sdk/react/use-session){{ target: '_blank' }} +- [`useSessionList()`](/docs/sdk/react/use-session-list){{ target: '_blank' }} +- [`useOrganization()`](/docs/sdk/react/use-organization){{ target: '_blank' }} +- [`useOrganizationList()`](/docs/sdk/react/use-organization-list){{ target: '_blank' }} diff --git a/docs/_partials/vue-nuxt/composables.mdx b/docs/_partials/vue-nuxt/composables.mdx index 5b454d6c23..7ef0abff00 100644 --- a/docs/_partials/vue-nuxt/composables.mdx +++ b/docs/_partials/vue-nuxt/composables.mdx @@ -1,8 +1,8 @@ -- [`useUser()`](/docs/references/vue/use-user) -- [`useClerk()`](/docs/references/vue/use-clerk) -- [`useAuth()`](/docs/references/vue/use-auth) -- [`useSignIn()`](/docs/references/vue/use-sign-in) -- [`useSignUp()`](/docs/references/vue/use-sign-up) -- [`useSession()`](/docs/references/vue/use-session) -- [`useSessionList()`](/docs/references/vue/use-session-list) -- [`useOrganization()`](/docs/references/vue/use-organization) +- [`useUser()`](/docs/sdk/vue/use-user) +- [`useClerk()`](/docs/sdk/vue/use-clerk) +- [`useAuth()`](/docs/sdk/vue/use-auth) +- [`useSignIn()`](/docs/sdk/vue/use-sign-in) +- [`useSignUp()`](/docs/sdk/vue/use-sign-up) +- [`useSession()`](/docs/sdk/vue/use-session) +- [`useSessionList()`](/docs/sdk/vue/use-session-list) +- [`useOrganization()`](/docs/sdk/vue/use-organization) diff --git a/docs/_partials/vue-nuxt/use-auth.mdx b/docs/_partials/vue-nuxt/use-auth.mdx index 9201766300..71e5b4131f 100644 --- a/docs/_partials/vue-nuxt/use-auth.mdx +++ b/docs/_partials/vue-nuxt/use-auth.mdx @@ -1,4 +1,4 @@ -The `useAuth()` composable provides access to the current user's authentication state and methods to manage the active session. You can use this composable to protect [pages](/docs/references/nuxt/protect-pages). +The `useAuth()` composable provides access to the current user's authentication state and methods to manage the active session. You can use this composable to protect [pages](/docs/sdk/nuxt/protect-pages). In the following example, the `isLoaded` property checks if Clerk has finished initializing and the `userId` property checks if the user is signed in. diff --git a/docs/advanced-usage/satellite-domains.mdx b/docs/advanced-usage/satellite-domains.mdx index 5ffb193f48..98c179e90d 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 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. +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/sdk/react/use-sign-in) hook for sign-in and [``](/docs/components/authentication/sign-up) component or [`useSignUp()`](/docs/sdk/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, see the [setup guide](/docs/quickstarts/setup-clerk). + > For more information about creating your application, see the [setup guide](/docs/getting-started). ### Add your first satellite domain @@ -322,7 +322,7 @@ To access authentication state from a satellite domain, users will be transparen - In a Remix application, you must set the properties in the [`ClerkApp`](/docs/references/remix/clerk-app) wrapper. + In a Remix application, you must set the properties in the [`ClerkApp`](/docs/sdk/remix/clerk-app) wrapper. - In the root file associated with your primary domain, you only need to configure the `signInUrl` prop: diff --git a/docs/advanced-usage/using-proxies.mdx b/docs/advanced-usage/using-proxies.mdx index 44af0b488b..a07f360d7e 100644 --- a/docs/advanced-usage/using-proxies.mdx +++ b/docs/advanced-usage/using-proxies.mdx @@ -20,7 +20,7 @@ When using a proxy, all requests to the Frontend API will be made through your d To get started, you need to create an application from the [Clerk Dashboard](https://dashboard.clerk.com/). Once you create an instance via the Clerk Dashboard, you will be prompted to choose a domain. For the purposes of this guide, the domain will be `app.dev`. > [!NOTE] - > For more information on creating a Clerk application, see the [setup guide](/docs/quickstarts/setup-clerk). + > For more information on creating a Clerk application, see the [setup guide](/docs/getting-started). ### Configure your proxy server @@ -239,7 +239,7 @@ When using a proxy, all requests to the Frontend API will be made through your d - To configure your proxy setup using properties in your Remix application, set the `proxyUrl` property on the [`ClerkApp`](/docs/references/remix/clerk-app) wrapper. + To configure your proxy setup using properties in your Remix application, set the `proxyUrl` property on the [`ClerkApp`](/docs/sdk/remix/clerk-app) wrapper. ```tsx {{ filename: 'root.tsx' }} export const loader = (args) => { diff --git a/docs/authentication/overview.mdx b/docs/authentication/overview.mdx index 751d726583..1a05f7ea86 100644 --- a/docs/authentication/overview.mdx +++ b/docs/authentication/overview.mdx @@ -9,4 +9,4 @@ Clerk supports multiple authentication strategies so that you can implement the Clerk's configuration settings affect how the users of your application can [sign up and sign in](/docs/authentication/configuration/sign-up-sign-in-options) and which properties are editable via their user profile. You can also manage [user sessions](/docs/authentication/configuration/session-options), [control who gets access](/docs/authentication/configuration/restrictions) to your application, and [customize the email & SMS messages](/docs/authentication/configuration/email-sms-templates) that are sent by Clerk during authentication flows. All of these settings can be found under the **User & Authentication** section in the [Clerk Dashboard](https://dashboard.clerk.com/). -For more information on how to set up your application, see the [setup guide](/docs/quickstarts/setup-clerk). +For more information on how to set up your application, see the [setup guide](/docs/getting-started). diff --git a/docs/authentication/social-connections/atlassian.mdx b/docs/authentication/social-connections/atlassian.mdx index c145d1b1ad..cb6eb4f4c4 100644 --- a/docs/authentication/social-connections/atlassian.mdx +++ b/docs/authentication/social-connections/atlassian.mdx @@ -18,7 +18,7 @@ For production instances, you will need to generate your own Client ID and Clien ## Before you start -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/getting-started). - You need to have a Atlassian developer account. To create one, [click here](https://developer.atlassian.com/). ## Configuring an Atlassian OAuth 2.0 Integration diff --git a/docs/authentication/social-connections/bitbucket.mdx b/docs/authentication/social-connections/bitbucket.mdx index 4f9425d4d6..b17822adea 100644 --- a/docs/authentication/social-connections/bitbucket.mdx +++ b/docs/authentication/social-connections/bitbucket.mdx @@ -18,7 +18,7 @@ For production instances, you will need to generate your own Consumer Key and Co ## Before you start -- You need to create a Clerk application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +- You need to create a Clerk application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/getting-started). - You need to have a Bitbucket account. To create one, [click here](https://bitbucket.org/account/signup). ## Configuring Bitbucket social connection diff --git a/docs/authentication/social-connections/dropbox.mdx b/docs/authentication/social-connections/dropbox.mdx index 415e5a6183..481e936ad9 100644 --- a/docs/authentication/social-connections/dropbox.mdx +++ b/docs/authentication/social-connections/dropbox.mdx @@ -18,7 +18,7 @@ For production instances, you will need to generate your own Client ID and Clien ## Before you start -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/getting-started). - You need to have a Dropbox account. To create one, [click here](https://www.dropbox.com/lp/developers). ## Configuring Dropbox social connection diff --git a/docs/authentication/social-connections/facebook.mdx b/docs/authentication/social-connections/facebook.mdx index e763e85bfb..0f0654778c 100644 --- a/docs/authentication/social-connections/facebook.mdx +++ b/docs/authentication/social-connections/facebook.mdx @@ -18,7 +18,7 @@ For production instances, you will need to create your own developer account wit ## Before you start -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/getting-started). - You need to have a Facebook Developer account. To create one, consult the [Register as a Facebook developer](https://developers.facebook.com/docs/development/register) page. ## Configuring Facebook social connection diff --git a/docs/authentication/social-connections/hubspot.mdx b/docs/authentication/social-connections/hubspot.mdx index ac325a68e7..b14cd9a93c 100644 --- a/docs/authentication/social-connections/hubspot.mdx +++ b/docs/authentication/social-connections/hubspot.mdx @@ -18,7 +18,7 @@ For production instances, you will need to create your own developer account wit ## Before you start -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/getting-started). - You need to have a HubSpot Developer account. To create one, [click here](https://app.hubspot.com/signup/developers/step/existing-user?_ga=2.145169076.1430980384.1628431607-741498900.1628431607). ## Configuring HubSpot social connection diff --git a/docs/authentication/social-connections/line.mdx b/docs/authentication/social-connections/line.mdx index 94231003fe..f7933c3ee0 100644 --- a/docs/authentication/social-connections/line.mdx +++ b/docs/authentication/social-connections/line.mdx @@ -21,7 +21,7 @@ For production instances, you will need to generate your own Client ID and Clien ## Before you start -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/getting-started). - You need to have a LINE developer account. To create one, [click here](https://developers.line.biz/en/). ## Configuring LINE social connection diff --git a/docs/authentication/social-connections/linkedin.mdx b/docs/authentication/social-connections/linkedin.mdx index 41645cba86..76ec0e7b3f 100644 --- a/docs/authentication/social-connections/linkedin.mdx +++ b/docs/authentication/social-connections/linkedin.mdx @@ -19,7 +19,7 @@ For production instances, you will need to generate your own Client ID and Clien ## Before you start -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/getting-started). - You need to have a LinkedIn account. To create one, [click here](https://developer.linkedin.com/). ## Configuring LinkedIn social connection diff --git a/docs/authentication/social-connections/notion.mdx b/docs/authentication/social-connections/notion.mdx index f9c3c15e3f..8b7e4e2033 100644 --- a/docs/authentication/social-connections/notion.mdx +++ b/docs/authentication/social-connections/notion.mdx @@ -18,7 +18,7 @@ For production instances, you will need to generate your own Client ID and Clien ## Before you start -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/getting-started). - You need to have a Notion developer account. To create one, [click here](https://developers.notion.com/). ## Configuring Notion social connection diff --git a/docs/authentication/social-connections/oauth.mdx b/docs/authentication/social-connections/oauth.mdx index daf2e7670a..49b8bdb3c6 100644 --- a/docs/authentication/social-connections/oauth.mdx +++ b/docs/authentication/social-connections/oauth.mdx @@ -12,8 +12,8 @@ The easiest way to add social connections to your Clerk app is by using [prebuil ## Before you start -- You need to create a Clerk application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, check out the [setup guide](/docs/quickstarts/setup-clerk). -- You need to install the correct SDK for your application. For more information, see the [quickstart guides](/docs/quickstarts/overview). +- You need to create a Clerk application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, check out the [setup guide](/docs/getting-started). +- You need to install the correct SDK for your application. For more information, see the [quickstart guides](/docs/quickstarts). ## Enable a social connection diff --git a/docs/authentication/social-connections/twitch.mdx b/docs/authentication/social-connections/twitch.mdx index c55d23cf14..142013d789 100644 --- a/docs/authentication/social-connections/twitch.mdx +++ b/docs/authentication/social-connections/twitch.mdx @@ -18,7 +18,7 @@ For production instances, you will need to generate your own Client ID and Clien ## Before you start -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/getting-started). - You need to have a Twitch account. To create one, [click here](https://www.twitch.tv/). ## Configuring Twitch social connection diff --git a/docs/authentication/social-connections/twitter.mdx b/docs/authentication/social-connections/twitter.mdx index 4ef9177dfe..535a98d5ac 100644 --- a/docs/authentication/social-connections/twitter.mdx +++ b/docs/authentication/social-connections/twitter.mdx @@ -19,7 +19,7 @@ Clerk does not currently support preconfigured shared OAuth credentials for Twit ## Before you start -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/getting-started). - You need to have a Twitter Application set up so it can be used as a social connection. If you don't have a Twitter Application, click [here](https://developer.twitter.com/en/docs/apps/overview) for instructions on how to create one. If you already have one, go to your [Twitter app settings](https://developer.twitter.com/en/portal/projects-and-apps) and ensure that the _"Allow this app to be used to Sign in with Twitter?_” option is enabled. ## Configuring Twitter social connection diff --git a/docs/authentication/social-connections/xero.mdx b/docs/authentication/social-connections/xero.mdx index 1a4f3fd0e1..d19bfafb40 100644 --- a/docs/authentication/social-connections/xero.mdx +++ b/docs/authentication/social-connections/xero.mdx @@ -18,7 +18,7 @@ For production instances, you will need to generate your own Client ID and Clien ## Before you start -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/getting-started). - You need to have a Xero developer account. To create one, [click here](https://developer.xero.com/). ## Configuring Xero social connection diff --git a/docs/backend-requests/handling/js-backend-sdks.mdx b/docs/backend-requests/handling/js-backend-sdks.mdx index 4dee29e62b..7e35f65241 100644 --- a/docs/backend-requests/handling/js-backend-sdks.mdx +++ b/docs/backend-requests/handling/js-backend-sdks.mdx @@ -21,7 +21,7 @@ app.use(clerkMiddleware()) app.use(clerkMiddleware(options)) ``` -For more information on the Middleware functions and SDK features, see the [Express SDK](/docs/references/express/overview) page. +For more information on the Middleware functions and SDK features, see the [Express SDK](/docs/sdk/express/methods) page. ## Clerk Fastify SDK @@ -64,7 +64,7 @@ const start = async () => { start() ``` -For more information on the Clerk plugin and SDK features, see the [Fastify SDK](/docs/quickstarts/fastify) page. +For more information on the Clerk plugin and SDK features, see the [Fastify SDK](/docs/sdk/fastify/quickstart) page. ## Clerk Backend SDK diff --git a/docs/backend-requests/making/cross-origin.mdx b/docs/backend-requests/making/cross-origin.mdx index 3d834bc021..ce0f0dbf2b 100644 --- a/docs/backend-requests/making/cross-origin.mdx +++ b/docs/backend-requests/making/cross-origin.mdx @@ -7,7 +7,7 @@ If your client and server are on different origins (e.g. making an API call to a ## Using Fetch with React -In order to pass the session token using the browser Fetch API, it should be put inside a Bearer token in the Authorization header. To retrieve the session token, use the `getToken` method from the [`useAuth()`](/docs/references/react/use-auth) hook. Be mindful that `getToken` is an async function that returns a Promise which needs to be resolved. +In order to pass the session token using the browser Fetch API, it should be put inside a Bearer token in the Authorization header. To retrieve the session token, use the `getToken` method from the [`useAuth()`](/docs/sdk/react/use-auth) hook. Be mindful that `getToken` is an async function that returns a Promise which needs to be resolved. ```js import { useAuth } from '@clerk/nextjs' @@ -27,7 +27,7 @@ export default function useFetch() { ## `useSWR()` hook -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. +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/sdk/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/making/custom-session-token.mdx b/docs/backend-requests/making/custom-session-token.mdx index 999b5283b0..b41d78f7e5 100644 --- a/docs/backend-requests/making/custom-session-token.mdx +++ b/docs/backend-requests/making/custom-session-token.mdx @@ -24,7 +24,7 @@ This guide will show you how to customize a session token to include additional ## Use the custom claims in your application - The [`Auth`](/docs/references/backend/types/auth-object) object includes a `sessionClaims` property that contains the custom claims you added to your session token. It's returned by the [`auth()`](/docs/references/nextjs/auth) and `getAuth()` helpers, and the `request` object in server contexts. + The [`Auth`](/docs/references/backend/types/auth-object) object includes a `sessionClaims` property that contains the custom claims you added to your session token. It's returned by the [`auth()`](/docs/sdk/nextjs/auth) and `getAuth()` helpers, and the `request` object in server contexts. The following example demonstrates how to access the `fullName` and `primaryEmail` claims that were added to the session token in the last step. This examples are written for Next.js, but they can be adapted to other frameworks by using the appropriate method for accessing the `Auth` object. diff --git a/docs/backend-requests/making/same-origin.mdx b/docs/backend-requests/making/same-origin.mdx index 1828554f37..143e763ab4 100644 --- a/docs/backend-requests/making/same-origin.mdx +++ b/docs/backend-requests/making/same-origin.mdx @@ -15,7 +15,7 @@ fetch('/api/foo').then((res) => res.json()) ## useSWR hook -If you are using React or Next.js and would like to use the [useSWR](https://swr.vercel.app/) hook, it’s as simple as supplying the API route with whichever fetcher function you are using. Because of the [automatic revalidation feature](https://swr.vercel.app/docs/revalidation) of SWR, you need to retrieve and set the session token in the Authorization header. Call the asynchronous `getToken` method from the [`useAuth()`](/docs/references/react/use-auth) hook and add it as a Bearer token. +If you are using React or Next.js and would like to use the [useSWR](https://swr.vercel.app/) hook, it’s as simple as supplying the API route with whichever fetcher function you are using. Because of the [automatic revalidation feature](https://swr.vercel.app/docs/revalidation) of SWR, you need to retrieve and set the session token in the Authorization header. Call the asynchronous `getToken` method from the [`useAuth()`](/docs/sdk/react/use-auth) hook and add it as a Bearer token. ```jsx diff --git a/docs/backend-requests/overview.mdx b/docs/backend-requests/overview.mdx index f083b3097c..f52cf4f365 100644 --- a/docs/backend-requests/overview.mdx +++ b/docs/backend-requests/overview.mdx @@ -31,7 +31,7 @@ For cross-origin requests, refer to our guide on [making cross-origin requests]( Clerk provides various middleware packages to set the session property for easy access. These packages can also require a session to be available on the current request. Choose the guide based on the language or framework you're using: -- [Next.js](/docs/references/nextjs/clerk-middleware) +- [Next.js](/docs/sdk/nextjs/clerk-middleware) - [Node.js / Express](/docs/backend-requests/handling/nodejs) - [Go](/docs/backend-requests/handling/go) - [Ruby on Rails / Rack](/docs/backend-requests/handling/ruby-rails) diff --git a/docs/components/authentication/google-one-tap.mdx b/docs/components/authentication/google-one-tap.mdx index c6f746f335..d913ee8728 100644 --- a/docs/components/authentication/google-one-tap.mdx +++ b/docs/components/authentication/google-one-tap.mdx @@ -98,7 +98,7 @@ The following example includes basic implementation of the `` co The methods in this section are available on instances of the [`Clerk`](/docs/references/javascript/clerk/clerk) class and are used to render and control the `` component. > [!NOTE] -> The examples in this section assume you have completed the [JavaScript quickstart](/docs/quickstarts/javascript) to set up the Clerk JS SDK in your project. +> The examples in this section assume you have completed the [JavaScript quickstart](/docs/references/javascript/quickstart) to set up the Clerk JS SDK in your project. ### `openGoogleOneTap()` diff --git a/docs/components/authentication/sign-in.mdx b/docs/components/authentication/sign-in.mdx index 23fd487615..e7a20ecfc2 100644 --- a/docs/components/authentication/sign-in.mdx +++ b/docs/components/authentication/sign-in.mdx @@ -106,7 +106,7 @@ The following example includes basic implementation of the `` componen The following example demonstrates how you can use the `` component on a public page. - If you would like to create a dedicated `/sign-in` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-signup-signin-pages). + If you would like to create a dedicated `/sign-in` page in your Next.js application, see the [dedicated guide](/docs/sdk/nextjs/custom-signup-signin-pages). ```tsx {{ filename: 'app/page.tsx' }} import { SignIn, useUser } from '@clerk/nextjs' @@ -168,7 +168,7 @@ The following methods available on an instance of the [`Clerk`](/docs/references - [`openSignIn()`](#open-sign-in) - [`closeSignIn()`](#close-sign-in) -The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application. +The following examples assume that you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application. ### `mountSignIn()` diff --git a/docs/components/authentication/sign-up.mdx b/docs/components/authentication/sign-up.mdx index c4179ac72d..9b38fc4a12 100644 --- a/docs/components/authentication/sign-up.mdx +++ b/docs/components/authentication/sign-up.mdx @@ -99,7 +99,7 @@ The following example includes basic implementation of the `` componen The following example demonstrates how you can use the `` component on a public page. - If you would like to create a dedicated `/sign-up` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-signup-signin-pages). + If you would like to create a dedicated `/sign-up` page in your Next.js application, see the [dedicated guide](/docs/sdk/nextjs/custom-signup-signin-pages). ```tsx {{ filename: 'app/page.tsx' }} import { SignUp, useUser } from '@clerk/nextjs' @@ -161,7 +161,7 @@ The following methods available on an instance of the [`Clerk`](/docs/references - [`openSignUp()`](#open-sign-up) - [`closeSignUp()`](#close-sign-up) -The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application. +The following examples assume that you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application. ### `mountSignUp()` diff --git a/docs/components/clerk-provider.mdx b/docs/components/clerk-provider.mdx index bcda26af27..55fff0af9b 100644 --- a/docs/components/clerk-provider.mdx +++ b/docs/components/clerk-provider.mdx @@ -230,7 +230,7 @@ The recommended approach is to wrap your entire app with `` at th - `syncHost` - `string` - **Chrome Extension only** To enable, pass the URL of the web application that the extension will sync the authentication state from. See the [dedicated guide](/docs/references/chrome-extension/sync-host) for more information. + **Chrome Extension only** To enable, pass the URL of the web application that the extension will sync the authentication state from. See the [dedicated guide](/docs/sdk/chrome-extension/sync-host) for more information. --- @@ -279,7 +279,7 @@ The recommended approach is to wrap your entire app with `` at th - `dynamic?` - `boolean` - (For Next.js only) Indicates whether or not Clerk should make dynamic auth data available based on the current request. Defaults to `false`. Opts the application into dynamic rendering when `true`. For more information, see [Next.js rendering modes and Clerk](/docs/references/nextjs/rendering-modes). + (For Next.js only) Indicates whether or not Clerk should make dynamic auth data available based on the current request. Defaults to `false`. Opts the application into dynamic rendering when `true`. For more information, see [Next.js rendering modes and Clerk](/docs/sdk/nextjs/rendering-modes). --- diff --git a/docs/components/organization/create-organization.mdx b/docs/components/organization/create-organization.mdx index 59fbc6e006..aa41168497 100644 --- a/docs/components/organization/create-organization.mdx +++ b/docs/components/organization/create-organization.mdx @@ -115,7 +115,7 @@ The following methods available on an instance of the [`Clerk`](/docs/references - [`openCreateOrganization`](#open-create-organization) - [`closeCreateOrganization`](#close-create-organization) -The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application. +The following examples assume that you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application. ### mountCreateOrganization() diff --git a/docs/components/organization/organization-list.mdx b/docs/components/organization/organization-list.mdx index e6488da233..ef219ab729 100644 --- a/docs/components/organization/organization-list.mdx +++ b/docs/components/organization/organization-list.mdx @@ -140,7 +140,7 @@ The following methods available on an instance of the [`Clerk`](/docs/references - [`mountOrganizationList()`](#mount-organization-list) - [`unmountOrganizationList()`](#unmount-organization-list) -The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application. +The following examples assume that you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application. ## `mountOrganizationList()` diff --git a/docs/components/organization/organization-profile.mdx b/docs/components/organization/organization-profile.mdx index 87fc688e18..b596249549 100644 --- a/docs/components/organization/organization-profile.mdx +++ b/docs/components/organization/organization-profile.mdx @@ -112,7 +112,7 @@ The following methods available on an instance of the [`Clerk`](/docs/references - [`openOrganizationProfile()`](#open-organization-profile) - [`closeOrganizationProfile()`](#close-organization-profile) -The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application. +The following examples assume that you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application. ### mountOrganizationProfile() diff --git a/docs/components/organization/organization-switcher.mdx b/docs/components/organization/organization-switcher.mdx index 505ac2446e..c95df599aa 100644 --- a/docs/components/organization/organization-switcher.mdx +++ b/docs/components/organization/organization-switcher.mdx @@ -169,7 +169,7 @@ The following methods available on an instance of the [`Clerk`](/docs/references - [`mountOrganizationSwitcher()`](#mount-organization-switcher) - [`unmountOrganizationSwitcher()`](#unmount-organization-switcher) -The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application. +The following examples assume that you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application. ## `mountOrganizationSwitcher()` diff --git a/docs/components/unstyled/sign-out-button.mdx b/docs/components/unstyled/sign-out-button.mdx index 0b19ea3483..a661f44ab2 100644 --- a/docs/components/unstyled/sign-out-button.mdx +++ b/docs/components/unstyled/sign-out-button.mdx @@ -171,7 +171,7 @@ Clicking the `` component signs the user out of all sessions. Thi You can sign out of a specific session by passing in a `sessionId` to the `signOutOptions` prop. This is useful for signing a single account out of a multi-session (multiple account) application. -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. +In the following example, the `sessionId` is retrieved from the [`useAuth()`](/docs/sdk/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. diff --git a/docs/components/user/user-button.mdx b/docs/components/user/user-button.mdx index 6771014ded..89beeae3c6 100644 --- a/docs/components/user/user-button.mdx +++ b/docs/components/user/user-button.mdx @@ -263,7 +263,7 @@ The following methods available on an instance of the [`Clerk`](/docs/references - [`mountUserButton()`](#mount-user-button) - [`unmountUserButton()`](#unmount-user-button) -The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application. +The following examples assume that you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application. ### `mountUserButton()` diff --git a/docs/components/user/user-profile.mdx b/docs/components/user/user-profile.mdx index 82570040f2..8bc2735dde 100644 --- a/docs/components/user/user-profile.mdx +++ b/docs/components/user/user-profile.mdx @@ -118,7 +118,7 @@ The following methods available on an instance of the [`Clerk`](/docs/references - [`openUserProfile()`](#open-user-profile) - [`closeUserProfile()`](#close-user-profile) -The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application. +The following examples assume that you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application. ### `mountUserProfile()` diff --git a/docs/components/waitlist.mdx b/docs/components/waitlist.mdx index 55caa6d91a..30d75bd851 100644 --- a/docs/components/waitlist.mdx +++ b/docs/components/waitlist.mdx @@ -89,7 +89,7 @@ The following methods available on an instance of the [`Clerk`](/docs/references - [`openWaitlist()`](#open-waitlist) - [`closeWaitlist()`](#close-waitlist) -The following examples assume that you followed the [quickstart](/docs/quickstarts/javascript) to add Clerk to your JavaScript app. +The following examples assume that you followed the [quickstart](/docs/references/javascript/quickstart) to add Clerk to your JavaScript app. ### mountWaitlist() diff --git a/docs/custom-flows/add-email.mdx b/docs/custom-flows/add-email.mdx index e1b3db453d..3d2740fdc6 100644 --- a/docs/custom-flows/add-email.mdx +++ b/docs/custom-flows/add-email.mdx @@ -11,7 +11,7 @@ Every user has a [`User`](/docs/references/javascript/user/user) object that rep The following example demonstrates how to build a custom user interface that allows users to add an email address to their account. The example: -1. Uses the [`useUser()`](/docs/references/react/use-user) hook to get the `User` object. +1. Uses the [`useUser()`](/docs/sdk/react/use-user) hook to get the `User` object. 1. Uses the [`User.createEmailAddress()`](/docs/references/javascript/user/create-metadata#create-email-address) method to add the email address to the user's account. A new [`EmailAddress`](/docs/references/javascript/email-address) object is created and stored in `User.emailAddresses`. 1. Uses the `prepareVerification()` method on the newly created `EmailAddress` object to send a verification code to the user. 1. Uses the `attemptVerification()` method on the same `EmailAddress` object with the verification code provided by the user to verify the email address. diff --git a/docs/custom-flows/add-phone.mdx b/docs/custom-flows/add-phone.mdx index 81ff9ffc38..397537e276 100644 --- a/docs/custom-flows/add-phone.mdx +++ b/docs/custom-flows/add-phone.mdx @@ -11,7 +11,7 @@ Every user has a [`User`](/docs/references/javascript/user/user) object that rep The following example demonstrates how to build a custom user interface that allows users to add a phone number to their account. The example: -1. Uses the [`useUser()`](/docs/references/react/use-user) hook to get the `User` object. +1. Uses the [`useUser()`](/docs/sdk/react/use-user) hook to get the `User` object. 1. Uses the [`User.createPhoneNumber()`](/docs/references/javascript/user/create-metadata#create-phone-number) method to add the phone number to the user's account. A new [`PhoneNumber`](/docs/references/javascript/phone-number) object is created and stored in `User.phoneNumbers`. 1. Uses the `prepareVerification()` method on the newly created `PhoneNumber` object to send a verification code to the user. 1. Uses the `attemptVerification()` method on the same `PhoneNumber` object with the verification code provided by the user to verify the phone number. diff --git a/docs/custom-flows/email-links.mdx b/docs/custom-flows/email-links.mdx index e57f654a0e..71c7f1da5d 100644 --- a/docs/custom-flows/email-links.mdx +++ b/docs/custom-flows/email-links.mdx @@ -37,8 +37,8 @@ We take care of the boring stuff, like efficient polling, secure session managem ## Before you start -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, check out the [setup guide](/docs/quickstarts/setup-clerk). -- You need to install the correct SDK for your application. For more information, see the [quickstart guides](/docs/quickstarts/overview). +- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, check out the [setup guide](/docs/getting-started). +- You need to install the correct SDK for your application. For more information, see the [quickstart guides](/docs/quickstarts). ## 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 2296237854..40385f5511 100644 --- a/docs/custom-flows/email-password-mfa.mdx +++ b/docs/custom-flows/email-password-mfa.mdx @@ -309,7 +309,7 @@ This guide will walk you through how to build a custom email/password sign-in fl ### Build the flow 1. Create the `(auth)` route group. This groups your sign-up and sign-in pages. - 1. In the `(auth)` group, create a `_layout.tsx` file with the following code. The [`useAuth()`](/docs/references/react/use-auth) hook is used to access the user's authentication state. If the user's already signed in, they'll be redirected to the home page. + 1. In the `(auth)` group, create a `_layout.tsx` file with the following code. The [`useAuth()`](/docs/sdk/react/use-auth) hook is used to access the user's authentication state. If the user's already signed in, they'll be redirected to the home page. ```tsx {{ filename: 'app/(auth)/_layout.tsx' }} import { Redirect, Stack } from 'expo-router' @@ -326,7 +326,7 @@ This guide will walk you through how to build a custom email/password sign-in fl } ``` - In the `(auth)` group, create a `sign-in.tsx` file with the following code. The [`useSignIn()`](/docs/references/react/use-sign-in) hook is used to create a sign-in flow. The user can sign in using their email and password and will be prompted to verify their account with a code from their authenticator app or with a backup code. + In the `(auth)` group, create a `sign-in.tsx` file with the following code. The [`useSignIn()`](/docs/sdk/react/use-sign-in) hook is used to create a sign-in flow. The user can sign in using their email and password and will be prompted to verify their account with a code from their authenticator app or with a backup code. ```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }} import React from 'react' diff --git a/docs/custom-flows/email-password.mdx b/docs/custom-flows/email-password.mdx index d22ac988ff..34cef21685 100644 --- a/docs/custom-flows/email-password.mdx +++ b/docs/custom-flows/email-password.mdx @@ -258,7 +258,7 @@ This guide will walk you through how to build a custom email/password sign-up an 1. Create the `(auth)` route group. This groups your sign-up and sign-in pages. - 1. In the `(auth)` group, create a `_layout.tsx` file with the following code. The [`useAuth()`](/docs/references/react/use-auth) hook is used to access the user's authentication state. If the user's already signed in, they'll be redirected to the home page. + 1. In the `(auth)` group, create a `_layout.tsx` file with the following code. The [`useAuth()`](/docs/sdk/react/use-auth) hook is used to access the user's authentication state. If the user's already signed in, they'll be redirected to the home page. ```tsx {{ filename: 'app/(auth)/_layout.tsx' }} import { Redirect, Stack } from 'expo-router' @@ -275,7 +275,7 @@ This guide will walk you through how to build a custom email/password sign-up an } ``` - In the `(auth)` group, create a `sign-up.tsx` file with the following code. The [`useSignUp()`](/docs/references/react/use-sign-up) hook is used to create a sign-up flow. The user can sign up using their email and password and will receive an email verification code to confirm their email. + In the `(auth)` group, create a `sign-up.tsx` file with the following code. The [`useSignUp()`](/docs/sdk/react/use-sign-up) hook is used to create a sign-up flow. The user can sign up using their email and password and will receive an email verification code to confirm their email. ```tsx {{ filename: 'app/(auth)/sign-up.tsx', collapsible: true }} import * as React from 'react' @@ -638,7 +638,7 @@ This guide will walk you through how to build a custom email/password sign-up an - In the `(auth)` group, create a `sign-in.tsx` file with the following code. The [`useSignIn()`](/docs/references/react/use-sign-in) hook is used to create a sign-in flow. The user can sign in using email address and password, or navigate to the sign-up page. + In the `(auth)` group, create a `sign-in.tsx` file with the following code. The [`useSignIn()`](/docs/sdk/react/use-sign-in) hook is used to create a sign-in flow. The user can sign in using email address and password, or navigate to the sign-up page. ```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }} import { useSignIn } from '@clerk/clerk-expo' diff --git a/docs/custom-flows/manage-totp-based-mfa.mdx b/docs/custom-flows/manage-totp-based-mfa.mdx index 4bfd03c251..0837a63d74 100644 --- a/docs/custom-flows/manage-totp-based-mfa.mdx +++ b/docs/custom-flows/manage-totp-based-mfa.mdx @@ -341,7 +341,7 @@ One of the options that Clerk supports for MFA is **Authenticator applications ( 1. Create the `(dashboard)` route group. This groups your account page and the "Add TOTP MFA" page. - 1. Create a `_layout.tsx` file with the following code. The [`useAuth()`](/docs/references/react/use-auth) hook is used to check if the user is signed in. If the user isn't signed in, they'll be redirected to the sign-in page. + 1. Create a `_layout.tsx` file with the following code. The [`useAuth()`](/docs/sdk/react/use-auth) hook is used to check if the user is signed in. If the user isn't signed in, they'll be redirected to the sign-in page. ```tsx {{ filename: 'app/(dashboard)/_layout.tsx' }} import { Redirect, Stack } from 'expo-router' diff --git a/docs/custom-flows/sign-out.mdx b/docs/custom-flows/sign-out.mdx index 732a57ebf8..905cf72be7 100644 --- a/docs/custom-flows/sign-out.mdx +++ b/docs/custom-flows/sign-out.mdx @@ -14,7 +14,7 @@ The `signOut()` function signs a user out of all sessions in a [multi-session ap - The [`useClerk()`](/docs/references/react/use-clerk) hook is used to access the `signOut()` function, which is called when the user clicks the sign-out button. + The [`useClerk()`](/docs/sdk/react/use-clerk) hook is used to access the `signOut()` function, which is called when the user clicks the sign-out button. The Next.js [`useRouter()`](https://nextjs.org/docs/api-reference/next/router#userouter) hook is used to redirect the user to the home page after they sign out. diff --git a/docs/custom-flows/user-impersonation.mdx b/docs/custom-flows/user-impersonation.mdx index 2a159c172d..802fcc3ce7 100644 --- a/docs/custom-flows/user-impersonation.mdx +++ b/docs/custom-flows/user-impersonation.mdx @@ -196,7 +196,7 @@ This guide will walk you through how to build a custom flow that handles user im > It is **recommended** that you build impersonation into a dashboard that **only authorized users** can access. 1. Create the `dashboard/` directory. - 1. In the `dashboard/` directory, create a `_layout.tsx` file with the following code. The [`useAuth()`](/docs/references/react/use-auth) hook is used to access the user's authentication state. If the user is already signed in, they'll be redirected to the home page. The [``](/docs/components/protect) component is used to ensure that only users with the `org:dashboard:access` permission can access it. You can modify the `permission` attribute to fit your use case. + 1. In the `dashboard/` directory, create a `_layout.tsx` file with the following code. The [`useAuth()`](/docs/sdk/react/use-auth) hook is used to access the user's authentication state. If the user is already signed in, they'll be redirected to the home page. The [``](/docs/components/protect) component is used to ensure that only users with the `org:dashboard:access` permission can access it. You can modify the `permission` attribute to fit your use case. ```tsx {{ filename: 'app/dashboard/_layout.tsx' }} import { Redirect, Stack } from 'expo-router' diff --git a/docs/customization/account-portal/getting-started.mdx b/docs/customization/account-portal/getting-started.mdx index b695c7cb86..ae1674f9b4 100644 --- a/docs/customization/account-portal/getting-started.mdx +++ b/docs/customization/account-portal/getting-started.mdx @@ -3,7 +3,7 @@ title: Getting started with the Account Portal description: The Account Portal offers a comprehensive solution for managing user authentication and profile management in your web application and is the fastest way to add Clerk's authentication to your application with minimal code required. --- -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. +To integrate the Account Portal into your application, simply follow one of the [quickstart guides](/docs/quickstarts). 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 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. diff --git a/docs/customization/elements/overview.mdx b/docs/customization/elements/overview.mdx index b571fe7ad4..bc775614c2 100644 --- a/docs/customization/elements/overview.mdx +++ b/docs/customization/elements/overview.mdx @@ -29,7 +29,7 @@ Clerk Elements can be integrated into your existing application and workflows. F ## Getting started -Clerk Elements currently only works with Next.js App Router and [Clerk Core 2](/changelog/2024-04-19){{ target: '_blank' }}. As it gets closer to a stable release, support for additional frameworks will be added. If your Next.js application is already using Clerk, make sure to [upgrade to Core 2](/docs/upgrade-guides/core-2/nextjs). If you're starting from scratch, follow the [Next.js quickstart](/docs/quickstarts/nextjs) before proceeding. +Clerk Elements currently only works with Next.js App Router and [Clerk Core 2](/changelog/2024-04-19){{ target: '_blank' }}. As it gets closer to a stable release, support for additional frameworks will be added. If your Next.js application is already using Clerk, make sure to [upgrade to Core 2](/docs/upgrade-guides/core-2/nextjs). If you're starting from scratch, follow the [Next.js quickstart](/docs/sdk/nextjs/quickstart) before proceeding. To get started, install the Clerk Elements package: diff --git a/docs/customization/localization.mdx b/docs/customization/localization.mdx index 3b51ede253..919ad74382 100644 --- a/docs/customization/localization.mdx +++ b/docs/customization/localization.mdx @@ -122,7 +122,7 @@ Once the `@clerk/localizations` package is installed, you can import the localiz - In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop in the [`ClerkApp`](/docs/references/remix/clerk-app) options. + In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop in the [`ClerkApp`](/docs/sdk/remix/clerk-app) options. ```tsx {{ filename: 'app/root.tsx', mark: [[6, 7], [39, 41]] }} import type { MetaFunction, LoaderFunction } from '@remix-run/node' diff --git a/docs/customization/overview.mdx b/docs/customization/overview.mdx index 8108ede792..ceeb7c0810 100644 --- a/docs/customization/overview.mdx +++ b/docs/customization/overview.mdx @@ -9,7 +9,7 @@ Customizing the appearance of Clerk components is a powerful way to make your ap The `appearance` prop can be applied to [``](/docs/components/clerk-provider) to share styles across every component, or individually to any of the Clerk components. -This applies to all of the React-based packages, like [Next.js](/docs/quickstarts/nextjs), as well as [the pure JavaScript ClerkJS package](/docs/references/javascript/overview). +This applies to all of the React-based packages, like [Next.js](/docs/sdk/nextjs/quickstart), as well as [the pure JavaScript ClerkJS package](/docs/references/javascript/overview). ## Properties diff --git a/docs/deployments/deploy-astro.mdx b/docs/deployments/deploy-astro.mdx index 227a204bb9..9ce3f8defb 100644 --- a/docs/deployments/deploy-astro.mdx +++ b/docs/deployments/deploy-astro.mdx @@ -4,7 +4,7 @@ description: Learn how to deploy an Astro app to production with Clerk. --- > [!WARNING] -> This guide assumes that you have already installed Clerk in your application locally and are ready to deploy. If you haven't installed Clerk yet, see [the quickstart guide](/docs/quickstarts/astro). +> This guide assumes that you have already installed Clerk in your application locally and are ready to deploy. If you haven't installed Clerk yet, see [the quickstart guide](/docs/sdk/astro/quickstart). This guide will walk you through the steps to deploy your Astro app to production. diff --git a/docs/deployments/deploy-chrome-extension.mdx b/docs/deployments/deploy-chrome-extension.mdx index 33ada0d783..e2d5f3593d 100644 --- a/docs/deployments/deploy-chrome-extension.mdx +++ b/docs/deployments/deploy-chrome-extension.mdx @@ -13,7 +13,7 @@ For Clerk production instances, there must be a domain associated with the insta ## Update your `.env.production` file - Add your Publishable and Frontend API keys for your Clerk production instance to your `.env.production` file. These keys can always be retrieved from the [**API keys**](https://dashboard.clerk.com/last-active?path=api-keys) page in the Clerk Dashboard. If you're using [the Sync Host feature](/docs/references/chrome-extension/sync-host), you also need to set the `PLASMO_PUBLIC_CLERK_SYNC_HOST` environment variable. The value is the domain your web app's production server runs on. For example, `https://clerk.com`. + Add your Publishable and Frontend API keys for your Clerk production instance to your `.env.production` file. These keys can always be retrieved from the [**API keys**](https://dashboard.clerk.com/last-active?path=api-keys) page in the Clerk Dashboard. If you're using [the Sync Host feature](/docs/sdk/chrome-extension/sync-host), you also need to set the `PLASMO_PUBLIC_CLERK_SYNC_HOST` environment variable. The value is the domain your web app's production server runs on. For example, `https://clerk.com`. @@ -21,7 +21,7 @@ For Clerk production instances, there must be a domain associated with the insta 1. In the navigation sidebar, select [**API keys**](https://dashboard.clerk.com/last-active?path=api-keys). 1. In the **Quick Copy** section, select **Chrome Extension** and copy your Clerk Publishable and Frontend API keys. 1. Paste your keys into your `.env.production` file. - 1. If you are using [the Sync Host feature](/docs/references/chrome-extension/sync-host), you will also need to set the `PLASMO_PUBLIC_CLERK_SYNC_HOST` environment variable. The value should be the domain your web app's production server runs on. For example, `https://clerk.com`. + 1. If you are using [the Sync Host feature](/docs/sdk/chrome-extension/sync-host), you will also need to set the `PLASMO_PUBLIC_CLERK_SYNC_HOST` environment variable. The value should be the domain your web app's production server runs on. For example, `https://clerk.com`. The final result should resemble the following: @@ -37,7 +37,7 @@ PLASMO_PUBLIC_CLERK_SYNC_HOST=https://yourdomain.com `host_permissions` specifies which hosts, or websites, will have permission to sync auth state with your app. It accepts an array, allowing you to add more than one host. You must add your production domain to the `host_permissions` array. > [!WARNING] -> If you are using the Sync Host feature and followed [the configuration guide](/docs/references/chrome-extension/sync-host), then you have already completed this step (the `http://$PLASMO_PUBLIC_CLERK_SYNC_HOST/*` value points to your production domain.) +> If you are using the Sync Host feature and followed [the configuration guide](/docs/sdk/chrome-extension/sync-host), then you have already completed this step (the `http://$PLASMO_PUBLIC_CLERK_SYNC_HOST/*` value points to your production domain.) In the `package.json` file, in the `manifest` object, update the `host_permissions` array. Add your domain and ensure it is preceded with `https://`. For example, `https://clerk.com`. Only add the root domain and not any subdomains. Then, add `/*` to the end of the domain. diff --git a/docs/deployments/deploy-to-vercel.mdx b/docs/deployments/deploy-to-vercel.mdx index 305d72b903..0118b522bd 100644 --- a/docs/deployments/deploy-to-vercel.mdx +++ b/docs/deployments/deploy-to-vercel.mdx @@ -4,7 +4,7 @@ description: Learn how to deploy a Clerk app to Vercel. --- > [!WARNING] -> This guide assumes that you have already installed Clerk in your application locally and are ready to deploy. If you haven't installed Clerk yet, see the [setup guide](/docs/quickstarts/setup-clerk). +> This guide assumes that you have already installed Clerk in your application locally and are ready to deploy. If you haven't installed Clerk yet, see the [setup guide](/docs/getting-started). If you haven't set up your application in Vercel yet, [set up a new Vercel project](#set-up-a-new-vercel-project). diff --git a/docs/deployments/set-up-staging.mdx b/docs/deployments/set-up-staging.mdx index 2eafdbb04a..12351b3089 100644 --- a/docs/deployments/set-up-staging.mdx +++ b/docs/deployments/set-up-staging.mdx @@ -14,7 +14,7 @@ It is important to note that when you use a separate Clerk application for your The following steps will help you set up a new Clerk application with a staging-specific domain: 1. **Set up a subdomain** - This will be your staging domain. For example, if your domain is `my-site.com`, you could use `staging.my-site.com`. -1. **Create a new Clerk app** - Your staging environment will connect to this app instead of your main one. See [the Clerk quickstart guide](/docs/quickstarts/setup-clerk) to learn how to create a Clerk app. +1. **Create a new Clerk app** - Your staging environment will connect to this app instead of your main one. See [the Clerk quickstart guide](/docs/getting-started) to learn how to create a Clerk app. 1. **Deploy and configure your staging app's production instance** - Using production API keys will make your staging app more secure. Follow the [Deploy to production](/docs/deployments/overview) guide to do so. 1. **Contact Clerk support to upgrade your staging app for free** - If you are on a Pro, Enterprise, or Startup plan, Clerk will fully upgrade your staging app for free. diff --git a/docs/quickstarts/setup-clerk.mdx b/docs/getting-started.mdx similarity index 96% rename from docs/quickstarts/setup-clerk.mdx rename to docs/getting-started.mdx index 3631ed0597..2cff6ec291 100644 --- a/docs/quickstarts/setup-clerk.mdx +++ b/docs/getting-started.mdx @@ -27,70 +27,70 @@ Before you can start integrating Clerk into your application, you need to create ## Integrate Clerk into your application - Now that your application is created in the Clerk Dashboard, you can integrate it into your codebase. To integrate Clerk into your application, use one of our [quickstarts](/docs/quickstarts/overview): + Now that your application is created in the Clerk Dashboard, you can integrate it into your codebase. To integrate Clerk into your application, use one of our [quickstarts](/docs/quickstarts): - - [Next.js](/docs/quickstarts/nextjs) + - [Next.js](/docs/sdk/nextjs/quickstart) - Easily add secure, beautiful, and fast authentication to Next.js with Clerk. - {} --- - - [React](/docs/quickstarts/react) + - [React](/docs/sdk/react/quickstart) - Get started installing and initializing Clerk in a new React + Vite app. - {} --- - - [Remix](/docs/quickstarts/remix) + - [Remix](/docs/sdk/remix/quickstart) - Easily add secure, edge- and SSR-friendly authentication to Remix with Clerk. - {} --- - - [RedwoodJS](/docs/references/redwood/overview) + - [RedwoodJS](/docs/sdk/redwood/quickstart) - Grow your RedwoodJS application with Clerk user management and authentication. - {} --- - - [React Native / Expo](/docs/quickstarts/expo) + - [React Native / Expo](/docs/sdk/expo/quickstart) - Use Clerk with Expo to authenticate users in your React Native application. - {} --- - - [Astro](/docs/quickstarts/astro) + - [Astro](/docs/sdk/astro/quickstart) - Easily add secure and SSR-friendly authentication to your Astro application with Clerk. - {} --- - - [iOS](/docs/quickstarts/ios) + - [iOS](/docs/sdk/ios/quickstart) - Use the Clerk iOS SDK to authenticate users in your native Apple applications. - {} --- - - [TanStack Start](/docs/quickstarts/tanstack-start) + - [TanStack Start](/docs/sdk/tanstack-start/quickstart) - Easily add secure and SSR-friendly authentication to your TanStack Start application with Clerk. - ![](data:image/webp;base64,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) --- - - [React Router](/docs/quickstarts/react-router) + - [React Router](/docs/sdk/react-router/quickstart) - Easily add secure, edge- and SSR-friendly authentication to React Router with Clerk. - {} --- - - [Nuxt](/docs/quickstarts/nuxt) + - [Nuxt](/docs/sdk/nuxt/quickstart) - Easily add secure, beautiful, and fast authentication to Nuxt with Clerk. - {} --- - - [Vue](/docs/quickstarts/vue) + - [Vue](/docs/sdk/vue/quickstart) - Get started installing and initializing Clerk in a new Vue + Vite app. - {} diff --git a/docs/guides/add-onboarding-flow.mdx b/docs/guides/add-onboarding-flow.mdx index 62a9c15bb8..da21498a98 100644 --- a/docs/guides/add-onboarding-flow.mdx +++ b/docs/guides/add-onboarding-flow.mdx @@ -60,7 +60,7 @@ declare global { ## Configure your Middleware to read session data -[`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/sdk/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 `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. diff --git a/docs/guides/architecture-scenarios.mdx b/docs/guides/architecture-scenarios.mdx index 68cb423248..95297f902b 100644 --- a/docs/guides/architecture-scenarios.mdx +++ b/docs/guides/architecture-scenarios.mdx @@ -55,8 +55,8 @@ B2B SaaS applications with the following characteristics are well-supported with Clerk offers a number of building blocks to help integrate organizations into your application: - The [`` component](/docs/components/organization/organization-switcher) provides a way for your users to select which organization is active. The [`useOrganizationList()` hook](/docs/organizations/custom-organization-switcher) can be used for more control. -- The [`useOrganization()` hook](/docs/references/react/use-organization) can be used to fetch the current, active organization. -- The [`` component](/docs/components/protect) enables you to limit who can view certain pages based on their role. Additionally, Clerk exposes a number of helper functions, such as [`auth()`](/docs/references/nextjs/auth), and hooks, such as [`useAuth()`](/docs/references/react/use-auth#how-to-use-the-use-auth-hook), to check the user's authorization throughout your app and API endpoints. +- The [`useOrganization()` hook](/docs/sdk/react/use-organization) can be used to fetch the current, active organization. +- The [`` component](/docs/components/protect) enables you to limit who can view certain pages based on their role. Additionally, Clerk exposes a number of helper functions, such as [`auth()`](/docs/sdk/nextjs/auth), and hooks, such as [`useAuth()`](/docs/references/react/use-auth#how-to-use-the-use-auth-hook), to check the user's authorization throughout your app and API endpoints. The organization's ID should be stored in your database alongside each resource so that it can be used to filter and query the resources that should be rendered or returned according to the active organization. diff --git a/docs/guides/authjs-migration.mdx b/docs/guides/authjs-migration.mdx index a038b20029..e3e809fcd2 100644 --- a/docs/guides/authjs-migration.mdx +++ b/docs/guides/authjs-migration.mdx @@ -38,7 +38,7 @@ This guide shows how to migrate an application using Auth.js (formerly NextAuth. ## Install `@clerk/nextjs` - Clerk's Next.js SDK gives you access to prebuilt [components](/docs/components/overview), [hooks](/docs/references/nextjs/overview#client-side-helpers), and [helpers](/docs/references/nextjs/overview) for Next.js Server Components, Route Handlers and Middleware. Run the following command to install it: + Clerk's Next.js SDK gives you access to prebuilt [components](/docs/components/overview), [hooks](/docs/references/nextjs/overview#client-side-helpers), and [helpers](/docs/sdk/nextjs/methods) for Next.js Server Components, Route Handlers and Middleware. Run the following command to install it: ```bash {{ filename: 'terminal' }} @@ -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 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) + - use the [prebuilt components](/docs/sdk/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/sdk/react/use-sign-in) and [`useSignUp()`](/docs/sdk/react/use-sign-up) ## Protect your app @@ -129,7 +129,7 @@ This guide shows how to migrate an application using Auth.js (formerly NextAuth. Clerk's Middleware gives you fine-grained control over handling the authenticated state and will, by default, run for your entire application. - The example below is a basic configuration that does not protect any routes. All routes are public and you must opt-in to protection for routes. Read the [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware) documentation to learn more about how you can configure your Middleware. + The example below is a basic configuration that does not protect any routes. All routes are public and you must opt-in to protection for routes. Read the [`clerkMiddleware()`](/docs/sdk/nextjs/clerk-middleware) documentation to learn more about how you can configure your Middleware. ```tsx {{ filename: 'middleware.ts' }} import { clerkMiddleware } from '@clerk/nextjs' @@ -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. - 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. + The [`useAuth()`](/docs/sdk/react/use-auth) hook can be used to retrieve basic authentication information. The [`useUser()`](/docs/sdk/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 900193a9f5..f7df28a0e3 100644 --- a/docs/guides/basic-rbac.mdx +++ b/docs/guides/basic-rbac.mdx @@ -66,7 +66,7 @@ This guide assumes that you're using Next.js App Router, but the concepts can be Create a helper function to simplify checking roles. 1. In your application's root directory, create a `utils/` folder. - 1. Inside this directory, create a `roles.ts` file with the following code. The `checkRole()` helper uses the [`auth()`](/docs/references/nextjs/auth) helper to access the user's session claims. From the session claims, it accesses the `metadata` object to check the user's role. The `checkRole()` helper accepts a role of type `Roles`, which you created in the [Create a global TypeScript definition](#create-a-global-typescript-definition) step. It returns `true` if the user has that role or `false` if they do not. + 1. Inside this directory, create a `roles.ts` file with the following code. The `checkRole()` helper uses the [`auth()`](/docs/sdk/nextjs/auth) helper to access the user's session claims. From the session claims, it accesses the `metadata` object to check the user's role. The `checkRole()` helper accepts a role of type `Roles`, which you created in the [Create a global TypeScript definition](#create-a-global-typescript-definition) step. It returns `true` if the user has that role or `false` if they do not. ```ts {{ filename: 'utils/roles.ts' }} import { Roles } from '@/types/globals' diff --git a/docs/guides/custom-redirects.mdx b/docs/guides/custom-redirects.mdx index b1ba643c4e..f5a3b9f311 100644 --- a/docs/guides/custom-redirects.mdx +++ b/docs/guides/custom-redirects.mdx @@ -56,7 +56,7 @@ If you would like to override the `redirect_url` value and supply a custom redir ## Middleware -If you are using Next.js and want a more programmatically generated redirect option, you can use the [`auth.protect()`](/docs/references/nextjs/auth#protect) method in your [Clerk middleware](/docs/references/nextjs/clerk-middleware). +If you are using Next.js and want a more programmatically generated redirect option, you can use the [`auth.protect()`](/docs/references/nextjs/auth#protect) method in your [Clerk middleware](/docs/sdk/nextjs/clerk-middleware). ```tsx {{ filename: 'middleware.ts' }} import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server' diff --git a/docs/guides/force-mfa.mdx b/docs/guides/force-mfa.mdx index 7477247c77..ada3ed1fbc 100644 --- a/docs/guides/force-mfa.mdx +++ b/docs/guides/force-mfa.mdx @@ -108,7 +108,7 @@ By default, Clerk does not enforce [multi-factor authentication (MFA)](/docs/aut - By default, the Nuxt SDK automatically adds [the `clerkMiddleware()` helper](/docs/references/nuxt/clerk-middleware) to your Nuxt application. To manually configure the middleware, in your `nuxt.config.ts` file, under the `clerk` property, set `skipServerMiddleware: true`. + By default, the Nuxt SDK automatically adds [the `clerkMiddleware()` helper](/docs/sdk/nuxt/clerk-middleware) to your Nuxt application. To manually configure the middleware, in your `nuxt.config.ts` file, under the `clerk` property, set `skipServerMiddleware: true`. ```tsx {{ filename: 'nuxt.config.ts', mark: [[3, 5]] }} export default defineNuxtConfig({ diff --git a/docs/guides/force-organizations.mdx b/docs/guides/force-organizations.mdx index 1b319d88fa..cd28225482 100644 --- a/docs/guides/force-organizations.mdx +++ b/docs/guides/force-organizations.mdx @@ -76,7 +76,7 @@ This guide will be written for Next.js applications using App Router, but the sa - The [`auth()`](/docs/references/nextjs/auth) helper function can be used to get the `orgId` from the session _server-side_. If the `orgId` is `null`, then the user does not have an active organization. + The [`auth()`](/docs/sdk/nextjs/auth) helper function can be used to get the `orgId` from the session _server-side_. If the `orgId` is `null`, then the user does not have an active organization. ```tsx import { auth } from '@clerk/nextjs/server' @@ -91,7 +91,7 @@ This guide will be written for Next.js applications using App Router, but the sa - The [`useAuth()`](/docs/references/react/use-auth) hook can be used to get the `orgId` from the session _client-side_. If the `orgId` is `null`, then the user does not have an active organization. + The [`useAuth()`](/docs/sdk/react/use-auth) hook can be used to get the `orgId` from the session _client-side_. If the `orgId` is `null`, then the user does not have an active organization. ```tsx 'use client' @@ -109,7 +109,7 @@ This guide will be written for Next.js applications using App Router, but the sa ### Set an active organization - 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 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/sdk/react/use-organization-list) hook provides a `setActive` method to help you with this. 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. @@ -229,7 +229,7 @@ This guide will be written for Next.js applications using App Router, but the sa ### Limit access using the `clerkMiddleware()` helper - Clerk's [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware) helper can be used in both App Router and Pages Router applications to limit access to users with active organizations only. + Clerk's [`clerkMiddleware()`](/docs/sdk/nextjs/clerk-middleware) helper can be used in both App Router and Pages Router applications to limit access to users with active organizations only. In the example below, the `clerkMiddleware()` helper is used to redirect signed in users to the organization selection page if they are not active in an organization. diff --git a/docs/guides/reverification.mdx b/docs/guides/reverification.mdx index ee5819b034..55a813c040 100644 --- a/docs/guides/reverification.mdx +++ b/docs/guides/reverification.mdx @@ -124,7 +124,7 @@ To handle reverification server-side, use the [`auth.has()`](/docs/references/ba After setting up reverification on the server-side, you must handle reverification on the client-side. -The following example demonstrates how to use the [`useReverification()`](/docs/references/react/use-reverification) hook to detect authorization errors and automatically display a modal that allows the user to verify their identity. Upon successful verification, the previously failed request is automatically retried. +The following example demonstrates how to use the [`useReverification()`](/docs/sdk/react/use-reverification) hook to detect authorization errors and automatically display a modal that allows the user to verify their identity. Upon successful verification, the previously failed request is automatically retried. diff --git a/docs/guides/waitlist.mdx b/docs/guides/waitlist.mdx index f4012afc5a..cc4e4a4222 100644 --- a/docs/guides/waitlist.mdx +++ b/docs/guides/waitlist.mdx @@ -8,7 +8,7 @@ In [**Waitlist** mode](/docs/authentication/configuration/restrictions#waitlist) ## Install `@clerk/nextjs` - Clerk's [Next.js SDK](/docs/references/nextjs/overview) gives you access to prebuilt components, React hooks, and helpers to make user authentication easier. + Clerk's [Next.js SDK](/docs/sdk/nextjs/methods) gives you access to prebuilt components, React hooks, and helpers to make user authentication easier. Run the following command to install the SDK: @@ -132,7 +132,7 @@ In [**Waitlist** mode](/docs/authentication/configuration/restrictions#waitlist) } ``` - 1. By default, `clerkMiddleware()` will not protect any routes. All routes are public and you must opt-in to protection for routes. See the [`clerkMiddleware()` reference](/docs/references/nextjs/clerk-middleware) to learn how to require authentication for specific routes. + 1. By default, `clerkMiddleware()` will not protect any routes. All routes are public and you must opt-in to protection for routes. See the [`clerkMiddleware()` reference](/docs/sdk/nextjs/clerk-middleware) to learn how to require authentication for specific routes. ### Add a sign-in page @@ -146,7 +146,7 @@ In [**Waitlist** mode](/docs/authentication/configuration/restrictions#waitlist) } ``` - Update your environment variables to point to your custom sign-in page. For more information on building custom sign-in and sign-up pages, see the [dedicated guide](/docs/references/nextjs/custom-signup-signin-pages). + Update your environment variables to point to your custom sign-in page. For more information on building custom sign-in and sign-up pages, see the [dedicated guide](/docs/sdk/nextjs/custom-signup-signin-pages). ```env {{ filename: '.env.local' }} NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in" diff --git a/docs/how-clerk-works/overview.mdx b/docs/how-clerk-works/overview.mdx index 7b54e02a7f..80f2a2b4cc 100644 --- a/docs/how-clerk-works/overview.mdx +++ b/docs/how-clerk-works/overview.mdx @@ -3,7 +3,7 @@ title: How Clerk works description: Learn how Clerk is architected and how it works under the hood. --- -This guide provides a deep dive into Clerk's architecture and internal workings. For developers who are simply looking to add authentication to their app, see the [quickstart guides](/docs/quickstarts/overview). +This guide provides a deep dive into Clerk's architecture and internal workings. For developers who are simply looking to add authentication to their app, see the [quickstart guides](/docs/quickstarts). ## The frontend API diff --git a/docs/index.mdx b/docs/index.mdx index 0645869ca2..7da7f54b6e 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -7,7 +7,7 @@ template: wide Find all the guides and resources you need to develop with Clerk. - - [Quickstarts & Tutorials](/docs/quickstarts/overview) + - [Quickstarts & Tutorials](/docs/quickstarts) - Explore our end-to-end tutorials and getting started guides for different application stacks using Clerk. - {} @@ -33,67 +33,67 @@ Find all the guides and resources you need to develop with Clerk. ## Explore by frontend framework - - [Next.js](/docs/quickstarts/nextjs) + - [Next.js](/docs/sdk/nextjs/quickstart) - Easily add secure, beautiful, and fast authentication to Next.js with Clerk. - {} --- - - [React](/docs/quickstarts/react) + - [React](/docs/sdk/react/quickstart) - Get started installing and initializing Clerk in a new React + Vite app. - {} --- - - [Remix](/docs/quickstarts/remix) + - [Remix](/docs/sdk/remix/quickstart) - Easily add secure, edge- and SSR-friendly authentication to Remix with Clerk. - {} --- - - [RedwoodJS](/docs/references/redwood/overview) + - [RedwoodJS](/docs/sdk/redwood/quickstart) - Grow your RedwoodJS application with Clerk user management and authentication. - {} --- - - [React Native / Expo](/docs/quickstarts/expo) + - [React Native / Expo](/docs/sdk/expo/quickstart) - Use Clerk with Expo to authenticate users in your React Native application. - {} --- - - [Astro](/docs/quickstarts/astro) + - [Astro](/docs/sdk/astro/quickstart) - Easily add secure and SSR-friendly authentication to your Astro application with Clerk. - {} --- - - [iOS (Beta)](/docs/quickstarts/ios) + - [iOS (Beta)](/docs/sdk/ios/quickstart) - Use the Clerk iOS SDK to authenticate users in your native Apple applications. - {} --- - - [TanStack Start (Beta)](/docs/quickstarts/tanstack-start) + - [TanStack Start (Beta)](/docs/sdk/tanstack-start/quickstart) - Easily add secure and SSR-friendly authentication to your TanStack Start application with Clerk. - ![](data:image/webp;base64,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) --- - - [React Router (Beta)](/docs/quickstarts/react-router) + - [React Router (Beta)](/docs/sdk/react-router/quickstart) - Easily add secure, edge- and SSR-friendly authentication to React Router with Clerk. - {} --- - - [Nuxt](/docs/quickstarts/nuxt) + - [Nuxt](/docs/sdk/nuxt/quickstart) - Easily add secure, beautiful, and fast authentication to Nuxt with Clerk. - {} --- - - [Vue](/docs/quickstarts/vue) + - [Vue](/docs/sdk/vue/quickstart) - Get started installing and initializing Clerk in a new Vue + Vite app. - {} @@ -101,13 +101,13 @@ Find all the guides and resources you need to develop with Clerk. ## Explore by backend framework - - [Node / Express](/docs/references/nodejs/overview) + - [Node / Express](/docs/sdk/nodejs/quickstart) - Quickly add authentication and user management to your Node.js application. - {} --- - - [Ruby on Rails](/docs/references/ruby/overview) + - [Ruby on Rails](/docs/sdk/ruby/quickstart) - Integrate user management and authentication into your Ruby application. - {} diff --git a/docs/integrations/databases/convex.mdx b/docs/integrations/databases/convex.mdx index bbce2b5bc4..3eea55d126 100644 --- a/docs/integrations/databases/convex.mdx +++ b/docs/integrations/databases/convex.mdx @@ -26,7 +26,7 @@ description: Learn how to integrate Clerk into your Convex application. Convex is the full-stack TypeScript development platform. With Convex you get to build a backend with a provided realtime database, file storage, text search, scheduling and more. Paired with Clerk's user authentication and management features, you can build a powerful application with minimal effort. -This tutorial assumes that you have already [set up a Clerk application](/docs/quickstarts/setup-clerk) and a [React + Convex application](https://docs.convex.dev/quickstart/react){{ target: '_blank' }}. This tutorial will also assume that you have not added Clerk to your application yet. +This tutorial assumes that you have already [set up a Clerk application](/docs/getting-started) and a [React + Convex application](https://docs.convex.dev/quickstart/react){{ target: '_blank' }}. This tutorial will also assume that you have not added Clerk to your application yet. ## Create a JWT template based on Convex diff --git a/docs/integrations/databases/fauna.mdx b/docs/integrations/databases/fauna.mdx index 0e01ef4f9f..06cf0be3f4 100644 --- a/docs/integrations/databases/fauna.mdx +++ b/docs/integrations/databases/fauna.mdx @@ -110,7 +110,7 @@ This guide will walk you through the steps to integrate Fauna with Clerk in your ## Authenticate Fauna queries in your Next.js app - You can now create Fauna JWTs in Clerk using the JWT template you created in the previous step. Generate the Fauna JWT by calling Clerk's [`useAuth().getToken`](/docs/references/react/use-auth) method, and use it to authenticate with Fauna as an end user, as shown in the following example: + You can now create Fauna JWTs in Clerk using the JWT template you created in the previous step. Generate the Fauna JWT by calling Clerk's [`useAuth().getToken`](/docs/sdk/react/use-auth) method, and use it to authenticate with Fauna as an end user, as shown in the following example: ```jsx {{ filename: 'app/page.tsx' }} 'use client' diff --git a/docs/integrations/databases/firebase.mdx b/docs/integrations/databases/firebase.mdx index 61219e5315..a0c8d1ef50 100644 --- a/docs/integrations/databases/firebase.mdx +++ b/docs/integrations/databases/firebase.mdx @@ -205,7 +205,7 @@ Integrating Firebase with Clerk gives you the benefits of using Firebase's featu --- - - [Create custom sign-up and sign-in pages in your Next.js app](/docs/references/nextjs/custom-signup-signin-pages) + - [Create custom sign-up and sign-in pages in your Next.js app](/docs/sdk/nextjs/custom-signup-signin-pages) - Learn how add custom sign-up and sign-in pages with Clerk components in your Next.js application. --- diff --git a/docs/integrations/databases/grafbase.mdx b/docs/integrations/databases/grafbase.mdx index 948b6f3bd1..cc4cb1267f 100644 --- a/docs/integrations/databases/grafbase.mdx +++ b/docs/integrations/databases/grafbase.mdx @@ -3,7 +3,7 @@ title: Integrate Grafbase with Clerk description: Learn how to integrate Clerk and Grafbase into your application --- -The first step is to create a new Clerk application from the Clerk Dashboard if you haven’t done so already. You can choose whichever authentication strategy and social sign-in providers you prefer. For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +The first step is to create a new Clerk application from the Clerk Dashboard if you haven’t done so already. You can choose whichever authentication strategy and social sign-in providers you prefer. For more information, see the [setup guide](/docs/getting-started). After your Clerk application has been created, navigate to the [**JWT templates**](https://dashboard.clerk.com/last-active?path=jwt-templates) page in the Clerk Dashboard. Click on the **New template** button to create a new template based on Grafbase. @@ -67,7 +67,7 @@ If needed, you can also use a shortcode to dynamically include the users current You must send OIDC (JWT) tokens using an `Authorization: Bearer TOKEN` header. Your token must include the group if using group-based authentication. -The [`useAuth()`](/docs/references/react/use-auth) hook os the easiest way to generate JWTs. Use `await getToken({ template: "..." })` and specify your grafbase template to retrieve a new JWT. +The [`useAuth()`](/docs/sdk/react/use-auth) hook os the easiest way to generate JWTs. Use `await getToken({ template: "..." })` and specify your grafbase template to retrieve a new JWT. ```tsx diff --git a/docs/integrations/databases/hasura.mdx b/docs/integrations/databases/hasura.mdx index 9dea99b5d3..843a35b979 100644 --- a/docs/integrations/databases/hasura.mdx +++ b/docs/integrations/databases/hasura.mdx @@ -3,7 +3,7 @@ title: Integrate Hasura with Clerk description: Learn how to integrate Clerk into your Hasura application. --- -The first step is to create a new Clerk application from the Clerk Dashboard if you haven’t done so already. You can choose whichever authentication strategy and social sign-in providers you prefer. For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +The first step is to create a new Clerk application from the Clerk Dashboard if you haven’t done so already. You can choose whichever authentication strategy and social sign-in providers you prefer. For more information, see the [setup guide](/docs/getting-started). After your Clerk application has been created, navigate to the [**JWT templates**](https://dashboard.clerk.com/last-active?path=jwt-templates) page in the Clerk Dashboard. Click on the **New template** button to create a new template based on Hasura. diff --git a/docs/integrations/databases/neon.mdx b/docs/integrations/databases/neon.mdx index d62eba71b1..2efa53179b 100644 --- a/docs/integrations/databases/neon.mdx +++ b/docs/integrations/databases/neon.mdx @@ -39,11 +39,11 @@ This tutorial demonstrates how to integrate Neon Postgres with Clerk in a Next.j ## Integrate the Next.js Clerk SDK - Follow the [Next.js quickstart](/docs/quickstarts/nextjs) to integrate the Clerk Next.js SDK into your application. + Follow the [Next.js quickstart](/docs/sdk/nextjs/quickstart) to integrate the Clerk Next.js SDK into your application. ## Protect your application routes - To ensure that only authenticated users can access your application, modify [`clerkMiddleware`](/docs/references/nextjs/clerk-middleware) to require authentication for every route. + To ensure that only authenticated users can access your application, modify [`clerkMiddleware`](/docs/sdk/nextjs/clerk-middleware) to require authentication for every route. ```typescript {{ filename: 'middleware.ts', mark: [[3, 5]] }} import { clerkMiddleware } from '@clerk/nextjs/server' @@ -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 Clerk's [`auth()` helper](/docs/references/nextjs/auth) 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/sdk/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()` 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 retrieve the user's messages, use Clerk's [`auth()` helper](/docs/sdk/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/integrations/databases/nhost.mdx b/docs/integrations/databases/nhost.mdx index 9ccf6c0d1a..9368abaf84 100644 --- a/docs/integrations/databases/nhost.mdx +++ b/docs/integrations/databases/nhost.mdx @@ -3,7 +3,7 @@ title: Integrate Nhost with Clerk description: Learn how to integrate Clerk into your Nhost project. --- -The first step is to create a new Clerk application from the Clerk Dashboard if you haven’t done so already. You can choose whichever authentication strategy and social sign-in providers you prefer. For more information, see the [setup guide](/docs/quickstarts/setup-clerk). +The first step is to create a new Clerk application from the Clerk Dashboard if you haven’t done so already. You can choose whichever authentication strategy and social sign-in providers you prefer. For more information, see the [setup guide](/docs/getting-started). After your Clerk application has been created, navigate to the [**JWT templates**](https://dashboard.clerk.com/last-active?path=jwt-templates) page in the Clerk Dashboard. Click on the **New template** button to create a new template based on Nhost. @@ -80,7 +80,7 @@ The last step of integrating Clerk as the modern web authentication solution for Even if you don’t have a database table set up yet, we can make use of the [built-in GraphQL introspection system](https://graphql.org/learn/introspection/) to validate that the authenticated requests are working properly. -Here is an example of using [Apollo Client](https://github.com/apollographql/apollo-client) in conjunction with the [`useAuth()`](/docs/references/react/use-auth) hook in a Next.js application to make a request to the Hasura GraphQL endpoint: +Here is an example of using [Apollo Client](https://github.com/apollographql/apollo-client) in conjunction with the [`useAuth()`](/docs/sdk/react/use-auth) hook in a Next.js application to make a request to the Hasura GraphQL endpoint: ```jsx import { ApolloProvider, ApolloClient, HttpLink, from, InMemoryCache } from '@apollo/client' diff --git a/docs/integrations/databases/supabase.mdx b/docs/integrations/databases/supabase.mdx index 5e07259eef..2eaa97ea5a 100644 --- a/docs/integrations/databases/supabase.mdx +++ b/docs/integrations/databases/supabase.mdx @@ -224,7 +224,7 @@ For interacting with the Supabase dashboard, you can either use the **Supabase i - The following example uses the [Next.js SDK](/docs/references/nextjs/overview) to access the [`useUser()`](/docs/references/react/use-user) and [`useSession()`](/docs/references/react/use-session) hooks, but you can adapt this code to work with any React-based Clerk SDK. + The following example uses the [Next.js SDK](/docs/sdk/nextjs/methods) to access the [`useUser()`](/docs/sdk/react/use-user) and [`useSession()`](/docs/sdk/react/use-session) hooks, but you can adapt this code to work with any React-based Clerk SDK. ```tsx {{ filename: 'app/page.tsx' }} 'use client' @@ -324,7 +324,7 @@ For interacting with the Supabase dashboard, you can either use the **Supabase i - The following example uses the [Next.js SDK](/docs/references/nextjs/overview) to demonstrate how to integrate Supabase with Clerk in a **server-side rendered** application. + The following example uses the [Next.js SDK](/docs/sdk/nextjs/methods) to demonstrate how to integrate Supabase with Clerk in a **server-side rendered** application. The `createClerkSupabaseClientSsr()` function is stored in a separate file so that it can be re-used in multiple places, such as within `page.tsx` or a Server Action file. This function uses the [`auth().getToken()`](/docs/references/nextjs/auth#use-auth-for-data-fetching) method to get the Clerk token and inject it into the request headers sent to Supabase. diff --git a/docs/manifest.json b/docs/manifest.json index 81d277a6dd..e16faf2d0c 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -9,7 +9,7 @@ }, { "title": "Getting Started", - "href": "/docs/quickstarts/setup-clerk", + "href": "/docs/getting-started", "icon": "checkmark-circle" }, { @@ -91,11 +91,11 @@ [ { "title": "Quickstart", - "href": "/docs/quickstarts/nextjs" + "href": "/docs/sdk/nextjs/quickstart" }, { "title": "Available Methods", - "href": "/docs/references/nextjs/overview" + "href": "/docs/sdk/nextjs/methods" }, { "title": "Guides", @@ -103,19 +103,19 @@ [ { "title": "Read session and user data", - "href": "/docs/references/nextjs/read-session-data" + "href": "/docs/sdk/nextjs/read-session-data" }, { "title": "Add custom sign up and sign in pages", - "href": "/docs/references/nextjs/custom-signup-signin-pages" + "href": "/docs/sdk/nextjs/custom-signup-signin-pages" }, { "title": "Integrate Clerk into your app with tRPC", - "href": "/docs/references/nextjs/trpc" + "href": "/docs/sdk/nextjs/trpc" }, { "title": "Next.js rendering modes and Clerk", - "href": "/docs/references/nextjs/rendering-modes" + "href": "/docs/sdk/nextjs/rendering-modes" } ] ] @@ -127,7 +127,7 @@ { "title": "`clerkMiddleware()`", "wrap": false, - "href": "/docs/references/nextjs/clerk-middleware" + "href": "/docs/sdk/nextjs/clerk-middleware" } ] ] @@ -139,20 +139,20 @@ { "title": "`auth()`", "wrap": false, - "href": "/docs/references/nextjs/auth" + "href": "/docs/sdk/nextjs/auth" }, { "title": "`currentUser()`", "wrap": false, - "href": "/docs/references/nextjs/current-user" + "href": "/docs/sdk/nextjs/current-user" }, { "title": "Route Handlers", - "href": "/docs/references/nextjs/route-handlers" + "href": "/docs/sdk/nextjs/route-handlers" }, { "title": "Server Actions", - "href": "/docs/references/nextjs/server-actions" + "href": "/docs/sdk/nextjs/server-actions" } ] ] @@ -164,12 +164,12 @@ { "title": "`getAuth()`", "wrap": false, - "href": "/docs/references/nextjs/get-auth" + "href": "/docs/sdk/nextjs/get-auth" }, { "title": "`buildClerkProps()`", "wrap": false, - "href": "/docs/references/nextjs/build-clerk-props" + "href": "/docs/sdk/nextjs/build-clerk-props" } ] ] @@ -200,11 +200,11 @@ [ { "title": "Quickstart", - "href": "/docs/quickstarts/react" + "href": "/docs/sdk/react/quickstart" }, { "title": "Available Methods", - "href": "/docs/references/react/overview" + "href": "/docs/sdk/react/methods" }, { "title": "Client-side helpers", @@ -213,53 +213,53 @@ { "title": "`useUser()`", "wrap": false, - "href": "/docs/references/react/use-user" + "href": "/docs/sdk/react/use-user" }, { "title": "`useClerk()`", "wrap": false, - "href": "/docs/references/react/use-clerk" + "href": "/docs/sdk/react/use-clerk" }, { "title": "`useAuth()`", "wrap": false, - "href": "/docs/references/react/use-auth" + "href": "/docs/sdk/react/use-auth" }, { "title": "`useSignIn()`", "wrap": false, - "href": "/docs/references/react/use-sign-in" + "href": "/docs/sdk/react/use-sign-in" }, { "title": "`useSignUp()`", "wrap": false, - "href": "/docs/references/react/use-sign-up" + "href": "/docs/sdk/react/use-sign-up" }, { "title": "`useSession()`", "wrap": false, - "href": "/docs/references/react/use-session" + "href": "/docs/sdk/react/use-session" }, { "title": "`useSessionList()`", "wrap": false, - "href": "/docs/references/react/use-session-list" + "href": "/docs/sdk/react/use-session-list" }, { "title": "`useOrganization()`", "wrap": false, - "href": "/docs/references/react/use-organization" + "href": "/docs/sdk/react/use-organization" }, { "title": "`useOrganizationList()`", "wrap": false, - "href": "/docs/references/react/use-organization-list" + "href": "/docs/sdk/react/use-organization-list" }, { "title": "`useReverification()`", "tag": "(Beta)", "wrap": false, - "href": "/docs/references/react/use-reverification" + "href": "/docs/sdk/react/use-reverification" } ] ] @@ -275,11 +275,11 @@ [ { "title": "Quickstart", - "href": "/docs/quickstarts/chrome-extension" + "href": "/docs/sdk/chrome-extension/quickstart" }, { "title": "Available Methods", - "href": "/docs/references/chrome-extension/overview" + "href": "/docs/sdk/chrome-extension/methods" }, { "title": "Guides", @@ -288,19 +288,19 @@ [ { "title": "Add React Router", - "href": "/docs/references/chrome-extension/add-react-router" + "href": "/docs/sdk/chrome-extension/add-react-router" }, { "title": "Sync auth status between your Chrome Extension and web app", - "href": "/docs/references/chrome-extension/sync-host" + "href": "/docs/sdk/chrome-extension/sync-host" }, { "title": "`createClerkClient()`", - "href": "/docs/references/chrome-extension/create-clerk-client" + "href": "/docs/sdk/chrome-extension/create-clerk-client" }, { "title": "Configure a consistent CRX ID", - "href": "/docs/references/chrome-extension/configure-consistent-crx-id" + "href": "/docs/sdk/chrome-extension/configure-consistent-crx-id" } ] ] @@ -316,11 +316,11 @@ [ { "title": "Quickstart", - "href": "/docs/quickstarts/expo" + "href": "/docs/sdk/expo/quickstart" }, { "title": "Available Methods", - "href": "/docs/references/expo/overview" + "href": "/docs/sdk/expo/methods" }, { "title": "Hooks", @@ -328,11 +328,11 @@ [ { "title": "useLocalCredentials()", - "href": "/docs/references/expo/use-local-credentials" + "href": "/docs/sdk/expo/use-local-credentials" }, { "title": "useOAuth()", - "href": "/docs/references/expo/use-oauth" + "href": "/docs/sdk/expo/use-oauth" } ] ] @@ -343,15 +343,15 @@ [ { "title": "Read session and user data", - "href": "/docs/references/expo/read-session-user-data" + "href": "/docs/sdk/expo/read-session-user-data" }, { "title": "Use biometrics with local credentials", - "href": "/docs/references/expo/local-credentials" + "href": "/docs/sdk/expo/local-credentials" }, { "title": "Offline support", - "href": "/docs/references/expo/offline-support" + "href": "/docs/sdk/expo/offline-support" } ] ] @@ -363,11 +363,11 @@ [ { "title": "Overview", - "href": "/docs/references/expo/web-support/overview" + "href": "/docs/sdk/expo/web-support/overview" }, { "title": "Add custom sign-up and sign-in pages", - "href": "/docs/references/expo/web-support/custom-signup-signin-pages" + "href": "/docs/sdk/expo/web-support/custom-signup-signin-pages" } ] ] @@ -384,15 +384,15 @@ [ { "title": "Quickstart", - "href": "/docs/quickstarts/ios" + "href": "/docs/sdk/ios/quickstart" }, { "title": "Available Methods", - "href": "/docs/references/ios/overview" + "href": "/docs/sdk/ios/methods" }, { "title": "`getToken()`", - "href": "/docs/references/ios/get-token" + "href": "/docs/sdk/ios/get-token" }, { "title": "Guides", @@ -400,7 +400,7 @@ [ { "title": "Sign in with Apple", - "href": "/docs/references/ios/sign-in-with-apple" + "href": "/docs/sdk/ios/sign-in-with-apple" } ] ] @@ -417,11 +417,11 @@ [ { "title": "Quickstart & Available Methods", - "href": "/docs/references/nodejs/overview" + "href": "/docs/sdk/nodejs/quickstart" }, { "title": "Available methods", - "href": "/docs/references/nodejs/available-methods" + "href": "/docs/sdk/nodejs/methods" }, { "title": "Connect/Express Middleware", @@ -438,11 +438,11 @@ [ { "title": "Quickstart", - "href": "/docs/quickstarts/express" + "href": "/docs/sdk/express/quickstart" }, { "title": "Available Methods", - "href": "/docs/references/express/overview" + "href": "/docs/sdk/express/methods" } ] ] @@ -455,7 +455,7 @@ [ { "title": "Quickstart", - "href": "/docs/quickstarts/fastify" + "href": "/docs/sdk/fastify/quickstart" } ] ] @@ -469,11 +469,11 @@ [ { "title": "Quickstart", - "href": "/docs/quickstarts/react-router" + "href": "/docs/sdk/react-router/quickstart" }, { "title": "Available Methods", - "href": "/docs/references/react-router/overview" + "href": "/docs/sdk/react-router/methods" }, { "title": "Guides", @@ -481,15 +481,15 @@ [ { "title": "Read session and user data", - "href": "/docs/references/react-router/read-session-data" + "href": "/docs/sdk/react-router/read-session-data" }, { "title": "Add custom sign up and sign in pages", - "href": "/docs/references/react-router/custom-signup-signin-pages" + "href": "/docs/sdk/react-router/custom-signup-signin-pages" }, { "title": "Library mode", - "href": "/docs/references/react-router/library-mode" + "href": "/docs/sdk/react-router/library-mode" } ] ] @@ -501,11 +501,11 @@ { "title": "`rootAuthLoader()`", "wrap": false, - "href": "/docs/references/react-router/root-auth-loader" + "href": "/docs/sdk/react-router/root-auth-loader" }, { "title": "`getAuth()`", - "href": "/docs/references/react-router/get-auth" + "href": "/docs/sdk/react-router/get-auth" } ] ] @@ -521,27 +521,27 @@ [ { "title": "Quickstart", - "href": "/docs/quickstarts/remix" + "href": "/docs/sdk/remix/quickstart" }, { "title": "``", "wrap": false, - "href": "/docs/references/remix/clerk-app" + "href": "/docs/sdk/remix/clerk-app" }, { "title": "SPA Mode", "wrap": false, - "href": "/docs/references/remix/spa-mode" + "href": "/docs/sdk/remix/spa-mode" }, { "title": "Add custom sign up and sign in pages", "wrap": true, - "href": "/docs/references/remix/custom-signup-signin-pages" + "href": "/docs/sdk/remix/custom-signup-signin-pages" }, { "title": "Read session and user data", "wrap": true, - "href": "/docs/references/remix/read-session-data" + "href": "/docs/sdk/remix/read-session-data" } ] ] @@ -555,11 +555,11 @@ [ { "title": "Quickstart", - "href": "/docs/quickstarts/tanstack-start" + "href": "/docs/sdk/tanstack-start/quickstart" }, { "title": "Available Methods", - "href": "/docs/references/tanstack-start/overview" + "href": "/docs/sdk/tanstack-start/methods" }, { "title": "General references", @@ -567,11 +567,11 @@ [ { "title": "`getAuth()`", - "href": "/docs/references/tanstack-start/get-auth" + "href": "/docs/sdk/tanstack-start/get-auth" }, { "title": "`createClerkHandler()`", - "href": "/docs/references/tanstack-start/create-clerk-handler" + "href": "/docs/sdk/tanstack-start/create-clerk-handler" } ] ] @@ -582,12 +582,12 @@ [ { "title": "Add custom sign up and sign in pages", - "href": "/docs/references/tanstack-start/custom-signup-signin-pages", + "href": "/docs/sdk/tanstack-start/custom-signup-signin-pages", "wrap": true }, { "title": "Read session and user data", - "href": "/docs/references/tanstack-start/read-session-data", + "href": "/docs/sdk/tanstack-start/read-session-data", "wrap": true } ] @@ -604,15 +604,15 @@ [ { "title": "Quickstart & Available Methods", - "href": "/docs/references/go/overview" + "href": "/docs/sdk/go/quickstart" }, { "title": "Verifying sessions", - "href": "/docs/references/go/verifying-sessions" + "href": "/docs/sdk/go/verifying-sessions" }, { "title": "Use Clerk Go for Backend API Operations", - "href": "/docs/references/go/other-examples" + "href": "/docs/sdk/go/other-examples" }, { "title": "Go SDK repository", @@ -629,11 +629,11 @@ [ { "title": "Quickstart", - "href": "/docs/quickstarts/astro" + "href": "/docs/sdk/astro/quickstart" }, { "title": "Available Methods", - "href": "/docs/references/astro/overview" + "href": "/docs/sdk/astro/methods" }, { "title": "UI Frameworks", @@ -641,7 +641,7 @@ [ { "title": "Use Clerk with Astro and React", - "href": "/docs/references/astro/react" + "href": "/docs/sdk/astro/react" } ] ] @@ -652,17 +652,17 @@ [ { "title": "Migrating from community SDK", - "href": "/docs/references/astro/migrating-from-astro-community-sdk" + "href": "/docs/sdk/astro/migrating-from-astro-community-sdk" }, { "title": "Read session and user data", "wrap": false, - "href": "/docs/references/astro/read-session-data" + "href": "/docs/sdk/astro/read-session-data" }, { "title": "Hybrid rendering", "wrap": false, - "href": "/docs/references/astro/hybrid-rendering" + "href": "/docs/sdk/astro/hybrid-rendering" } ] ] @@ -674,17 +674,17 @@ { "title": "`clerkMiddleware()`", "wrap": false, - "href": "/docs/references/astro/clerk-middleware" + "href": "/docs/sdk/astro/clerk-middleware" }, { "title": "Locals", "wrap": false, - "href": "/docs/references/astro/locals" + "href": "/docs/sdk/astro/locals" }, { "title": "Endpoints", "wrap": false, - "href": "/docs/references/astro/endpoints" + "href": "/docs/sdk/astro/endpoints" } ] ] @@ -696,42 +696,42 @@ { "title": "`$authStore`", "wrap": false, - "href": "/docs/references/astro/auth-store" + "href": "/docs/sdk/astro/auth-store" }, { "title": "`$clerkStore`", "wrap": false, - "href": "/docs/references/astro/clerk-store" + "href": "/docs/sdk/astro/clerk-store" }, { "title": "`$userStore`", "wrap": false, - "href": "/docs/references/astro/user-store" + "href": "/docs/sdk/astro/user-store" }, { "title": "`$signInStore`", "wrap": false, - "href": "/docs/references/astro/sign-in-store" + "href": "/docs/sdk/astro/sign-in-store" }, { "title": "`$signUpStore`", "wrap": false, - "href": "/docs/references/astro/sign-up-store" + "href": "/docs/sdk/astro/sign-up-store" }, { "title": "`$sessionStore`", "wrap": false, - "href": "/docs/references/astro/session-store" + "href": "/docs/sdk/astro/session-store" }, { "title": "`$sessionListStore`", "wrap": false, - "href": "/docs/references/astro/session-list-store" + "href": "/docs/sdk/astro/session-list-store" }, { "title": "`$organizationStore`", "wrap": false, - "href": "/docs/references/astro/organization-store" + "href": "/docs/sdk/astro/organization-store" } ] ] @@ -747,9 +747,12 @@ [ { "title": "Nuxt", - "href": "/docs/quickstarts/nuxt" + "href": "/docs/sdk/nuxt/quickstart" + }, + { + "title": "Available Methods", + "href": "/docs/sdk/nuxt/methods" }, - { "title": "Available Methods", "href": "/docs/references/nuxt/overview" }, { "title": "Guides", "items": [ @@ -757,12 +760,12 @@ { "title": "Read session and user data", "wrap": false, - "href": "/docs/references/nuxt/read-session-data" + "href": "/docs/sdk/nuxt/read-session-data" }, { "title": "Protect pages", "wrap": false, - "href": "/docs/references/nuxt/protect-pages" + "href": "/docs/sdk/nuxt/protect-pages" } ] ] @@ -774,7 +777,7 @@ { "title": "`clerkMiddleware()`", "wrap": false, - "href": "/docs/references/nuxt/clerk-middleware" + "href": "/docs/sdk/nuxt/clerk-middleware" } ] ] @@ -788,15 +791,21 @@ "icon": "vue", "items": [ [ - { "title": "Quickstart", "href": "/docs/quickstarts/vue" }, - { "title": "Available Methods", "href": "/docs/references/vue/overview" }, + { + "title": "Quickstart", + "href": "/docs/sdk/vue/quickstart" + }, + { + "title": "Available Methods", + "href": "/docs/sdk/vue/methods" + }, { "title": "Guides", "items": [ [ { "title": "Migrating from community SDK", - "href": "/docs/references/vue/migrating-from-vue-community-sdk" + "href": "/docs/sdk/vue/migrating-from-vue-community-sdk" } ] ] @@ -808,42 +817,42 @@ { "title": "`useUser()`", "wrap": false, - "href": "/docs/references/vue/use-user" + "href": "/docs/sdk/vue/use-user" }, { "title": "`useClerk()`", "wrap": false, - "href": "/docs/references/vue/use-clerk" + "href": "/docs/sdk/vue/use-clerk" }, { "title": "`useAuth()`", "wrap": false, - "href": "/docs/references/vue/use-auth" + "href": "/docs/sdk/vue/use-auth" }, { "title": "`useSignIn()`", "wrap": false, - "href": "/docs/references/vue/use-sign-in" + "href": "/docs/sdk/vue/use-sign-in" }, { "title": "`useSignUp`", "wrap": false, - "href": "/docs/references/vue/use-sign-up" + "href": "/docs/sdk/vue/use-sign-up" }, { "title": "`useSession()`", "wrap": false, - "href": "/docs/references/vue/use-session" + "href": "/docs/sdk/vue/use-session" }, { "title": "`useSessionList()`", "wrap": false, - "href": "/docs/references/vue/use-session-list" + "href": "/docs/sdk/vue/use-session-list" }, { "title": "`useOrganization()`", "wrap": false, - "href": "/docs/references/vue/use-organization" + "href": "/docs/sdk/vue/use-organization" } ] ] @@ -859,15 +868,15 @@ [ { "title": "Quickstart", - "href": "/docs/references/ruby/overview" + "href": "/docs/sdk/ruby/quickstart" }, { "title": "Available Methods", - "href": "/docs/references/ruby/available-methods" + "href": "/docs/sdk/ruby/methods" }, { "title": "Rack/Rails integration", - "href": "/docs/references/ruby/rack-rails" + "href": "/docs/sdk/ruby/rack-rails" }, { "title": "Ruby SDK repository", @@ -895,7 +904,7 @@ [ { "title": "Overview", - "href": "/docs/references/redwood/overview" + "href": "/docs/sdk/redwood/quickstart" }, { "title": "Redwood", @@ -2593,7 +2602,7 @@ [ { "title": "Quickstart", - "href": "/docs/quickstarts/javascript", + "href": "/docs/references/javascript/quickstart", "icon": "javascript" }, { @@ -3483,4 +3492,4 @@ } ] ] -} +} \ No newline at end of file diff --git a/docs/organizations/creating-organizations.mdx b/docs/organizations/creating-organizations.mdx index c8c9dc4410..535659a031 100644 --- a/docs/organizations/creating-organizations.mdx +++ b/docs/organizations/creating-organizations.mdx @@ -11,7 +11,7 @@ This guide will demonstrate how to use the Clerk API to build a custom flow for - The following example uses the [`useOrganizationList()`](/docs/references/react/use-organization-list) hook to get the `createOrganization()` method. This method is used to create a new organization with the provided name. + The following example uses the [`useOrganizationList()`](/docs/sdk/react/use-organization-list) hook to get the `createOrganization()` method. This method is used to create a new organization with the provided name. This example is written for Next.js App Router but can be adapted for any React meta framework, such as Remix. diff --git a/docs/organizations/custom-organization-switcher.mdx b/docs/organizations/custom-organization-switcher.mdx index d641103997..18d36f1f74 100644 --- a/docs/organizations/custom-organization-switcher.mdx +++ b/docs/organizations/custom-organization-switcher.mdx @@ -11,7 +11,7 @@ This guide will demonstrate how to use the Clerk API to build a custom flow for The following example: - - Uses the [`useOrganizationList()`](/docs/references/react/use-organization-list) hook to get `memberships`, which is a list of the current user's organization memberships. `memberships` returns `data`, which is an array of [`OrganizationMembership`](/docs/references/javascript/organization-membership) objects. + - Uses the [`useOrganizationList()`](/docs/sdk/react/use-organization-list) hook to get `memberships`, which is a list of the current user's organization memberships. `memberships` returns `data`, which is an array of [`OrganizationMembership`](/docs/references/javascript/organization-membership) objects. - Maps over the `data` array to display the user's organization memberships in a list. - Provides a button that calls `setActive()` to set the selected organization as the active organization. - Provides a button to load more organizations if there are more available. The `data` array is paginated and will only return the first 10 results, so the `fetchNext()` method is used to load more organizations if they are available. diff --git a/docs/organizations/inviting-users.mdx b/docs/organizations/inviting-users.mdx index 9b1f6c1bb2..68d7a39a6c 100644 --- a/docs/organizations/inviting-users.mdx +++ b/docs/organizations/inviting-users.mdx @@ -20,7 +20,7 @@ This guide will demonstrate how to use the Clerk API to build a custom flow for To invite a user: - 1. Use the [`useOrganization()`](/docs/references/react/use-organization) hook to get `organization`, which is the active organization. + 1. Use the [`useOrganization()`](/docs/sdk/react/use-organization) hook to get `organization`, which is the active organization. 1. Use `organization` to call the [`inviteMember()`](/docs/references/javascript/organization/invitations#invite-member) method, with the recipient's email address and desired role passed as arguments. To revoke an invitation: diff --git a/docs/organizations/manage-invitations.mdx b/docs/organizations/manage-invitations.mdx index bdd352eba4..a760f50d32 100644 --- a/docs/organizations/manage-invitations.mdx +++ b/docs/organizations/manage-invitations.mdx @@ -9,7 +9,7 @@ This guide will demonstrate how to use the Clerk API to build a custom flow for - The following example uses the [`useOrganizationList()`](/docs/references/react/use-organization) hook to get `userInvitations`, which is a list of the user's organization invitations. + The following example uses the [`useOrganizationList()`](/docs/sdk/react/use-organization) hook to get `userInvitations`, which is a list of the user's organization invitations. `userInvitations` is an object with `data` that contains an array of [`UserOrganizationInvitation`](/docs/references/javascript/types/user-organization-invitation) objects. diff --git a/docs/organizations/manage-membership-requests.mdx b/docs/organizations/manage-membership-requests.mdx index 75dc7ad6d6..2084705268 100644 --- a/docs/organizations/manage-membership-requests.mdx +++ b/docs/organizations/manage-membership-requests.mdx @@ -9,7 +9,7 @@ This guide will demonstrate how to use the Clerk API to build a custom flow for - The following example uses the [`useOrganization()`](/docs/references/react/use-organization) hook to get `membershipRequests`, which is a list of the active organization's membership requests. + The following example uses the [`useOrganization()`](/docs/sdk/react/use-organization) hook to get `membershipRequests`, which is a list of the active organization's membership requests. `membershipRequests` is an object with `data` that contains an array of [`OrganizationMembershipRequest`](/docs/references/javascript/organization-membership-request) objects. diff --git a/docs/organizations/managing-roles.mdx b/docs/organizations/managing-roles.mdx index 7dff5b5523..8cc42ee9e8 100644 --- a/docs/organizations/managing-roles.mdx +++ b/docs/organizations/managing-roles.mdx @@ -11,7 +11,7 @@ This guide will demonstrate how to use the Clerk API to build a custom flow for - The following example uses the [`useOrganization()`](/docs/references/react/use-organization) hook to get `memberships`, which is a list of the active organization's memberships. + The following example uses the [`useOrganization()`](/docs/sdk/react/use-organization) hook to get `memberships`, which is a list of the active organization's memberships. `memberships` is an object with `data` that contains an array of [`OrganizationMembership`](/docs/references/javascript/organization-membership) objects. diff --git a/docs/organizations/org-slugs-in-urls.mdx b/docs/organizations/org-slugs-in-urls.mdx index fefae307f5..1283b3dc21 100644 --- a/docs/organizations/org-slugs-in-urls.mdx +++ b/docs/organizations/org-slugs-in-urls.mdx @@ -136,7 +136,7 @@ This guide shows you how to add organization slugs to your app's URLs, configure > [!TIP] > If your app doesn't use `clerkMiddleware()`, or you prefer to manually set the active organization, use the [`setActive()`](/docs/references/javascript/clerk/session-methods) method to control the active organization on the client-side. See [this guide](/docs/guides/force-organizations#set-an-active-organization-based-on-the-url) to learn how to manually activate a specific organization based on the URL. - With [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware), you can use the [`organizationSyncOptions`](/docs/references/nextjs/clerk-middleware#organization-sync-options) property to declare URL patterns that determine whether a specific organization or user's personal account should be activated. + With [`clerkMiddleware()`](/docs/sdk/nextjs/clerk-middleware), you can use the [`organizationSyncOptions`](/docs/references/nextjs/clerk-middleware#organization-sync-options) property to declare URL patterns that determine whether a specific organization or user's personal account should be activated. If the middleware detects one of these patterns in the URL and finds that a different organization is active in the session, it'll attempt to set the specified organization as the active one. @@ -227,7 +227,7 @@ This guide shows you how to add organization slugs to your app's URLs, configure - To get organization information on the server-side, access the [`Auth`](/docs/references/backend/types/auth-object) object. In Next.js apps, this object is returned by [`auth()`](/docs/references/nextjs/auth). In other frameworks, use the [`getAuth()`](/docs/references/nextjs/get-auth) helper to get the `Auth` object. + To get organization information on the server-side, access the [`Auth`](/docs/references/backend/types/auth-object) object. In Next.js apps, this object is returned by [`auth()`](/docs/sdk/nextjs/auth). In other frameworks, use the [`getAuth()`](/docs/sdk/nextjs/get-auth) helper to get the `Auth` object. To access additional organization information like the organization name, you'll need to [customize the Clerk session token](/docs/backend-requests/making/custom-session-token) to include these details: @@ -274,7 +274,7 @@ This guide shows you how to add organization slugs to your app's URLs, configure - To get organization information on the client-side, use the [`useOrganization()`](/docs/references/react/use-organization) hook to access the [`organization`](/docs/references/javascript/organization/organization) object. + To get organization information on the client-side, use the [`useOrganization()`](/docs/sdk/react/use-organization) hook to access the [`organization`](/docs/references/javascript/organization/organization) object. ```tsx {{ filename: 'app/orgs/[slug]/page.tsx', mark: [24] }} 'use client' diff --git a/docs/organizations/overview.mdx b/docs/organizations/overview.mdx index b750105d26..2960a7beb0 100644 --- a/docs/organizations/overview.mdx +++ b/docs/organizations/overview.mdx @@ -74,7 +74,7 @@ By default, when a user initially signs in to a Clerk-powered application, they 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. +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/sdk/react/use-organization-list) hook. If you would like to hide personal workspaces and require users to always have an organization set as active, see the [Force organizations](/docs/guides/force-organizations) guide. diff --git a/docs/organizations/updating-organizations.mdx b/docs/organizations/updating-organizations.mdx index 6fd3ddf347..d87ed740e2 100644 --- a/docs/organizations/updating-organizations.mdx +++ b/docs/organizations/updating-organizations.mdx @@ -13,7 +13,7 @@ This guide will demonstrate how to use the Clerk API to build a custom flow for The following example: - 1. Uses the [`useOrganization()`](/docs/references/react/use-organization) hook to fetch the active `organization`. + 1. Uses the [`useOrganization()`](/docs/sdk/react/use-organization) hook to fetch the active `organization`. 1. Uses `organization` to call the [`update()`](/docs/references/javascript/organization/organization#update) method with the desired name to update the organization. This example is written for Next.js App Router but can be adapted for any React meta framework, such as Remix. diff --git a/docs/organizations/verify-user-permissions.mdx b/docs/organizations/verify-user-permissions.mdx index 58241c1453..60a34a6c81 100644 --- a/docs/organizations/verify-user-permissions.mdx +++ b/docs/organizations/verify-user-permissions.mdx @@ -176,7 +176,7 @@ The following examples work for both SSR and CSR. The example: - - uses the `userId` returned from [`auth()`](/docs/references/nextjs/auth) to check if the user is signed in. If the user is not **authenticated**, the Route Handler will return a `401` error. + - uses the `userId` returned from [`auth()`](/docs/sdk/nextjs/auth) to check if the user is signed in. If the user is not **authenticated**, the Route Handler will return a `401` error. - uses `has()` to check if the user has the correct permission. If the user is not **authorized**, `has()` will return false, causing the Route Handler to return a `403` error. ```tsx {{ filename: 'app/api/get-teams/route.tsx' }} @@ -229,7 +229,7 @@ The following examples work for both SSR and CSR. - Use the [`getAuth()`](/docs/references/nextjs/get-auth) helper to access the `has()` helper in a Next.js Pages Router application. + Use the [`getAuth()`](/docs/sdk/nextjs/get-auth) helper to access the `has()` helper in a Next.js Pages Router application. The following example: diff --git a/docs/organizations/viewing-memberships.mdx b/docs/organizations/viewing-memberships.mdx index 63ad061baa..ee43702a65 100644 --- a/docs/organizations/viewing-memberships.mdx +++ b/docs/organizations/viewing-memberships.mdx @@ -11,7 +11,7 @@ This guide will demonstrate how to use the Clerk API to build a custom flow for The following example: - 1. Uses the [`useOrganizationList()`](/docs/references/react/use-organization-list) hook to get `memberships`, which is a list of the current user's organization memberships. + 1. Uses the [`useOrganizationList()`](/docs/sdk/react/use-organization-list) hook to get `memberships`, which is a list of the current user's organization memberships. `memberships` returns `data`, which is an array of [`OrganizationMembership`](/docs/references/javascript/organization-membership) objects. 1. Maps over the `data` array to display the user's organization memberships in a table. diff --git a/docs/quickstarts/overview.mdx b/docs/quickstarts.mdx similarity index 96% rename from docs/quickstarts/overview.mdx rename to docs/quickstarts.mdx index ae8326fb50..ec785aa618 100644 --- a/docs/quickstarts/overview.mdx +++ b/docs/quickstarts.mdx @@ -6,37 +6,37 @@ description: See the getting started guides and tutorials. ## Full Stack - - [Next.js](/docs/quickstarts/nextjs) + - [Next.js](/docs/sdk/nextjs/quickstart) - Easily add secure, beautiful, and fast authentication to your Next.js application with Clerk. - {} --- - - [Remix](/docs/quickstarts/remix) + - [Remix](/docs/sdk/remix/quickstart) - Easily add secure, edge- and SSR-friendly authentication to your Remix application with Clerk. - {} --- - - [RedwoodJS](/docs/references/redwood/overview) + - [RedwoodJS](/docs/sdk/redwood/quickstart) - Grow your RedwoodJS application with Clerk user management and authentication. - {} --- - - [Astro](/docs/quickstarts/astro) + - [Astro](/docs/sdk/astro/quickstart) - Easily add secure and SSR-friendly authentication to your Astro application with Clerk. - {} --- - - [TanStack Start (Beta)](/docs/quickstarts/tanstack-start) + - [TanStack Start (Beta)](/docs/sdk/tanstack-start/quickstart) - Easily add secure and SSR-friendly authentication to your TanStack Start application with Clerk. - ![](data:image/webp;base64,UklGRu4JAABXRUJQVlA4TOEJAAAvP8APEM8Hu9r2tM0n/1KSMjNze8UzdNWu0duOwMzMlfXTGnBt204b3SczDjPU0+Vr5j+nnZ6Zp2dm0vjJ0oUc2bZqZZ1z3rX/cXcdQphEQgoWB0TgMHOHa3JEASCA6mXbtl1bY02NHcC+gJtq6gS2j+Aa/Sf7/8nY7ADw+MR//od0UAdVqEIUojCFeOEKdZ2TC6d7an1+DTIlHUShDur0v2kPEIX1/ZF5rZCuYct/87xXJc3Jdcw4BHhRxdJqF9PdrdRpi51GGXWq0NbpSINW7nVWUXczcgDDExNiEfXqZnAy7g9PvOkcndL6ndA2FYTZ0e8waiGBcsekHQvyZJbM2C5dIKjFQE9hqRgZowLYZ5RSB00iBaNgKQx8DtQvIjlPAAWYEBECKCAEwEeBpigqfJvUv+k1pq4ajyduRLjbAe2/hCJ8eA5ejtzrLD3L+S1LJiwHtfy3qRsMF6O5Zs3w+OdGQFuYDmjCTUfIq2jCRruMVca0QtDGxEN73TM9m9mVTwTQlWqXKebbnReuFRAsKaMztr8sBDF4XQiCZf2gyhm+evx475T/bMXkJ/P/bH7sn4/fpvxg5xfdVOv/C1DP+5nOBtpF8V51yL7Hp19nN/1fWo2BdPkhPBQTrqPW+58ZI04aj9D8dcriIDYfPs2PeQKY0xtmlRvzW5u3wjVx+VkW8V3c9Bcz/d68ppcUT7NN5BwXMtrfxltpLS6TnfpxZ65i9Jva4/F09xKHDn33UUc9g2Lsa8dmfGDtesPbS7Q+O2PMJOiThnjBUOGBPkhPBomjsrRXRWakM5V5K+byF0kO8uIPPOcl/mupUf4X+Q+g+66zmdB050bbJVvZst3+2OJJd7s3ax939pabr/0Tagr9c9w69ufp30Cs+xcogWqHv6AEedBreClwp6kGmkJSOyjPr6vh72iOy4jMPEacH9WAtuOxwWx1qDE9nwH2MhCgNB9uLeTdml/ZZaWrxv9MWjrSMfjLmHJTb50zARERTEvbtrVt5K0IDGF0mDkb6FLaMDPYwxBmzuBRmSF84GFmxkj25WOBISv4v++T/j+i/w7ctnGk0FOwe8XvoKz9f2KnO/V25pQexx1WfZ5zGTjUXY7U3ff4yh32haU7VwF/vYjCtrJNMplMryD55Zckov8O3LaNpCiDFTqX926/4ElBrkDDz3//8+8P//OfGOfufyB+tjW6CgJR/PyL+yNLgruEZqMrucV//eF7w3cAQEAE1gbEyP01jijSv/3Gv2XfGFgyv//B+Lc/ijQvAtH9/esUfXtzaDDyx7d4/TCdCLz/w1dp+OP2PH69dgMO3k81AvHpl19A6swHADs3AFJ9KBAffJGW2wYhzAHYSyUC8eHn6fjs9tAg9t51jekAgv3kEYiP7qXpjutyxnagw9BJKQQfPk7ujutCcjsdZEvS88GTZJ65eeGBlzCh4vVteLLaQV2dln0v4SHw6bOkCqcHNJb3nCewMBRZPOfUsdtlc5ggAu8/fyEgscIBSVX080RFRLDMrHax02GZXk7X3090PT6yOS8qFHRE57rq55oeBsgWF0cWL4BOVstAdOz2EhmL6CDRsxOr82x9gLFozkV+LCDrpDkO9bNw0dEJceK8OjK4ekTLRmzsj+KnljkqGuhXfRy4CAOXomAhc43lW2qdRZaA86PTnS5r+qgnbj1LmU2BpgRcvw+0qOPoIKk+4LLkAyNmqyDnfHX59Mzp4sbNZP6gwHjxmQ0rDutS1HHIccghcjQ1gwdc7teLmdkKoHZwGRis7hoXU3fcI4zzLAgIAAiYP6MTWUIagaQ5ks8fyMi8RLMUQs3Q4hmUrYJY2d7t6OKduGUeJUGbsqwBDXSIEtGUI5MGROCE2LTUz4IW5Y1BxMh2EM+wfNVQVpLrwY0yu5wBVdZIlzSASUGcy6BwKbxWDmtQZhFEgc2D1cHyZUBERCE2PFgKAAIAxFpUVTQOQEAwNQ6aD7jE/f3ZZQazmtXgkhArfasClpkAKPVgBQBUAwDkxHySynVFBseY0dmYP+AzHvfPW2ox29QygKUIAOtbAQaVuFHFbEKXPsUvayoRl6bGJt7M7g9kuH7uDVfb1TCryFI5w8FFxljVxmaNzfqMP+CqUcUncZ80Ozbxek228GZkci7mMak6RKyNLFYj4uZWrRXOSYEM7/SM4pOBzbwxOgaNNfOhmHHxf4y1KWkk01Z9nRXNaZl+fT7k9cmBy9DCKIyL2jp3/mNNuZypS0d9A1q5c3IgOoezXp/qxt5EY94y2+DC3MchB9PQ0NZk1TgX1eewKeTN4P7pBecTGPvQVgiddGBba7PNnO40ue7HxsTecJo/HBv9xL0SrS127XNCCPeNy8zA9EJL82tjI6PXWq7E+RDc85Ny89mZ8+7F7Zvw5AzuBmcvhNCtT9+9YC2SuvUUbXQunj13yYVw7+oL55wl5f5TNIGLyLleFUL/83tKKXWx69ZNp+TFS5d7VERMX/9lPrIbtNZadt10N2496ZeP/5f9OhJ9r6+E0YIUptxHjfhFP+7HCLS8ftUiBnY5Y8x/rdaihqEWi4hWkFfrbVKIdqZuPW6xHZ++wOiQbR8wLUL52tZjvZrQQdFcHtNyT3TH56+a9M9f8i8YYFKFxOyNQd8gYuc3SicSOphQbJmPPU+s1mTXwJD9+QuMaTeDITH7YrD+YwN/L68AKIP4g6YhNfD45gd8p5Qf9wD+MR+6Oj6rTmMGyLEhMddjkF9b5bLyW30bHAD5PJ1giFP8BuV96BmAwW8/zAo/5Vo+5uDP8tLC/NyshCWnFB3YePlPMmWtTZDr1RMUWvQUmJcbdGRZLTkm5sKS+hPLO9geHpGlotYoZWFybml1ZSubTslkvKGuprrKVZoK42Sd56PCnZXVpbnJAifm8HaMPkzNzrO4mYmC2mpOp5QkVotYA9V0oIIg633Pvd0qjE/McGJOsROH7cUFHg+zGZ1OeA2q3tUZRqqYw7WW3hsFD7gRF7cD85bpmUmKMXPzD7LGpMlNUEzq7BvVPD83E4g5HZw4uXKRUsLC/Zy16WQC4wJSSQV80oUSMjHLvGnf9gTLndw+myFXEJDqgEj/jdccCEnPgeAQUw/3AWQzaRVFKhynmTFOjxXHC4/2IykjInXGBD8CRlofHxbGi2OxMHTJHNhPOmdtNsMXjxXOhwgTfuJRKXTLA5Tv7GcaSAclEZR6nlTWJ/x7ZaGJ/7EDxvCFDoqJ9BN7BBceRw6pEEkLCzYJL3yOHhKWuPV5guJLNwfvD4eLFvgQNXLWbYKDB4OyT+yAhjd0NOK69UgkedvEzHQBosphjoR8DBuJQX531u3vjx0+yBcy0Nj0Ps/aLjQT7v3RI+RQt3+f2yuPHbHv6T4nsgEA) --- - - [Nuxt](/docs/quickstarts/nuxt) + - [Nuxt](/docs/sdk/nuxt/quickstart) - Easily add secure, beautiful, and fast authentication to Nuxt with Clerk. - {} @@ -44,37 +44,37 @@ description: See the getting started guides and tutorials. ## Frontend - - [JavaScript](/docs/quickstarts/javascript) + - [JavaScript](/docs/references/javascript/quickstart) - Easily add secure, beautiful, and fast authentication to your JavaScript application with Clerk. - {} --- - - [React](/docs/quickstarts/react) + - [React](/docs/sdk/react/quickstart) - Easily add secure, beautiful, and fast authentication to your React application with Clerk. - {} --- - - [Expo](/docs/quickstarts/expo) + - [Expo](/docs/sdk/expo/quickstart) - Use Clerk with Expo to authenticate users in your React Native application. - {} --- - - [iOS (Beta)](/docs/quickstarts/ios) + - [iOS (Beta)](/docs/sdk/ios/quickstart) - Use the Clerk iOS SDK to authenticate users in your native Apple applications. - {} --- - - [Chrome Extension](/docs/quickstarts/chrome-extension) + - [Chrome Extension](/docs/sdk/chrome-extension/quickstart) - Use the Chome Extension SDK to authenticate users in your Chrome extension. - {} --- - - [Vue](/docs/quickstarts/vue) + - [Vue](/docs/sdk/vue/quickstart) - Easily add secure, beautiful, and fast authentication to your Vue application with Clerk. - {} @@ -82,7 +82,7 @@ description: See the getting started guides and tutorials. ## Backend - - [Fastify](/docs/quickstarts/fastify) + - [Fastify](/docs/sdk/fastify/quickstart) - Easily add secure, beautiful, and fast authentication to your Fastify application with Clerk. - {} diff --git a/docs/references/backend/overview.mdx b/docs/references/backend/overview.mdx index e186be41e6..2bb0b94d6c 100644 --- a/docs/references/backend/overview.mdx +++ b/docs/references/backend/overview.mdx @@ -375,7 +375,7 @@ To access the [properties](/docs/references/backend/types/auth-object#auth-objec - The following example uses the Next.js [`auth()`](/docs/references/nextjs/auth){{ target: '_blank' }} helper to access the `userId`. + The following example uses the Next.js [`auth()`](/docs/sdk/nextjs/auth){{ target: '_blank' }} helper to access the `userId`. ```ts import { auth, clerkClient } from '@clerk/nextjs/server' diff --git a/docs/references/backend/types/auth-object.mdx b/docs/references/backend/types/auth-object.mdx index 022f5a818e..fda40753de 100644 --- a/docs/references/backend/types/auth-object.mdx +++ b/docs/references/backend/types/auth-object.mdx @@ -11,13 +11,13 @@ The `Auth` object is available on the `request` object in server contexts. Some | Framework | How to access the `Auth` object | | - | - | -| Next.js App Router | [`auth()`](/docs/references/nextjs/auth) | -| Next.js Pages Router | [`getAuth()`](/docs/references/nextjs/get-auth) | +| Next.js App Router | [`auth()`](/docs/sdk/nextjs/auth) | +| Next.js Pages Router | [`getAuth()`](/docs/sdk/nextjs/get-auth) | | Astro | [`locals.auth()`](/docs/references/astro/locals#locals-auth) | -| Express | [`req.auth`](/docs/references/express/overview) | -| React Router | [`getAuth()`](/docs/references/react-router/get-auth) | +| Express | [`req.auth`](/docs/sdk/express/methods) | +| React Router | [`getAuth()`](/docs/sdk/react-router/get-auth) | | Remix | [`getAuth()`](/docs/references/remix/read-session-data#get-auth) | -| Tanstack Start | [`getAuth()`](/docs/references/tanstack-start/get-auth) | +| Tanstack Start | [`getAuth()`](/docs/sdk/tanstack-start/get-auth) | | Other | `request.auth` | ## Properties @@ -262,8 +262,8 @@ The `Auth` object is not available in the frontend. To use the `getToken()` meth To use the `getToken()` method in the backend: - - In App Router applications, use the [`auth()`](/docs/references/nextjs/auth) helper. - - In Pages Router applications, use the [`getAuth()`](/docs/references/nextjs/get-auth) helper. + - In App Router applications, use the [`auth()`](/docs/sdk/nextjs/auth) helper. + - In Pages Router applications, use the [`getAuth()`](/docs/sdk/nextjs/get-auth) helper. ```js {{ filename: 'app/api/get-token-example/route.ts' }} @@ -323,7 +323,7 @@ The `Auth` object is not available in the frontend. To use the `getToken()` meth - To use the `getToken()` method in the backend, you can access it using the [`getAuth()`](/docs/references/nextjs/get-auth) function. + To use the `getToken()` method in the backend, you can access it using the [`getAuth()`](/docs/sdk/nextjs/get-auth) function. ```ts {{ filename: 'app/routes/get-token.ts' }} import { getAuth } from '@clerk/remix/ssr.server' diff --git a/docs/references/javascript/clerk/clerk.mdx b/docs/references/javascript/clerk/clerk.mdx index a576657395..22ce58d341 100644 --- a/docs/references/javascript/clerk/clerk.mdx +++ b/docs/references/javascript/clerk/clerk.mdx @@ -334,7 +334,7 @@ Only one of the two properties are allowed to be set at a time. Initializes the `Clerk` object and loads all necessary environment configuration and instance settings from the [Frontend API](/docs/reference/frontend-api){{ target: '_blank' }}. -You must call this method before using the `Clerk` object in your code. Refer to the [quickstart guide](/docs/quickstarts/javascript) for more information. +You must call this method before using the `Clerk` object in your code. Refer to the [quickstart guide](/docs/references/javascript/quickstart) for more information. ```typescript function load(options?: ClerkOptions): Promise diff --git a/docs/references/javascript/clerk/organization-methods.mdx b/docs/references/javascript/clerk/organization-methods.mdx index 396c41dcb6..08971df778 100644 --- a/docs/references/javascript/clerk/organization-methods.mdx +++ b/docs/references/javascript/clerk/organization-methods.mdx @@ -7,7 +7,7 @@ These methods on the [`Clerk`](/docs/references/javascript/clerk/clerk) class al The following examples assume: -- you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application +- you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application - you have [enabled the Organizations feature in the Clerk Dashboard](/docs/organizations/overview#enable-organizations-in-your-application) ## `getOrganization()` diff --git a/docs/references/javascript/clerk/waitlist-methods.mdx b/docs/references/javascript/clerk/waitlist-methods.mdx index 8e6c47e302..c173dfdd1b 100644 --- a/docs/references/javascript/clerk/waitlist-methods.mdx +++ b/docs/references/javascript/clerk/waitlist-methods.mdx @@ -7,7 +7,7 @@ These methods on the [`Clerk`](/docs/references/javascript/clerk/clerk) class al The following example assumes: -- You followed the [quickstart](/docs/quickstarts/javascript) to add Clerk to your JavaScript app. +- You followed the [quickstart](/docs/references/javascript/quickstart) to add Clerk to your JavaScript app. - You set your sign-up mode to [**Waitlist**](docs/authentication/configuration/restrictions#waitlist). ## `joinWaitlist()` diff --git a/docs/references/javascript/organization-invitation.mdx b/docs/references/javascript/organization-invitation.mdx index 9fe22c0ade..01205119bb 100644 --- a/docs/references/javascript/organization-invitation.mdx +++ b/docs/references/javascript/organization-invitation.mdx @@ -83,7 +83,7 @@ The following example demonstrates how to revoke an organization invitation. It It assumes: -- you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application +- you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application - you have [enabled the Organizations feature in the Clerk Dashboard](/docs/organizations/overview#enable-organizations-in-your-application) ```js {{ filename: 'main.js', mark: [22, 23] }} diff --git a/docs/references/javascript/organization/domains.mdx b/docs/references/javascript/organization/domains.mdx index 14e3d21c88..6e3e529119 100644 --- a/docs/references/javascript/organization/domains.mdx +++ b/docs/references/javascript/organization/domains.mdx @@ -7,7 +7,7 @@ These methods on the [`Organization`](/docs/references/javascript/organization/o The following examples assume: -- you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application +- you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application - you have [enabled the Organizations feature in the Clerk Dashboard](/docs/organizations/overview#enable-organizations-in-your-application) - you have [enabled **Verified domains** for your organization](/docs/organizations/verified-domains) diff --git a/docs/references/javascript/organization/invitations.mdx b/docs/references/javascript/organization/invitations.mdx index 09e1f11898..03dbd663eb 100644 --- a/docs/references/javascript/organization/invitations.mdx +++ b/docs/references/javascript/organization/invitations.mdx @@ -7,7 +7,7 @@ These methods on the [`Organization`](/docs/references/javascript/organization/o The following examples assume: -- you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application +- you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application - you have [enabled the Organizations feature in the Clerk Dashboard](/docs/organizations/overview#enable-organizations-in-your-application) ## `getInvitations()` diff --git a/docs/references/javascript/organization/membership-request.mdx b/docs/references/javascript/organization/membership-request.mdx index ae3c474c4d..2c91ad8f9f 100644 --- a/docs/references/javascript/organization/membership-request.mdx +++ b/docs/references/javascript/organization/membership-request.mdx @@ -7,7 +7,7 @@ These methods on the [`Organization`](/docs/references/javascript/organization/o The following examples assume: -- you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application +- you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application - you have [enabled the Organizations feature in the Clerk Dashboard](/docs/organizations/overview#enable-organizations-in-your-application) - you have [enabled **Verified domains** and **Automatic suggestion** for your organization](/docs/organizations/verified-domains) diff --git a/docs/references/javascript/organization/organization.mdx b/docs/references/javascript/organization/organization.mdx index 24b8b112aa..6cd4f908dc 100644 --- a/docs/references/javascript/organization/organization.mdx +++ b/docs/references/javascript/organization/organization.mdx @@ -7,7 +7,7 @@ The `Organization` object holds information about an organization, as well as me The following examples assume: -- you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application +- you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application - you have [enabled the Organizations feature in the Clerk Dashboard](/docs/organizations/overview#enable-organizations-in-your-application) ## Properties diff --git a/docs/references/javascript/overview.mdx b/docs/references/javascript/overview.mdx index 289ee7529c..5d9ab4f5da 100644 --- a/docs/references/javascript/overview.mdx +++ b/docs/references/javascript/overview.mdx @@ -5,11 +5,11 @@ description: Clerk's JavaScript SDK is a foundational library for building user ClerkJS is our foundational JavaScript library for building user management and authentication. It enables you to register, sign in, verify and manage users for your application using highly customizable flows. -While we typically recommend using one of our framework SDK's, such as [Clerk React](/docs/quickstarts/react) or [Clerk Next.js](/docs/quickstarts/nextjs), having the ability to use the underlying ClerkJS package provides more freedom to use Clerk how you best see fit. +While we typically recommend using one of our framework SDK's, such as [Clerk React](/docs/sdk/react/quickstart) or [Clerk Next.js](/docs/sdk/nextjs/quickstart), having the ability to use the underlying ClerkJS package provides more freedom to use Clerk how you best see fit. ## Installation -Follow the instructions in the [ClerkJS quickstart](/docs/quickstarts/javascript) to add ClerkJS to your project. +Follow the instructions in the [ClerkJS quickstart](/docs/references/javascript/quickstart) to add ClerkJS to your project. ## Usage diff --git a/docs/quickstarts/javascript.mdx b/docs/references/javascript/quickstart.mdx similarity index 100% rename from docs/quickstarts/javascript.mdx rename to docs/references/javascript/quickstart.mdx diff --git a/docs/references/javascript/user/create-metadata.mdx b/docs/references/javascript/user/create-metadata.mdx index 8080f26df5..c4173cccdb 100644 --- a/docs/references/javascript/user/create-metadata.mdx +++ b/docs/references/javascript/user/create-metadata.mdx @@ -5,7 +5,7 @@ description: Explore methods on the User object that help you create data for th These methods on the [`User`](/docs/references/javascript/user/user) object help you create data for the user, such as `createEmailAddress()` and `createPhoneNumber()`. -The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application. +The following examples assume that you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application. ## `createEmailAddress()` diff --git a/docs/references/javascript/user/password-management.mdx b/docs/references/javascript/user/password-management.mdx index 1e911c499f..9864e099ba 100644 --- a/docs/references/javascript/user/password-management.mdx +++ b/docs/references/javascript/user/password-management.mdx @@ -5,7 +5,7 @@ description: Explore methods on the User object that help you manage a user's pa These methods on the [`User`](/docs/references/javascript/user/user) object help you manage a user's password. -The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application. +The following examples assume that you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application. ## `updatePassword()` diff --git a/docs/references/javascript/user/totp.mdx b/docs/references/javascript/user/totp.mdx index 15346bae17..2052dee594 100644 --- a/docs/references/javascript/user/totp.mdx +++ b/docs/references/javascript/user/totp.mdx @@ -146,7 +146,7 @@ The following example demonstrates how to use the TOTP methods to create and ver The following example assumes: -- you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application +- you have followed the [quickstart](/docs/references/javascript/quickstart) in order to add Clerk to your JavaScript application - you have [enabled **authenticator application** and **backup codes** as multi-factor strategies in the Clerk Dashboard](/docs/authentication/configuration/sign-up-sign-in-options#authentication-strategies) diff --git a/docs/references/overview.mdx b/docs/references/overview.mdx index be1073a7e6..ff8f0dfe92 100644 --- a/docs/references/overview.mdx +++ b/docs/references/overview.mdx @@ -6,13 +6,13 @@ description: Learn about the Clerk and community SDK's available for integrating ## Build with Clerk SDKs - - [Next.js](/docs/references/nextjs/overview) + - [Next.js](/docs/sdk/nextjs/methods) - Clerk's Next.js SDK has prebuilt components, React hooks, and helpers to make user authentication easier. - {} --- - - [React](/docs/quickstarts/react) + - [React](/docs/sdk/react/quickstart) - Clerk React is the recommended way to integrate Clerk into your React application. - {} @@ -24,43 +24,43 @@ description: Learn about the Clerk and community SDK's available for integrating --- - - [Node.js](/docs/references/nodejs/overview) + - [Node.js](/docs/sdk/nodejs/quickstart) - Clerk Node SDK is the recommend way to integrate Clerk into your Node / Express application. - {} --- - - [React Native / Expo](/docs/quickstarts/expo) + - [React Native / Expo](/docs/sdk/expo/quickstart) - Clerk Expo is the recommended way to integrate Clerk into your React Native application. - {} --- - - [Remix](/docs/references/remix/clerk-app) + - [Remix](/docs/sdk/remix/clerk-app) - Clerk's Remix SDK has prebuilt components, React hooks, and helpers to make user authentication easier. - {} --- - - [Astro](/docs/references/astro/overview) + - [Astro](/docs/sdk/astro/methods) - Easily add secure and SSR-friendly authentication to your Astro application with Clerk. - {} --- - - [TanStack Start (Beta)](/docs/quickstarts/tanstack-start) + - [TanStack Start (Beta)](/docs/sdk/tanstack-start/quickstart) - Easily add secure and SSR-friendly authentication to your TanStack Start application with Clerk. - ![](data:image/webp;base64,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) --- - - [Go](/docs/references/go/overview) + - [Go](/docs/sdk/go/quickstart) - Clerk Go SDK is a wrapper around our Backend API written in Golang. - {} --- - - [Ruby](/docs/references/ruby/overview) + - [Ruby](/docs/sdk/ruby/quickstart) - Clerk Ruby is the recommended way to integrate Clerk into your Ruby application. - {} diff --git a/docs/references/sdk/backend-only.mdx b/docs/references/sdk/backend-only.mdx index e8c13906bf..b94d33d4d1 100644 --- a/docs/references/sdk/backend-only.mdx +++ b/docs/references/sdk/backend-only.mdx @@ -116,7 +116,7 @@ You can manually create a wrapper library around the [BAPI OpenAPI](https://cler ``` > [!TIP] - > See the Next.js [`getAuth()`](/docs/references/nextjs/get-auth) reference to see how it's implemented. + > See the Next.js [`getAuth()`](/docs/sdk/nextjs/get-auth) reference to see how it's implemented. ### Create a `requireAuth` helper diff --git a/docs/references/sdk/conventions.mdx b/docs/references/sdk/conventions.mdx index 2a63295009..e4819f4e62 100644 --- a/docs/references/sdk/conventions.mdx +++ b/docs/references/sdk/conventions.mdx @@ -96,7 +96,7 @@ When only defining a [main entry point](https://nodejs.org/api/packages.html#mai Use [subpath exports](https://nodejs.org/api/packages.html#subpath-exports) to provide API boundaries, enable more efficient code-splitting, and split code between client & server. -Here's how the [`@clerk/astro`](/docs/references/astro/overview) package is using subpath exports: +Here's how the [`@clerk/astro`](/docs/sdk/astro/methods) package is using subpath exports: - `@clerk/astro/react` - Import Clerk's prebuilt React components - `@clerk/astro/client` - Access to useful stores like `$authStore` diff --git a/docs/references/astro/auth-store.mdx b/docs/sdk/astro/auth-store.mdx similarity index 100% rename from docs/references/astro/auth-store.mdx rename to docs/sdk/astro/auth-store.mdx diff --git a/docs/references/astro/clerk-middleware.mdx b/docs/sdk/astro/clerk-middleware.mdx similarity index 100% rename from docs/references/astro/clerk-middleware.mdx rename to docs/sdk/astro/clerk-middleware.mdx diff --git a/docs/references/astro/clerk-store.mdx b/docs/sdk/astro/clerk-store.mdx similarity index 100% rename from docs/references/astro/clerk-store.mdx rename to docs/sdk/astro/clerk-store.mdx diff --git a/docs/references/astro/endpoints.mdx b/docs/sdk/astro/endpoints.mdx similarity index 91% rename from docs/references/astro/endpoints.mdx rename to docs/sdk/astro/endpoints.mdx index d3946b608b..7aae507428 100644 --- a/docs/references/astro/endpoints.mdx +++ b/docs/sdk/astro/endpoints.mdx @@ -7,7 +7,7 @@ Clerk provides helpers that allow you to protect your [Astro endpoints](https:// ## Protect your endpoints -If you aren't protecting your endpoints using [`clerkMiddleware()`](/docs/references/astro/clerk-middleware), you can use the [`auth()` local](/docs/references/astro/locals) and check for the `userId` value, as shown in the following example: +If you aren't protecting your endpoints using [`clerkMiddleware()`](/docs/sdk/astro/clerk-middleware), you can use the [`auth()` local](/docs/sdk/astro/locals) and check for the `userId` value, as shown in the following example: ```ts {{ filename: 'src/pages/api/route.ts' }} export async function GET({ locals }) { @@ -27,7 +27,7 @@ export async function GET({ locals }) { Clerk provides integrations with a number of popular databases. -To retrieve a token from a JWT template and fetch data from an external source, use the [`getToken()`](/docs/references/backend/types/auth-object#get-token){{ target: '_blank' }} method from the [`auth()` local](/docs/references/astro/locals), as shown in the following example: +To retrieve a token from a JWT template and fetch data from an external source, use the [`getToken()`](/docs/references/backend/types/auth-object#get-token){{ target: '_blank' }} method from the [`auth()` local](/docs/sdk/astro/locals), as shown in the following example: ```ts {{ filename: 'src/pages/api/route.ts' }} export async function GET({ locals }) { diff --git a/docs/references/astro/hybrid-rendering.mdx b/docs/sdk/astro/hybrid-rendering.mdx similarity index 95% rename from docs/references/astro/hybrid-rendering.mdx rename to docs/sdk/astro/hybrid-rendering.mdx index 4565d705ae..fe969ac10a 100644 --- a/docs/references/astro/hybrid-rendering.mdx +++ b/docs/sdk/astro/hybrid-rendering.mdx @@ -7,7 +7,7 @@ Astro's on-demand rendering output modes (`server` and `hybrid`) allow you to pr ## Server output mode -In `server` output mode, pages and control components are server-rendered by default, but you can opt-in to pre-rendering specific pages by adding `export const prerender = true` to the page. When you opt-in to pre-rendering a page, you must add `isStatic={true}` to any control components used on that page. This specifies that the component should use the client-side version, which relies on [client nanostores](/docs/references/astro/auth-store). +In `server` output mode, pages and control components are server-rendered by default, but you can opt-in to pre-rendering specific pages by adding `export const prerender = true` to the page. When you opt-in to pre-rendering a page, you must add `isStatic={true}` to any control components used on that page. This specifies that the component should use the client-side version, which relies on [client nanostores](/docs/sdk/astro/auth-store). The following example shows how to opt-in to pre-rendering a page and specify that the control components used on that page should use the client-side version. @@ -21,7 +21,7 @@ export const prerender = true ## Hybrid output mode -In `hybrid` output mode, pages and control components are pre-rendered by default, but you can opt-out of pre-rendering for specific pages by adding `export const prerender = false`. When you opt-out of pre-rendering a page, you must add the `isStatic={false}` prop to any control components used on that page. This specifies that the component should use the server-side version which relies on the [locals](/docs/references/astro/locals) injected by the middleware. +In `hybrid` output mode, pages and control components are pre-rendered by default, but you can opt-out of pre-rendering for specific pages by adding `export const prerender = false`. When you opt-out of pre-rendering a page, you must add the `isStatic={false}` prop to any control components used on that page. This specifies that the component should use the server-side version which relies on the [locals](/docs/sdk/astro/locals) injected by the middleware. The following example shows how to opt-out of pre-rendering a page and specify that the control components used on that page should use the server-side version. diff --git a/docs/references/astro/locals.mdx b/docs/sdk/astro/locals.mdx similarity index 83% rename from docs/references/astro/locals.mdx rename to docs/sdk/astro/locals.mdx index bca9ab05d2..4bdb10c049 100644 --- a/docs/references/astro/locals.mdx +++ b/docs/sdk/astro/locals.mdx @@ -3,13 +3,13 @@ title: Locals description: Learn how to authenticate your Astro application with Clerk using locals. --- -Through Astro [`locals`](https://docs.astro.build/en/guides/middleware/#storing-data-in-contextlocals), Clerk's [`Auth`](/docs/references/backend/types/auth-object){{ target: '_blank' }} and current [`User`](/docs/references/javascript/user/user){{ target: '_blank' }} objects can be accessed between middlewares and pages. These locals are injected when you install the provided [middleware](/docs/references/astro/clerk-middleware). +Through Astro [`locals`](https://docs.astro.build/en/guides/middleware/#storing-data-in-contextlocals), Clerk's [`Auth`](/docs/references/backend/types/auth-object){{ target: '_blank' }} and current [`User`](/docs/references/javascript/user/user){{ target: '_blank' }} objects can be accessed between middlewares and pages. These locals are injected when you install the provided [middleware](/docs/sdk/astro/clerk-middleware). -The following guide provides examples of using the [`auth()`](/docs/references/nextjs/auth){{ target: '_blank' }} local to validate an authenticated user and the [`currentUser()`](/docs/references/nextjs/current-user){{ target: '_blank' }} local to access the [`Backend API User`](/docs/references/backend/types/backend-user){{ target: '_blank' }} object for the authenticated user. +The following guide provides examples of using the [`auth()`](/docs/sdk/nextjs/auth){{ target: '_blank' }} local to validate an authenticated user and the [`currentUser()`](/docs/sdk/nextjs/current-user){{ target: '_blank' }} local to access the [`Backend API User`](/docs/references/backend/types/backend-user){{ target: '_blank' }} object for the authenticated user. ## `locals.auth()` -You can use the `auth()` local to protect your pages and forms. It will return the current user's ID if they are signed in, or `null` if they are not. For more information on `auth()`, see the [reference](/docs/references/nextjs/auth){{ target: '_blank' }}. +You can use the `auth()` local to protect your pages and forms. It will return the current user's ID if they are signed in, or `null` if they are not. For more information on `auth()`, see the [reference](/docs/sdk/nextjs/auth){{ target: '_blank' }}. ```astro {{ filename: 'src/pages/protected.astro' }} @@ -52,7 +52,7 @@ Under the hood, this local: - uses the `GET /v1/users/me` endpoint. - counts towards the [Backend API Request Rate Limit](/docs/backend-requests/resources/rate-limits#rate-limits). -For more information on `currentUser()`, see the [reference](/docs/references/nextjs/current-user){{ target: '_blank' }}. +For more information on `currentUser()`, see the [reference](/docs/sdk/nextjs/current-user){{ target: '_blank' }}. ```astro {{ filename: 'src/pages/form.astro' }} --- diff --git a/docs/references/astro/overview.mdx b/docs/sdk/astro/methods.mdx similarity index 69% rename from docs/references/astro/overview.mdx rename to docs/sdk/astro/methods.mdx index dbe0b11d70..3bbfbb9f5d 100644 --- a/docs/references/astro/overview.mdx +++ b/docs/sdk/astro/methods.mdx @@ -7,21 +7,21 @@ The Clerk Astro SDK is the recommended method for integrating Clerk into your As ## Guides -- [Read session and user data](/docs/references/astro/read-session-data) -- [Migrate from the Astro community SDK to the official Clerk SDK](/docs/references/astro/migrating-from-astro-community-sdk) +- [Read session and user data](/docs/sdk/astro/read-session-data) +- [Migrate from the Astro community SDK to the official Clerk SDK](/docs/sdk/astro/migrating-from-astro-community-sdk) ## Client-side helpers The Astro SDK provides [stores](https://github.com/nanostores/nanostores) that give you access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object and helper methods for authentication flows. -- [`$authStore`](/docs/references/astro/auth-store) -- [`$clerkStore`](/docs/references/astro/clerk-store) -- [`$userStore`](/docs/references/astro/user-store) -- [`$signInStore`](/docs/references/astro/sign-in-store) -- [`$signUpStore`](/docs/references/astro/sign-up-store) -- [`$sessionStore`](/docs/references/astro/session-store) -- [`$sessionListStore`](/docs/references/astro/session-list-store) -- [`$organizationStore`](/docs/references/astro/organization-store) +- [`$authStore`](/docs/sdk/astro/auth-store) +- [`$clerkStore`](/docs/sdk/astro/clerk-store) +- [`$userStore`](/docs/sdk/astro/user-store) +- [`$signInStore`](/docs/sdk/astro/sign-in-store) +- [`$signUpStore`](/docs/sdk/astro/sign-up-store) +- [`$sessionStore`](/docs/sdk/astro/session-store) +- [`$sessionListStore`](/docs/sdk/astro/session-list-store) +- [`$organizationStore`](/docs/sdk/astro/organization-store) ## Server-side helpers @@ -40,4 +40,4 @@ The Astro SDK provides access to Clerk's authentication data through Astro's [`l ### `clerkMiddleware()` -The `clerkMiddleware()` helper integrates Clerk authentication and authorization into your Astro application through middleware. You can learn more [here](/docs/references/astro/clerk-middleware). +The `clerkMiddleware()` helper integrates Clerk authentication and authorization into your Astro application through middleware. You can learn more [here](/docs/sdk/astro/clerk-middleware). diff --git a/docs/references/astro/migrating-from-astro-community-sdk.mdx b/docs/sdk/astro/migrating-from-astro-community-sdk.mdx similarity index 100% rename from docs/references/astro/migrating-from-astro-community-sdk.mdx rename to docs/sdk/astro/migrating-from-astro-community-sdk.mdx diff --git a/docs/references/astro/organization-store.mdx b/docs/sdk/astro/organization-store.mdx similarity index 100% rename from docs/references/astro/organization-store.mdx rename to docs/sdk/astro/organization-store.mdx diff --git a/docs/quickstarts/astro.mdx b/docs/sdk/astro/quickstart.mdx similarity index 88% rename from docs/quickstarts/astro.mdx rename to docs/sdk/astro/quickstart.mdx index c6ed6adbaf..8945ac5198 100644 --- a/docs/quickstarts/astro.mdx +++ b/docs/sdk/astro/quickstart.mdx @@ -33,7 +33,7 @@ description: Add authentication and user management to your Astro app with Clerk ## Install `@clerk/astro` - Clerk's [Astro SDK](/docs/references/astro/overview) provides a set of components, hooks, and stores that make it easy to build authentication and user management features in your Astro app. + Clerk's [Astro SDK](/docs/sdk/astro/methods) provides a set of components, hooks, and stores that make it easy to build authentication and user management features in your Astro app. Run the following command to install the SDK: @@ -92,7 +92,7 @@ description: Add authentication and user management to your Astro app with Clerk ## Add `clerkMiddleware()` to your app - [`clerkMiddleware()`](/docs/references/astro/clerk-middleware) grants you access to user authentication state throughout your app, on any route or page. It also allows you to protect specific routes from unauthenticated users. To add `clerkMiddleware()` to your app, follow these steps: + [`clerkMiddleware()`](/docs/sdk/astro/clerk-middleware) grants you access to user authentication state throughout your app, on any route or page. It also allows you to protect specific routes from unauthenticated users. To add `clerkMiddleware()` to your app, follow these steps: 1. Create a `middleware.ts` file. - If you're using the `/src` directory, create `middleware.ts` in the `/src` directory. @@ -103,7 +103,7 @@ description: Add authentication and user management to your Astro app with Clerk export const onRequest = clerkMiddleware() ``` - 1. By default, `clerkMiddleware()` will not protect any routes. All routes are public and you must opt-in to protection for routes. See the [`clerkMiddleware()` reference](/docs/references/astro/clerk-middleware) to learn how to require authentication for specific routes. + 1. By default, `clerkMiddleware()` will not protect any routes. All routes are public and you must opt-in to protection for routes. See the [`clerkMiddleware()` reference](/docs/sdk/astro/clerk-middleware) to learn how to require authentication for specific routes. ## Add Clerk components to your app @@ -183,12 +183,12 @@ description: Add authentication and user management to your Astro app with Clerk ## Next steps - - [Protect routes using Clerk Middleware](/docs/references/astro/clerk-middleware) + - [Protect routes using Clerk Middleware](/docs/sdk/astro/clerk-middleware) - Learn how to protect specific routes from unauthenticated users. --- - - [Read session and user data](/docs/references/astro/read-session-data) + - [Read session and user data](/docs/sdk/astro/read-session-data) - Learn how to use Clerk's stores and helpers to access the active session and user data in your Astro app. --- diff --git a/docs/references/astro/react.mdx b/docs/sdk/astro/react.mdx similarity index 96% rename from docs/references/astro/react.mdx rename to docs/sdk/astro/react.mdx index eb54d976b5..985d73eea0 100644 --- a/docs/references/astro/react.mdx +++ b/docs/sdk/astro/react.mdx @@ -5,7 +5,7 @@ description: Learn how to user Clerk inside an Astro app with React Astro provides an [integration](https://docs.astro.build/en/guides/integrations-guide/react/) that enables server-side rendering and client-side hydration for your React components. This guide demonstrates how to use Clerk with Astro and React. -If you have not set up your Astro application to work with Clerk, see the [quickstart guide](/docs/quickstarts/astro). +If you have not set up your Astro application to work with Clerk, see the [quickstart guide](/docs/sdk/astro/quickstart). ## Install `@astrojs/react` @@ -122,7 +122,7 @@ If you have not set up your Astro application to work with Clerk, see the [quick ## Next steps - - [Read user and session data](/docs/references/astro/read-session-data) + - [Read user and session data](/docs/sdk/astro/read-session-data) - Learn how to use Clerk's hooks and helpers to access the active session and user data in your Astro application. --- diff --git a/docs/references/astro/read-session-data.mdx b/docs/sdk/astro/read-session-data.mdx similarity index 77% rename from docs/references/astro/read-session-data.mdx rename to docs/sdk/astro/read-session-data.mdx index ad53789e23..25c06fd19c 100644 --- a/docs/references/astro/read-session-data.mdx +++ b/docs/sdk/astro/read-session-data.mdx @@ -7,7 +7,7 @@ Clerk provides helpers that you can use to access the active session and user da ## Server-side -The following example uses the [`auth()`](/docs/references/nextjs/auth){{ target: '_blank' }} local to validate an authenticated user and the [`currentUser()`](/docs/references/nextjs/current-user){{ target: '_blank' }} local to access the [`Backend API User`](/docs/references/backend/types/backend-user){{ target: '_blank' }} object for the authenticated user. +The following example uses the [`auth()`](/docs/sdk/nextjs/auth){{ target: '_blank' }} local to validate an authenticated user and the [`currentUser()`](/docs/sdk/nextjs/current-user){{ target: '_blank' }} local to access the [`Backend API User`](/docs/references/backend/types/backend-user){{ target: '_blank' }} object for the authenticated user. ```astro {{ filename: 'src/pages/me.astro' }} @@ -41,7 +41,7 @@ Clerk Astro provides a set of useful [stores](/docs/references/astro/overview#cl ### `$authStore` -The following example demonstrates how to use the [`$authStore`](/docs/references/astro/auth-store) to access auth information for the active user, such as the `userId` and `sessionId`. +The following example demonstrates how to use the [`$authStore`](/docs/sdk/astro/auth-store) to access auth information for the active user, such as the `userId` and `sessionId`. ```tsx {{ filename: 'components/example.tsx' }} import { useStore } from '@nanostores/react' @@ -65,7 +65,7 @@ export default function Example() { ### `$userStore` -The following example demonstrates how to use the [`$userStore`](/docs/references/astro/user-store) store to access information about the active user, such as their `firstName`. +The following example demonstrates how to use the [`$userStore`](/docs/sdk/astro/user-store) store to access information about the active user, such as their `firstName`. ```tsx {{ filename: 'components/example.tsx' }} import { useStore } from '@nanostores/react' diff --git a/docs/references/astro/session-list-store.mdx b/docs/sdk/astro/session-list-store.mdx similarity index 100% rename from docs/references/astro/session-list-store.mdx rename to docs/sdk/astro/session-list-store.mdx diff --git a/docs/references/astro/session-store.mdx b/docs/sdk/astro/session-store.mdx similarity index 100% rename from docs/references/astro/session-store.mdx rename to docs/sdk/astro/session-store.mdx diff --git a/docs/references/astro/sign-in-store.mdx b/docs/sdk/astro/sign-in-store.mdx similarity index 100% rename from docs/references/astro/sign-in-store.mdx rename to docs/sdk/astro/sign-in-store.mdx diff --git a/docs/references/astro/sign-up-store.mdx b/docs/sdk/astro/sign-up-store.mdx similarity index 100% rename from docs/references/astro/sign-up-store.mdx rename to docs/sdk/astro/sign-up-store.mdx diff --git a/docs/references/astro/user-store.mdx b/docs/sdk/astro/user-store.mdx similarity index 100% rename from docs/references/astro/user-store.mdx rename to docs/sdk/astro/user-store.mdx diff --git a/docs/references/chrome-extension/add-react-router.mdx b/docs/sdk/chrome-extension/add-react-router.mdx similarity index 100% rename from docs/references/chrome-extension/add-react-router.mdx rename to docs/sdk/chrome-extension/add-react-router.mdx diff --git a/docs/references/chrome-extension/configure-consistent-crx-id.mdx b/docs/sdk/chrome-extension/configure-consistent-crx-id.mdx similarity index 97% rename from docs/references/chrome-extension/configure-consistent-crx-id.mdx rename to docs/sdk/chrome-extension/configure-consistent-crx-id.mdx index 85726b780a..20002c3403 100644 --- a/docs/references/chrome-extension/configure-consistent-crx-id.mdx +++ b/docs/sdk/chrome-extension/configure-consistent-crx-id.mdx @@ -11,7 +11,7 @@ There are two ways to configure a consistent CRX ID: 1. [For an extension uploaded to the Chrome Developer Dashboard](#for-an-extension-uploaded-to-the-chrome-developer-dashboard). > [!WARNING] -> If you followed the [Chrome Extension Quickstart](/docs/quickstarts/chrome-extension), you have already completed this configuration. +> If you followed the [Chrome Extension Quickstart](/docs/sdk/chrome-extension/quickstart), you have already completed this configuration. ## For a new extension diff --git a/docs/references/chrome-extension/create-clerk-client.mdx b/docs/sdk/chrome-extension/create-clerk-client.mdx similarity index 96% rename from docs/references/chrome-extension/create-clerk-client.mdx rename to docs/sdk/chrome-extension/create-clerk-client.mdx index ca86fbd77d..7e4403c7b1 100644 --- a/docs/references/chrome-extension/create-clerk-client.mdx +++ b/docs/sdk/chrome-extension/create-clerk-client.mdx @@ -16,7 +16,7 @@ The following example: - The new tab has a button on it that, when clicked, triggers the background service worker. > [!WARNING] -> The following example assumes that you have followed the [Chrome Extension Quickstart](/docs/quickstarts/chrome-extension) and then the [Add React Router](/docs/references/chrome-extension/add-react-router) guide, but you can apply these concepts to your own application. +> The following example assumes that you have followed the [Chrome Extension Quickstart](/docs/sdk/chrome-extension/quickstart) and then the [Add React Router](/docs/sdk/chrome-extension/add-react-router) guide, but you can apply these concepts to your own application. ### Create your background service worker @@ -170,5 +170,5 @@ The `createClerkClient()` function accepts an optional object. The following opt - `syncHost?` - `string` - The host to sync the session with. For more information, see [the dedicated guide](/docs/references/chrome-extension/sync-host). + The host to sync the session with. For more information, see [the dedicated guide](/docs/sdk/chrome-extension/sync-host). diff --git a/docs/references/chrome-extension/overview.mdx b/docs/sdk/chrome-extension/methods.mdx similarity index 86% rename from docs/references/chrome-extension/overview.mdx rename to docs/sdk/chrome-extension/methods.mdx index 908495d62c..acfb78795d 100644 --- a/docs/references/chrome-extension/overview.mdx +++ b/docs/sdk/chrome-extension/methods.mdx @@ -11,7 +11,7 @@ When creating your Clerk application in the Clerk Dashboard, your authentication - **Popup** - Opens as a popup. This is the default behavior. - **Side Panel** - Opens in a side panel -- **Sync Host** - Deployed alongside a web app that uses [Sync Host](/docs/references/chrome-extension/sync-host). +- **Sync Host** - Deployed alongside a web app that uses [Sync Host](/docs/sdk/chrome-extension/sync-host). See the following table to determine the authentication options available for each configuration. @@ -33,17 +33,17 @@ See the following table to determine the authentication options available for ea ## Sync auth status between your Chrome Extension and web app -Clerk allows you to sync the authentication state from your web app to your Chrome Extension using the Sync Host feature. When a user authenticates in your web app, they will also be authenticated in your Chrome Extension. See [the dedicated guide](/docs/references/chrome-extension/sync-host) for more information. +Clerk allows you to sync the authentication state from your web app to your Chrome Extension using the Sync Host feature. When a user authenticates in your web app, they will also be authenticated in your Chrome Extension. See [the dedicated guide](/docs/sdk/chrome-extension/sync-host) for more information. ## `createClerkClient()` It's recommended to use `createClerkClient()` for Chrome Extension's that need to interact with Clerk in a content script. -The `createClerkClient()` helper initializes a new Clerk instance on demand and refreshes the session token if there is a valid, signed-in user. It can be used in a [content script](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) or a [background service worker](https://developer.chrome.com/docs/extensions/develop/concepts/service-workers/basics) to access a user's information or session token. [Learn more about `createClerkClient()`](/docs/references/chrome-extension/create-clerk-client). +The `createClerkClient()` helper initializes a new Clerk instance on demand and refreshes the session token if there is a valid, signed-in user. It can be used in a [content script](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) or a [background service worker](https://developer.chrome.com/docs/extensions/develop/concepts/service-workers/basics) to access a user's information or session token. [Learn more about `createClerkClient()`](/docs/sdk/chrome-extension/create-clerk-client). ## Add React Router -[Learn how to add React Router to your Chrome Extension](/docs/references/chrome-extension/add-react-router) to enable routing in your application. +[Learn how to add React Router to your Chrome Extension](/docs/sdk/chrome-extension/add-react-router) to enable routing in your application. ## Deploy your extension to production @@ -51,7 +51,7 @@ See [the Chrome Extension deployment guide](/docs/deployments/deploy-chrome-exte ## Configure a consistent CRX ID -A Chrome Extension can be identified by its unique CRX ID, similar to how a website can be identified by its domain. The CRX ID rotates by default, which can cause errors with the Clerk integration. [Learn how to configure a consistent CRX ID](/docs/references/chrome-extension/configure-consistent-crx-id) so that your extension will have a stable, unchanging key. +A Chrome Extension can be identified by its unique CRX ID, similar to how a website can be identified by its domain. The CRX ID rotates by default, which can cause errors with the Clerk integration. [Learn how to configure a consistent CRX ID](/docs/sdk/chrome-extension/configure-consistent-crx-id) so that your extension will have a stable, unchanging key. ## Frequently asked questions (FAQ) diff --git a/docs/quickstarts/chrome-extension.mdx b/docs/sdk/chrome-extension/quickstart.mdx similarity index 96% rename from docs/quickstarts/chrome-extension.mdx rename to docs/sdk/chrome-extension/quickstart.mdx index bcbf211ec9..cc3b95826f 100644 --- a/docs/quickstarts/chrome-extension.mdx +++ b/docs/sdk/chrome-extension/quickstart.mdx @@ -57,7 +57,7 @@ description: Add authentication and user management to your Chrome Extension wit ## Install `@clerk/chrome-extension` - Clerk's [Chrome Extension SDK](/docs/references/chrome-extension/overview) gives you access to prebuilt components, React hooks, and helpers to make user authentication easier. + Clerk's [Chrome Extension SDK](/docs/sdk/chrome-extension/methods) gives you access to prebuilt components, React hooks, and helpers to make user authentication easier. Add the SDK to your project: @@ -282,22 +282,22 @@ description: Add authentication and user management to your Chrome Extension wit > [!WARNING] > After signing up or signing in, your popup may appear to crash. Closing and reopening the popup should restart the extension and you should be signed in. > - > Your extension does not yet have anything to handle routing, and by default, the Clerk components attempt to redirect the user. See [the guide on adding React Router to your Chrome Extension](/docs/references/chrome-extension/add-react-router) to add routing to your extension. + > Your extension does not yet have anything to handle routing, and by default, the Clerk components attempt to redirect the user. See [the guide on adding React Router to your Chrome Extension](/docs/sdk/chrome-extension/add-react-router) to add routing to your extension. ## Next steps - - [Add React Router](/docs/references/chrome-extension/add-react-router) + - [Add React Router](/docs/sdk/chrome-extension/add-react-router) - Learn how to add React Router to your Chrome Extension. --- - - [Sync your Chrome Extension with your web app](/docs/references/chrome-extension/sync-host) + - [Sync your Chrome Extension with your web app](/docs/sdk/chrome-extension/sync-host) - Learn how to configure your Chrome Extension to sync user authentication with your web application. --- - - [createClerkClient()](/docs/references/chrome-extension/create-clerk-client) + - [createClerkClient()](/docs/sdk/chrome-extension/create-clerk-client) - For Chrome Extension's configured as popups, learn how to use Clerk's `createClerkClient()` function in a background service worker to ensure that the user's session is always fresh. diff --git a/docs/references/chrome-extension/sync-host.mdx b/docs/sdk/chrome-extension/sync-host.mdx similarity index 95% rename from docs/references/chrome-extension/sync-host.mdx rename to docs/sdk/chrome-extension/sync-host.mdx index 592ccce0fe..159497b388 100644 --- a/docs/references/chrome-extension/sync-host.mdx +++ b/docs/sdk/chrome-extension/sync-host.mdx @@ -9,7 +9,7 @@ Clerk allows you to sync the authentication state from your web app to your Chro > Our Chrome Extension SDK currently does not fully support Sync Host on side panels. Currently, if a user authenticates in your web app, they need to close and reopen the side panel to update their auth status. > [!WARNING] -> This guide assumes assumes that you have followed the [Chrome Extension Quickstart](/docs/quickstarts/chrome-extension) and then the [Add React Router](/docs/references/chrome-extension/add-react-router) guide. +> This guide assumes assumes that you have followed the [Chrome Extension Quickstart](/docs/sdk/chrome-extension/quickstart) and then the [Add React Router](/docs/sdk/chrome-extension/add-react-router) guide. ## Add `PLASMO_PUBLIC_CLERK_SYNC_HOST` to your environment variables @@ -141,7 +141,7 @@ Clerk allows you to sync the authentication state from your web app to your Chro To allow your Chrome Extension to sync with your web app, you must add the extension's ID to your web app's `allowed_origins`. > [!NOTE] - > If you have not [configured a consistent key](/docs/references/chrome-extension/configure-consistent-crx-id), you will have to repeat this step every time your extension's ID changes. + > If you have not [configured a consistent key](/docs/sdk/chrome-extension/configure-consistent-crx-id), you will have to repeat this step every time your extension's ID changes. 1. In the Clerk Dashboard, navigate to the [**API keys**](https://dashboard.clerk.com/last-active?path=api-keys) page. 1. Copy your Secret Key. It should start with `sk_test_` or `sk_live_` for your development and production instances, respectively. diff --git a/docs/references/expo/local-credentials.mdx b/docs/sdk/expo/local-credentials.mdx similarity index 96% rename from docs/references/expo/local-credentials.mdx rename to docs/sdk/expo/local-credentials.mdx index 7c3b8f43ff..fd1c24d897 100644 --- a/docs/references/expo/local-credentials.mdx +++ b/docs/sdk/expo/local-credentials.mdx @@ -3,7 +3,7 @@ title: Allow returning users to sign in with biometrics in Expo description: Learn how to use the useLocalCredentials hook in your Expo app with Clerk. --- -Clerk's [`useLocalCredentials()`](/docs/references/expo/use-local-credentials) hook enables you to store a user's password credentials on their device and subsequently use biometrics for sign-in. +Clerk's [`useLocalCredentials()`](/docs/sdk/expo/use-local-credentials) hook enables you to store a user's password credentials on their device and subsequently use biometrics for sign-in. This guide shows you how to use the `useLocalCredentials()` hook to enhance your user experience by allowing users to sign in using biometrics when they re-sign in to your Expo app. @@ -198,7 +198,7 @@ This guide shows you how to use the `useLocalCredentials()` hook to enhance your Use the following guides to learn more about Clerk components, how to build custom flows for your native apps, and how to use Clerk's client-side helpers. - - [Expo SDK](/docs/quickstarts/expo) + - [Expo SDK](/docs/sdk/expo/quickstart) - Use Clerk with Expo to authenticate users in your React Native application. --- @@ -208,6 +208,6 @@ Use the following guides to learn more about Clerk components, how to build cust --- - - [Client-side helpers](/docs/references/react/use-user) + - [Client-side helpers](/docs/sdk/react/use-user) - Clerk's client-side helpers enable you to access user data and perform actions on the client-side. diff --git a/docs/references/expo/overview.mdx b/docs/sdk/expo/methods.mdx similarity index 81% rename from docs/references/expo/overview.mdx rename to docs/sdk/expo/methods.mdx index 126bcd9d51..fef4e4a239 100644 --- a/docs/references/expo/overview.mdx +++ b/docs/sdk/expo/methods.mdx @@ -5,7 +5,7 @@ description: Learn how to integrate Clerk into your Expo application using the C The Clerk Expo SDK is the recommended method for integrating Clerk into your Expo application. -See [the quickstart](/docs/quickstarts/expo) to get started. +See [the quickstart](/docs/sdk/expo/quickstart) to get started. ## Available resources @@ -15,9 +15,9 @@ The Expo SDK gives you access to the following resources: The following hooks are available for both **native** and **web** apps: -- All React hooks are available. See [the React docs](/docs/references/react/overview){{ target: '_blank' }} for more information. -- [`useOAuth()`](/docs/references/expo/use-oauth) -- [`useLocalCredentials()`](/docs/references/expo/use-local-credentials) +- All React hooks are available. See [the React docs](/docs/sdk/react/methods){{ target: '_blank' }} for more information. +- [`useOAuth()`](/docs/sdk/expo/use-oauth) +- [`useLocalCredentials()`](/docs/sdk/expo/use-local-credentials) ### Clerk components diff --git a/docs/references/expo/offline-support.mdx b/docs/sdk/expo/offline-support.mdx similarity index 100% rename from docs/references/expo/offline-support.mdx rename to docs/sdk/expo/offline-support.mdx diff --git a/docs/quickstarts/expo.mdx b/docs/sdk/expo/quickstart.mdx similarity index 94% rename from docs/quickstarts/expo.mdx rename to docs/sdk/expo/quickstart.mdx index 7a130303cd..4c2e9f5190 100644 --- a/docs/quickstarts/expo.mdx +++ b/docs/sdk/expo/quickstart.mdx @@ -35,7 +35,7 @@ description: Add authentication and user management to your Expo app with Clerk. ## Install `@clerk/clerk-expo` - Clerk's [Expo SDK](/docs/references/expo/overview) gives you access to prebuilt components, hooks, and helpers to make user authentication easier. + Clerk's [Expo SDK](/docs/sdk/expo/methods) gives you access to prebuilt components, hooks, and helpers to make user authentication easier. Run the following command to install the SDK: @@ -220,7 +220,7 @@ description: Add authentication and user management to your Expo app with Clerk. 1. Create an `(auth)` [route group](https://docs.expo.dev/router/layouts/#groups). This will group your sign-up and sign-in pages. 1. In the `(auth)` group, create a `_layout.tsx` file. - 1. Paste the following code. The [`useAuth()`](/docs/references/react/use-auth) hook is used to access the user's authentication state. If the user is already signed in, they will be redirected to the home page. + 1. Paste the following code. The [`useAuth()`](/docs/sdk/react/use-auth) hook is used to access the user's authentication state. If the user is already signed in, they will be redirected to the home page. ```tsx filename="app/(auth)/_layout.tsx" import { Redirect, Stack } from 'expo-router' @@ -240,7 +240,7 @@ description: Add authentication and user management to your Expo app with Clerk. ### Sign-up page 1. In the `(auth)` group, create a `sign-up.tsx` file. - 1. Paste the following code. The [`useSignUp()`](/docs/references/react/use-sign-up) hook is used to create a sign-up flow. The user can sign up using their email and password and will receive an email verification code to confirm their email. + 1. Paste the following code. The [`useSignUp()`](/docs/sdk/react/use-sign-up) hook is used to create a sign-up flow. The user can sign up using their email and password and will receive an email verification code to confirm their email. ```tsx {{ filename: 'app/(auth)/sign-up.tsx', collapsible: true }} import * as React from 'react' @@ -348,7 +348,7 @@ description: Add authentication and user management to your Expo app with Clerk. ### Sign-in page 1. In the `(auth)` group, create a `sign-in.tsx` file. - 1. Paste the following code. The [`useSignIn()`](/docs/references/react/use-sign-in) hook is used to create a sign-in flow. The user can sign in using email address and password, or navigate to the sign-up page. + 1. Paste the following code. The [`useSignIn()`](/docs/sdk/react/use-sign-in) hook is used to create a sign-in flow. The user can sign in using email address and password, or navigate to the sign-up page. ```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }} import { useSignIn } from '@clerk/clerk-expo' @@ -508,7 +508,7 @@ See the [`expo-updates`](https://docs.expo.dev/versions/latest/sdk/updates) libr --- - - [Read session and user data](/docs/references/expo/read-session-user-data) + - [Read session and user data](/docs/sdk/expo/read-session-user-data) - Learn how to read session and user data with Expo. --- diff --git a/docs/references/expo/read-session-user-data.mdx b/docs/sdk/expo/read-session-user-data.mdx similarity index 76% rename from docs/references/expo/read-session-user-data.mdx rename to docs/sdk/expo/read-session-user-data.mdx index 77925a7e3b..2694d2212a 100644 --- a/docs/references/expo/read-session-user-data.mdx +++ b/docs/sdk/expo/read-session-user-data.mdx @@ -7,7 +7,7 @@ This guide demonstrates how to access active session and user data in your Expo ## Session data example -The [`useAuth()`](/docs/references/react/use-auth){{ target: '_blank' }} hook provides information about the current auth state, as well as helper methods to manage the current active session. +The [`useAuth()`](/docs/sdk/react/use-auth){{ target: '_blank' }} hook provides information about the current auth state, as well as helper methods to manage the current active session. The following example demonstrates how to use `useAuth()` to get and display session and user data: @@ -32,7 +32,7 @@ export default function UseAuthExample() { ## User data example -The [`useUser()`](/docs/references/react/use-user){{ target: '_blank' }} hook enables you to access the current user's data and provides helper methods to manage the current active session. +The [`useUser()`](/docs/sdk/react/use-user){{ target: '_blank' }} hook enables you to access the current user's data and provides helper methods to manage the current active session. The following example demonstrates how to use `useUser()` to check if the user is signed in and display their first name: diff --git a/docs/references/expo/use-local-credentials.mdx b/docs/sdk/expo/use-local-credentials.mdx similarity index 98% rename from docs/references/expo/use-local-credentials.mdx rename to docs/sdk/expo/use-local-credentials.mdx index f08349cd38..c847a62433 100644 --- a/docs/references/expo/use-local-credentials.mdx +++ b/docs/sdk/expo/use-local-credentials.mdx @@ -72,4 +72,4 @@ The `useLocalCredentials()` hook enables you to store a user's password credenti ## How to use the `useLocalCredentials()` hook -To learn how to use the `useLocalCredentials()` hook, see the [reference doc](/docs/references/expo/local-credentials). +To learn how to use the `useLocalCredentials()` hook, see the [reference doc](/docs/sdk/expo/local-credentials). diff --git a/docs/references/expo/use-oauth.mdx b/docs/sdk/expo/use-oauth.mdx similarity index 100% rename from docs/references/expo/use-oauth.mdx rename to docs/sdk/expo/use-oauth.mdx diff --git a/docs/references/expo/web-support/custom-signup-signin-pages.mdx b/docs/sdk/expo/web-support/custom-signup-signin-pages.mdx similarity index 97% rename from docs/references/expo/web-support/custom-signup-signin-pages.mdx rename to docs/sdk/expo/web-support/custom-signup-signin-pages.mdx index e0d47a0dd1..24528fb17c 100644 --- a/docs/references/expo/web-support/custom-signup-signin-pages.mdx +++ b/docs/sdk/expo/web-support/custom-signup-signin-pages.mdx @@ -73,6 +73,6 @@ Use the following guides to learn more about Clerk components, how to build cust --- - - [Client-side helpers](/docs/references/react/use-user) + - [Client-side helpers](/docs/sdk/react/use-user) - Learn more about our client-side helpers and how to use them. diff --git a/docs/references/expo/web-support/overview.mdx b/docs/sdk/expo/web-support/overview.mdx similarity index 90% rename from docs/references/expo/web-support/overview.mdx rename to docs/sdk/expo/web-support/overview.mdx index 134b50e659..2555b82ea9 100644 --- a/docs/references/expo/web-support/overview.mdx +++ b/docs/sdk/expo/web-support/overview.mdx @@ -7,7 +7,7 @@ Expo provides a way to [develop web applications](https://docs.expo.dev/workflow ## Create a new project with web support -If you're starting from scratch, you can follow the [Expo quickstart](/docs/quickstarts/expo), which showcases how to create a sign-in and sign-up page with the same code for all platforms Expo supports. +If you're starting from scratch, you can follow the [Expo quickstart](/docs/sdk/expo/quickstart), which showcases how to create a sign-in and sign-up page with the same code for all platforms Expo supports. ## Add web support to an existing project @@ -36,6 +36,6 @@ Use the following guides to learn more about Clerk components, how to build cust --- - - [Client-side helpers](/docs/references/react/use-user) + - [Client-side helpers](/docs/sdk/react/use-user) - Learn more about our client-side helpers and how to use them. diff --git a/docs/references/express/overview.mdx b/docs/sdk/express/methods.mdx similarity index 98% rename from docs/references/express/overview.mdx rename to docs/sdk/express/methods.mdx index f937285b40..f5a677e121 100644 --- a/docs/references/express/overview.mdx +++ b/docs/sdk/express/methods.mdx @@ -5,7 +5,7 @@ description: Learn how to integrate Clerk into your Express application using th The Clerk Express SDK is the recommended method for integrating Clerk into your Express application. -See the [quickstart](/docs/quickstarts/express) to get started. +See the [quickstart](/docs/sdk/express/quickstart) to get started. {/* TODO: Remove callout when Node SDK is removed from docs */} diff --git a/docs/quickstarts/express.mdx b/docs/sdk/express/quickstart.mdx similarity index 96% rename from docs/quickstarts/express.mdx rename to docs/sdk/express/quickstart.mdx index f5dc8d6491..81170b0c3f 100644 --- a/docs/quickstarts/express.mdx +++ b/docs/sdk/express/quickstart.mdx @@ -35,7 +35,7 @@ Learn how to integrate Clerk into your Express backend for secure user authentic ## Install `@clerk/express` - Clerk's [Express SDK](/docs/references/express/overview) ships with a variety of helpers for the backend to make user authentication easier. + Clerk's [Express SDK](/docs/sdk/express/methods) ships with a variety of helpers for the backend to make user authentication easier. To get started using Clerk with Express, add the SDK to your project: @@ -149,7 +149,7 @@ Learn how to integrate Clerk into your Express backend for secure user authentic --- - - [Express SDK reference](/docs/references/express/overview) + - [Express SDK reference](/docs/sdk/express/methods) - Learn more about additional Express SDK methods. --- diff --git a/docs/quickstarts/fastify.mdx b/docs/sdk/fastify/quickstart.mdx similarity index 95% rename from docs/quickstarts/fastify.mdx rename to docs/sdk/fastify/quickstart.mdx index 9e146a2029..03d9c8160f 100644 --- a/docs/quickstarts/fastify.mdx +++ b/docs/sdk/fastify/quickstart.mdx @@ -110,7 +110,7 @@ Learn how to integrate Clerk into your Fastify backend for secure user authentic ## Use `getAuth()` to access the auth state and protect routes - The following example uses [`getAuth()`](/docs/references/nextjs/get-auth){{ target: '_blank' }} to retrieve the `userId`, which is used to protect the route and is passed to [`clerkClient.users.getUser()`](/docs/references/backend/user/get-user){{ target: '_blank' }} to retrieve the current user's `User` object. + The following example uses [`getAuth()`](/docs/sdk/nextjs/get-auth){{ target: '_blank' }} to retrieve the `userId`, which is used to protect the route and is passed to [`clerkClient.users.getUser()`](/docs/references/backend/user/get-user){{ target: '_blank' }} to retrieve the current user's `User` object. ```ts {{ filename: 'index.ts' }} import 'dotenv/config' diff --git a/docs/references/go/other-examples.mdx b/docs/sdk/go/other-examples.mdx similarity index 100% rename from docs/references/go/other-examples.mdx rename to docs/sdk/go/other-examples.mdx diff --git a/docs/references/go/overview.mdx b/docs/sdk/go/quickstart.mdx similarity index 96% rename from docs/references/go/overview.mdx rename to docs/sdk/go/quickstart.mdx index 5c4322405b..56b3dc3146 100644 --- a/docs/references/go/overview.mdx +++ b/docs/sdk/go/quickstart.mdx @@ -117,4 +117,4 @@ for _, resource := range list.$Resource$s { } ``` -For more usage details, see the [examples](/docs/references/go/other-examples) or the library's [README file](https://github.com/clerk/clerk-sdk-go/tree/v2). +For more usage details, see the [examples](/docs/sdk/go/other-examples) or the library's [README file](https://github.com/clerk/clerk-sdk-go/tree/v2). diff --git a/docs/references/go/verifying-sessions.mdx b/docs/sdk/go/verifying-sessions.mdx similarity index 100% rename from docs/references/go/verifying-sessions.mdx rename to docs/sdk/go/verifying-sessions.mdx diff --git a/docs/references/ios/get-token.mdx b/docs/sdk/ios/get-token.mdx similarity index 100% rename from docs/references/ios/get-token.mdx rename to docs/sdk/ios/get-token.mdx diff --git a/docs/references/ios/overview.mdx b/docs/sdk/ios/methods.mdx similarity index 92% rename from docs/references/ios/overview.mdx rename to docs/sdk/ios/methods.mdx index 8370e1a2a2..1e05b991d2 100644 --- a/docs/references/ios/overview.mdx +++ b/docs/sdk/ios/methods.mdx @@ -8,7 +8,7 @@ description: Learn how to integrate Clerk into your iOS application using the Cl The Clerk iOS SDK is the recommended method for integrating Clerk into your iOS application. -See [the quickstart](/docs/quickstarts/ios) to get started. +See [the quickstart](/docs/sdk/ios/quickstart) to get started. ## SDK Reference diff --git a/docs/quickstarts/ios.mdx b/docs/sdk/ios/quickstart.mdx similarity index 100% rename from docs/quickstarts/ios.mdx rename to docs/sdk/ios/quickstart.mdx diff --git a/docs/references/ios/sign-in-with-apple.mdx b/docs/sdk/ios/sign-in-with-apple.mdx similarity index 100% rename from docs/references/ios/sign-in-with-apple.mdx rename to docs/sdk/ios/sign-in-with-apple.mdx diff --git a/docs/references/nextjs/auth.mdx b/docs/sdk/nextjs/auth.mdx similarity index 95% rename from docs/references/nextjs/auth.mdx rename to docs/sdk/nextjs/auth.mdx index 000e1468f8..2955e28486 100644 --- a/docs/references/nextjs/auth.mdx +++ b/docs/sdk/nextjs/auth.mdx @@ -7,7 +7,7 @@ The `auth()` helper returns the [`Auth`](/docs/references/backend/types/auth-obj - Only available for App Router. - Only works on the server-side, such as in Server Components, Route Handlers, and Server Actions. -- Requires [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware) to be configured. +- Requires [`clerkMiddleware()`](/docs/sdk/nextjs/clerk-middleware) to be configured. ## `auth.protect()` @@ -86,7 +86,7 @@ The `auth()` helper returns the `redirectToSignIn()` method, which you can use t ### Example -The following example shows how to use `redirectToSignIn()` to redirect the user to the sign-in page if they are not authenticated. It's also common to use `redirectToSignIn()` in `clerkMiddleware()` to protect entire routes; see [the `clerkMiddleware()` docs](/docs/references/nextjs/clerk-middleware) for more information. +The following example shows how to use `redirectToSignIn()` to redirect the user to the sign-in page if they are not authenticated. It's also common to use `redirectToSignIn()` in `clerkMiddleware()` to protect entire routes; see [the `clerkMiddleware()` docs](/docs/sdk/nextjs/clerk-middleware) for more information. ```tsx {{ filename: 'app/page.tsx' }} import { auth } from '@clerk/nextjs/server' @@ -118,7 +118,7 @@ export default async function Page() { ## Use `auth()` in API routes -See detailed examples in the [dedicated guide](/docs/references/nextjs/read-session-data). +See detailed examples in the [dedicated guide](/docs/sdk/nextjs/read-session-data). ## Use `auth()` to check roles and permissions diff --git a/docs/references/nextjs/build-clerk-props.mdx b/docs/sdk/nextjs/build-clerk-props.mdx similarity index 100% rename from docs/references/nextjs/build-clerk-props.mdx rename to docs/sdk/nextjs/build-clerk-props.mdx diff --git a/docs/references/nextjs/clerk-middleware.mdx b/docs/sdk/nextjs/clerk-middleware.mdx similarity index 98% rename from docs/references/nextjs/clerk-middleware.mdx rename to docs/sdk/nextjs/clerk-middleware.mdx index 7dcdf3152c..816b8f96a7 100644 --- a/docs/references/nextjs/clerk-middleware.mdx +++ b/docs/sdk/nextjs/clerk-middleware.mdx @@ -341,7 +341,7 @@ The `clerkMiddleware()` function accepts an optional object. The following optio - `organizationSyncOptions?` - [OrganizationSyncOptions](#organization-sync-options) | undefined - Used to activate a specific [organization](/docs/organizations/overview) or [personal account](/docs/organizations/organization-workspaces#organization-workspaces-in-the-clerk-dashboard:~:text=Personal%20account) based on URL path parameters. If there's a mismatch between the active organization in the session (e.g., as reported by [`auth()`](/docs/references/nextjs/auth)) and the organization indicated by the URL, the middleware will attempt to activate the organization specified in the URL. + Used to activate a specific [organization](/docs/organizations/overview) or [personal account](/docs/organizations/organization-workspaces#organization-workspaces-in-the-clerk-dashboard:~:text=Personal%20account) based on URL path parameters. If there's a mismatch between the active organization in the session (e.g., as reported by [`auth()`](/docs/sdk/nextjs/auth)) and the organization indicated by the URL, the middleware will attempt to activate the organization specified in the URL. --- @@ -400,7 +400,7 @@ export default clerkMiddleware( > [!NOTE] > Dynamic keys are not accessible on the client-side. -The following options, known as "Dynamic Keys," are shared to the Next.js application server through `clerkMiddleware`, enabling access by server-side helpers like [`auth()`](/docs/references/nextjs/auth): +The following options, known as "Dynamic Keys," are shared to the Next.js application server through `clerkMiddleware`, enabling access by server-side helpers like [`auth()`](/docs/sdk/nextjs/auth): - `signUpUrl` - `signInUrl` diff --git a/docs/references/nextjs/current-user.mdx b/docs/sdk/nextjs/current-user.mdx similarity index 100% rename from docs/references/nextjs/current-user.mdx rename to docs/sdk/nextjs/current-user.mdx diff --git a/docs/references/nextjs/custom-signup-signin-pages.mdx b/docs/sdk/nextjs/custom-signup-signin-pages.mdx similarity index 96% rename from docs/references/nextjs/custom-signup-signin-pages.mdx rename to docs/sdk/nextjs/custom-signup-signin-pages.mdx index 6b971df480..4bf04b985b 100644 --- a/docs/references/nextjs/custom-signup-signin-pages.mdx +++ b/docs/sdk/nextjs/custom-signup-signin-pages.mdx @@ -11,7 +11,7 @@ If the prebuilt components don't meet your specific needs or if you require more > Watch the video version of this guide on the Clerk YouTube channel → [YouTube (4 minutes)](https://youtu.be/fsuHLafTYyg). > [!NOTE] -> Just getting started with Clerk and Next.js? See the [quickstart tutorial](/docs/quickstarts/nextjs)! +> Just getting started with Clerk and Next.js? See the [quickstart tutorial](/docs/sdk/nextjs/quickstart)! ## Build a sign-up page @@ -102,7 +102,7 @@ If the prebuilt components don't meet your specific needs or if you require more ## Next steps - - [Read user and session data](/docs/references/nextjs/read-session-data) + - [Read user and session data](/docs/sdk/nextjs/read-session-data) - Learn how to use Clerk's hooks and helpers to access the active session and user data in your Next.js application. --- @@ -112,7 +112,7 @@ If the prebuilt components don't meet your specific needs or if you require more --- - - [Next.js SDK Reference](/docs/references/nextjs/overview) + - [Next.js SDK Reference](/docs/sdk/nextjs/methods) - Learn more about additional Next.js methods. --- diff --git a/docs/references/nextjs/get-auth.mdx b/docs/sdk/nextjs/get-auth.mdx similarity index 96% rename from docs/references/nextjs/get-auth.mdx rename to docs/sdk/nextjs/get-auth.mdx index 1b96d951ca..8ba2b5791a 100644 --- a/docs/references/nextjs/get-auth.mdx +++ b/docs/sdk/nextjs/get-auth.mdx @@ -6,7 +6,7 @@ description: The getAuth() helper retrieves authentication state from the reques The `getAuth()` helper retrieves authentication state from the request object. > [!NOTE] -> If you are using App Router, use the [`auth()` helper](/docs/references/nextjs/auth) instead. +> If you are using App Router, use the [`auth()` helper](/docs/sdk/nextjs/auth) instead. ## Parameters diff --git a/docs/references/nextjs/overview.mdx b/docs/sdk/nextjs/methods.mdx similarity index 81% rename from docs/references/nextjs/overview.mdx rename to docs/sdk/nextjs/methods.mdx index 2e1913309c..463f426390 100644 --- a/docs/references/nextjs/overview.mdx +++ b/docs/sdk/nextjs/methods.mdx @@ -7,7 +7,7 @@ The Clerk Next.js SDK is the recommended method for integrating Clerk into your ## Client-side helpers -Because the Next.js SDK is built on top of the Clerk React SDK, you can use the hooks that the React SDK provides. These hooks give you access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object and a set of useful helper methods for signing in and signing up. Learn more in the [React SDK reference](/docs/references/react/overview). +Because the Next.js SDK is built on top of the Clerk React SDK, you can use the hooks that the React SDK provides. These hooks give you access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object and a set of useful helper methods for signing in and signing up. Learn more in the [React SDK reference](/docs/sdk/react/methods). @@ -17,17 +17,17 @@ Because the Next.js SDK is built on top of the Clerk React SDK, you can use the Clerk provides first-class support for the [Next.js App Router](https://nextjs.org/docs/app). The following references show how to integrate Clerk features into apps using the latest App Router and React Server Components features. -- [`auth()`](/docs/references/nextjs/auth) -- [`currentUser()`](/docs/references/nextjs/current-user) -- [Route Handlers](/docs/references/nextjs/route-handlers) -- [Server Actions](/docs/references/nextjs/server-actions) +- [`auth()`](/docs/sdk/nextjs/auth) +- [`currentUser()`](/docs/sdk/nextjs/current-user) +- [Route Handlers](/docs/sdk/nextjs/route-handlers) +- [Server Actions](/docs/sdk/nextjs/server-actions) ### Pages router Clerk continues to provide drop-in support for the Next.js Pages Router. In addition to the main Clerk integration, the following references are available for apps using Pages Router. -- [`getAuth()`](/docs/references/nextjs/get-auth) -- [`buildClerkProps()`](/docs/references/nextjs/build-clerk-props) +- [`getAuth()`](/docs/sdk/nextjs/get-auth) +- [`buildClerkProps()`](/docs/sdk/nextjs/build-clerk-props) ## `Auth` object @@ -35,7 +35,7 @@ Both `auth()` (App Router) and `getAuth()` (Pages Router) return an `Auth` objec ## `clerkMiddleware()` -The `clerkMiddleware()` helper integrates Clerk authentication into your Next.js application through middleware. It allows you to integrate authorization into both the client and server of your application. You can learn more [here](/docs/references/nextjs/clerk-middleware). +The `clerkMiddleware()` helper integrates Clerk authentication into your Next.js application through middleware. It allows you to integrate authorization into both the client and server of your application. You can learn more [here](/docs/sdk/nextjs/clerk-middleware). ## Demo repositories diff --git a/docs/quickstarts/nextjs.mdx b/docs/sdk/nextjs/quickstart.mdx similarity index 92% rename from docs/quickstarts/nextjs.mdx rename to docs/sdk/nextjs/quickstart.mdx index 1c6e51bce7..13e1b00958 100644 --- a/docs/quickstarts/nextjs.mdx +++ b/docs/sdk/nextjs/quickstart.mdx @@ -27,7 +27,7 @@ description: Add authentication and user management to your Next.js app with Cle ## Install `@clerk/nextjs` - Clerk's [Next.js SDK](/docs/references/nextjs/overview) gives you access to prebuilt components, React hooks, and helpers to make user authentication easier. + Clerk's [Next.js SDK](/docs/sdk/nextjs/methods) gives you access to prebuilt components, React hooks, and helpers to make user authentication easier. Run the following command to install the SDK: @@ -93,7 +93,7 @@ description: Add authentication and user management to your Next.js app with Cle ], } ``` - 1. By default, `clerkMiddleware()` will not protect any routes. All routes are public and you must opt-in to protection for routes. See the [`clerkMiddleware()` reference](/docs/references/nextjs/clerk-middleware) to learn how to require authentication for specific routes. + 1. By default, `clerkMiddleware()` will not protect any routes. All routes are public and you must opt-in to protection for routes. See the [`clerkMiddleware()` reference](/docs/sdk/nextjs/clerk-middleware) to learn how to require authentication for specific routes. ## Add `` and Clerk components to your app @@ -181,17 +181,17 @@ description: Add authentication and user management to your Next.js app with Cle ## Next steps - - [Protect routes using Clerk Middleware](/docs/references/nextjs/clerk-middleware) + - [Protect routes using Clerk Middleware](/docs/sdk/nextjs/clerk-middleware) - Learn how to protect specific routes from unauthenticated users. --- - - [Create custom sign-up and sign-in pages](/docs/references/nextjs/custom-signup-signin-pages) + - [Create custom sign-up and sign-in pages](/docs/sdk/nextjs/custom-signup-signin-pages) - Learn how add custom sign-up and sign-in pages with Clerk components. --- - - [Read user and session data](/docs/references/nextjs/read-session-data) + - [Read user and session data](/docs/sdk/nextjs/read-session-data) - Learn how to use Clerk's hooks and helpers to access the active session and user data in your Next.js app. --- @@ -201,7 +201,7 @@ description: Add authentication and user management to your Next.js app with Cle --- - - [Next.js SDK Reference](/docs/references/nextjs/overview) + - [Next.js SDK Reference](/docs/sdk/nextjs/methods) - Learn more about additional Next.js methods. --- diff --git a/docs/references/nextjs/read-session-data.mdx b/docs/sdk/nextjs/read-session-data.mdx similarity index 84% rename from docs/references/nextjs/read-session-data.mdx rename to docs/sdk/nextjs/read-session-data.mdx index 8fceb5fe56..fbe61ad2dd 100644 --- a/docs/references/nextjs/read-session-data.mdx +++ b/docs/sdk/nextjs/read-session-data.mdx @@ -9,7 +9,7 @@ Clerk provides a set of [hooks and helpers](/docs/references/nextjs/overview#cli ### App Router -[`auth()`](/docs/references/nextjs/auth) and [`currentUser()`](/docs/references/nextjs/current-user) are App Router-specific helpers that you can use inside of your Route Handlers, Middleware, Server Components, and Server Actions. +[`auth()`](/docs/sdk/nextjs/auth) and [`currentUser()`](/docs/sdk/nextjs/current-user) are App Router-specific helpers that you can use inside of your Route Handlers, Middleware, Server Components, and Server Actions. The `auth()` helper will return the [`Auth`](/docs/references/backend/types/auth-object) object of the currently active user. Now that request data is available in the global scope through Next.js's `headers()` and `cookies()` methods, passing the request object to Clerk is no longer required. @@ -43,7 +43,7 @@ Under the hood, `currentUser()` uses the [`clerkClient`](/docs/references/backen - A Route Handler can use the [`auth()`](/docs/references/nextjs/auth) helper to return information about the user or their authentication state, or to control access to some or all of the Route Handler. The `auth()` helper does require [Middleware](/docs/references/nextjs/clerk-middleware). + A Route Handler can use the [`auth()`](/docs/sdk/nextjs/auth) helper to return information about the user or their authentication state, or to control access to some or all of the Route Handler. The `auth()` helper does require [Middleware](/docs/sdk/nextjs/clerk-middleware). ```tsx {{ filename: 'app/api/user/route.tsx' }} import { NextResponse } from 'next/server' @@ -66,7 +66,7 @@ Under the hood, `currentUser()` uses the [`clerkClient`](/docs/references/backen - A Route Handler can use the [`auth()`](/docs/references/nextjs/auth) helper to return information about the user or their authentication state, or to control access to some or all of the Route Handler. The `auth()` helper does require [Middleware](/docs/references/nextjs/clerk-middleware). + A Route Handler can use the [`auth()`](/docs/sdk/nextjs/auth) helper to return information about the user or their authentication state, or to control access to some or all of the Route Handler. The `auth()` helper does require [Middleware](/docs/sdk/nextjs/clerk-middleware). In this example, the `auth()` helper is used to validate an authenticated user and the `currentUser()` helper is used to access the `Backend User` object for the authenticated user. @@ -97,7 +97,7 @@ Under the hood, `currentUser()` uses the [`clerkClient`](/docs/references/backen - For Next.js applications using the Pages Router, you can retrieve information about the user and their authentication state, or control access to some or all of your API routes by using the [`getAuth()`](/docs/references/nextjs/get-auth) helper. The `getAuth()` helper does require [Middleware](/docs/references/nextjs/clerk-middleware). + For Next.js applications using the Pages Router, you can retrieve information about the user and their authentication state, or control access to some or all of your API routes by using the [`getAuth()`](/docs/sdk/nextjs/get-auth) helper. The `getAuth()` helper does require [Middleware](/docs/sdk/nextjs/clerk-middleware). ```tsx {{ filename: 'pages/api/auth.ts' }} import type { NextApiRequest, NextApiResponse } from 'next' @@ -118,7 +118,7 @@ Under the hood, `currentUser()` uses the [`clerkClient`](/docs/references/backen - For Next.js applications using the Pages Router, you can retrieve information about the user and their authentication state, or control access to some or all of your API routes by using the `getAuth()` helper. The `getAuth()` helper does require [Middleware](/docs/references/nextjs/clerk-middleware). + For Next.js applications using the Pages Router, you can retrieve information about the user and their authentication state, or control access to some or all of your API routes by using the `getAuth()` helper. The `getAuth()` helper does require [Middleware](/docs/sdk/nextjs/clerk-middleware). In some cases, you may need the full `User` object. For example, if you want to access the user's email address address or name, you can use the [`clerkClient`](/docs/references/backend/overview) helper to get the full `User` object. @@ -190,7 +190,7 @@ Under the hood, `currentUser()` uses the [`clerkClient`](/docs/references/backen ### `useAuth` -The [`useAuth`](/docs/references/react/use-auth) hook is a convenient way to access the current auth state. This hook provides the minimal information needed for data-loading and helper methods to manage the current active session. +The [`useAuth`](/docs/sdk/react/use-auth) hook is a convenient way to access the current auth state. This hook provides the minimal information needed for data-loading and helper methods to manage the current active session. ```tsx {{ filename: 'example.tsx' }} 'use client' @@ -214,7 +214,7 @@ export default function Example() { ### `useUser` -The [`useUser`](/docs/references/react/use-user) hook is a convenient way to access the current user data where you need it. This hook provides the user data and helper methods to manage the current active session. +The [`useUser`](/docs/sdk/react/use-user) hook is a convenient way to access the current user data where you need it. This hook provides the user data and helper methods to manage the current active session. ```tsx {{ filename: 'example.tsx' }} 'use client' diff --git a/docs/references/nextjs/rendering-modes.mdx b/docs/sdk/nextjs/rendering-modes.mdx similarity index 100% rename from docs/references/nextjs/rendering-modes.mdx rename to docs/sdk/nextjs/rendering-modes.mdx diff --git a/docs/references/nextjs/route-handlers.mdx b/docs/sdk/nextjs/route-handlers.mdx similarity index 93% rename from docs/references/nextjs/route-handlers.mdx rename to docs/sdk/nextjs/route-handlers.mdx index fea9f74abc..e48bd1eb16 100644 --- a/docs/references/nextjs/route-handlers.mdx +++ b/docs/sdk/nextjs/route-handlers.mdx @@ -7,7 +7,7 @@ Clerk provides helpers that allow you to protect your Route Handlers, fetch the ## Protect your Route Handlers -If you aren't protecting your Route Handler using [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware), you can protect your Route Handler in two ways: +If you aren't protecting your Route Handler using [`clerkMiddleware()`](/docs/sdk/nextjs/clerk-middleware), you can protect your Route Handler in two ways: - Use [`auth.protect()`](/docs/references/nextjs/auth#protect) if you want Clerk to return a `404` error when there is no signed in user. - Use [`auth().userId`](/docs/references/nextjs/auth#retrieving-user-id) if you want to customize the behavior or error message. @@ -71,7 +71,7 @@ export async function GET() { ## Retrieve the current user -In some cases, you might need the current user in your Route Handler. Clerk provides an asynchronous helper called [`currentUser()`](/docs/references/nextjs/current-user) to retrieve the current [`Backend User`](/docs/references/backend/types/backend-user) object. +In some cases, you might need the current user in your Route Handler. Clerk provides an asynchronous helper called [`currentUser()`](/docs/sdk/nextjs/current-user) to retrieve the current [`Backend User`](/docs/references/backend/types/backend-user) object. ```ts {{ filename: 'app/api/route.ts' }} import { NextResponse } from 'next/server' diff --git a/docs/references/nextjs/server-actions.mdx b/docs/sdk/nextjs/server-actions.mdx similarity index 93% rename from docs/references/nextjs/server-actions.mdx rename to docs/sdk/nextjs/server-actions.mdx index 8278292bc5..c914b65963 100644 --- a/docs/references/nextjs/server-actions.mdx +++ b/docs/sdk/nextjs/server-actions.mdx @@ -11,7 +11,7 @@ The following guide provides examples for using Server Actions in Server Compone ### Protect your Server Actions -You can use the [`auth()`](/docs/references/nextjs/auth) helper to protect your server actions. This helper will return the current user's ID if they are signed in, or `null` if they are not. +You can use the [`auth()`](/docs/sdk/nextjs/auth) helper to protect your server actions. This helper will return the current user's ID if they are signed in, or `null` if they are not. ```tsx {{ filename: 'actions.ts' }} import { auth } from '@clerk/nextjs/server' @@ -40,7 +40,7 @@ export default function AddToCart() { ### Accessing the current user -Current user data is important for data enrichment. You can use the [`currentUser()`](/docs/references/nextjs/current-user) helper to fetch the current user's data in your server actions. +Current user data is important for data enrichment. You can use the [`currentUser()`](/docs/sdk/nextjs/current-user) helper to fetch the current user's data in your server actions. ```tsx {{ filename: 'app/page.tsx' }} import { currentUser } from '@clerk/nextjs/server' diff --git a/docs/references/nextjs/trpc.mdx b/docs/sdk/nextjs/trpc.mdx similarity index 97% rename from docs/references/nextjs/trpc.mdx rename to docs/sdk/nextjs/trpc.mdx index af24bae573..96b34bfb03 100644 --- a/docs/references/nextjs/trpc.mdx +++ b/docs/sdk/nextjs/trpc.mdx @@ -31,7 +31,7 @@ description: Learn how to integrate Clerk into your Next.js Pages Router applica Clerk's [`Auth`](/docs/references/backend/types/auth-object) object includes important authentication information like the current user's session ID, user ID, and organization ID. It also contains methods to check for the current user's permissions and to retrieve their session token. - To add Clerk's authentication context (`Auth` object) to your tRPC server, create a context file that will be used to create the context for every tRPC query sent to the server. This context file will use the [`getAuth()`](/docs/references/nextjs/get-auth) helper from Clerk to access the user's `Auth` object. + To add Clerk's authentication context (`Auth` object) to your tRPC server, create a context file that will be used to create the context for every tRPC query sent to the server. This context file will use the [`getAuth()`](/docs/sdk/nextjs/get-auth) helper from Clerk to access the user's `Auth` object. ```ts {{ filename: 'src/server/context.ts' }} import * as trpc from '@trpc/server' diff --git a/docs/references/nodejs/available-methods.mdx b/docs/sdk/nodejs/methods.mdx similarity index 100% rename from docs/references/nodejs/available-methods.mdx rename to docs/sdk/nodejs/methods.mdx diff --git a/docs/references/nodejs/overview.mdx b/docs/sdk/nodejs/quickstart.mdx similarity index 95% rename from docs/references/nodejs/overview.mdx rename to docs/sdk/nodejs/quickstart.mdx index 2b21bfe02e..4ab8234237 100644 --- a/docs/references/nodejs/overview.mdx +++ b/docs/sdk/nodejs/quickstart.mdx @@ -11,7 +11,7 @@ description: Learn how to integrate Node.js into your Clerk application. ### Create a Clerk application - You need to create a Clerk application in the Clerk Dashboard before you can set up Clerk Node.js. For more information, see the [setup guide](/docs/quickstarts/setup-clerk). + You need to create a Clerk application in the Clerk Dashboard before you can set up Clerk Node.js. For more information, see the [setup guide](/docs/getting-started). ### Install `@clerk/clerk-sdk-node` @@ -45,7 +45,7 @@ description: Learn how to integrate Node.js into your Clerk application. ## Available methods -All resource operations are mounted as sub-APIs on the `clerkClient` object. To access the resource operations, [you must first instantiate a `clerkClient` instance](/docs/references/nodejs/available-methods). +All resource operations are mounted as sub-APIs on the `clerkClient` object. To access the resource operations, [you must first instantiate a `clerkClient` instance](/docs/sdk/nodejs/methods). ## Multi-session applications diff --git a/docs/references/nuxt/clerk-middleware.mdx b/docs/sdk/nuxt/clerk-middleware.mdx similarity index 99% rename from docs/references/nuxt/clerk-middleware.mdx rename to docs/sdk/nuxt/clerk-middleware.mdx index e3bfb8f5a0..44c76890ea 100644 --- a/docs/references/nuxt/clerk-middleware.mdx +++ b/docs/sdk/nuxt/clerk-middleware.mdx @@ -6,7 +6,7 @@ description: The clerkMiddleware() helper allows you to protect your Nuxt applic The `clerkMiddleware()` helper allows you to protect your Nuxt application **on the server-side**. It can be used to validate a user's authentication status or authorization status. > [!NOTE] -> To learn how to protect pages, see the [dedicated guide](/docs/references/nuxt/protect-pages). +> To learn how to protect pages, see the [dedicated guide](/docs/sdk/nuxt/protect-pages). ## Configure `clerkMiddleware()` diff --git a/docs/references/nuxt/overview.mdx b/docs/sdk/nuxt/methods.mdx similarity index 76% rename from docs/references/nuxt/overview.mdx rename to docs/sdk/nuxt/methods.mdx index 34f56daac9..2964f4ffbe 100644 --- a/docs/references/nuxt/overview.mdx +++ b/docs/sdk/nuxt/methods.mdx @@ -3,16 +3,16 @@ title: Clerk Nuxt SDK description: Learn how to integrate Clerk into your Nuxt application using the Clerk Nuxt SDK. --- -The Nuxt SDK is built on top of the [Vue SDK](/docs/references/vue/overview), and is the recommended method for integrating Clerk into your Nuxt application. +The Nuxt SDK is built on top of the [Vue SDK](/docs/sdk/vue/methods), and is the recommended method for integrating Clerk into your Nuxt application. ## Guides -- [Read session and user data](/docs/references/nuxt/read-session-data) -- [Protect pages](/docs/references/nuxt/protect-pages) +- [Read session and user data](/docs/sdk/nuxt/read-session-data) +- [Protect pages](/docs/sdk/nuxt/protect-pages) ## Client-side helpers -Because the Nuxt SDK is built on top of the Clerk Vue SDK, you can use the composables that the Vue SDK provides. These composables give you access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object and a set of useful helper methods for signing in and signing up. Learn more in the [Vue SDK reference](/docs/references/vue/overview). +Because the Nuxt SDK is built on top of the Clerk Vue SDK, you can use the composables that the Vue SDK provides. These composables give you access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object and a set of useful helper methods for signing in and signing up. Learn more in the [Vue SDK reference](/docs/sdk/vue/methods). @@ -22,7 +22,7 @@ The `Auth` object is available at `event.context.auth` in your [event handlers]( ## `clerkMiddleware()` -The `clerkMiddleware()` helper integrates Clerk authentication and authorization into your Nuxt application through middleware. [Learn more](/docs/references/nuxt/clerk-middleware). +The `clerkMiddleware()` helper integrates Clerk authentication and authorization into your Nuxt application through middleware. [Learn more](/docs/sdk/nuxt/clerk-middleware). ## `clerkClient()` diff --git a/docs/references/nuxt/protect-pages.mdx b/docs/sdk/nuxt/protect-pages.mdx similarity index 100% rename from docs/references/nuxt/protect-pages.mdx rename to docs/sdk/nuxt/protect-pages.mdx diff --git a/docs/quickstarts/nuxt.mdx b/docs/sdk/nuxt/quickstart.mdx similarity index 93% rename from docs/quickstarts/nuxt.mdx rename to docs/sdk/nuxt/quickstart.mdx index 452360020f..d398083f15 100644 --- a/docs/quickstarts/nuxt.mdx +++ b/docs/sdk/nuxt/quickstart.mdx @@ -35,7 +35,7 @@ description: Add authentication and user management to your Nuxt app with Clerk. ## Install `@clerk/nuxt` - Clerk's [Nuxt SDK](/docs/references/nuxt/overview) gives you access to prebuilt components, Vue composables, and helpers to make user authentication easier. + Clerk's [Nuxt SDK](/docs/sdk/nuxt/methods) gives you access to prebuilt components, Vue composables, and helpers to make user authentication easier. Run the following command to install the SDK: @@ -142,12 +142,12 @@ description: Add authentication and user management to your Nuxt app with Clerk. Learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers using the following guides. - - [Protect API routes using `clerkMiddleware()`](/docs/references/nuxt/clerk-middleware) + - [Protect API routes using `clerkMiddleware()`](/docs/sdk/nuxt/clerk-middleware) - Learn how to protect specific API routes from unauthenticated users. --- - - [Read session and user data](/docs/references/nuxt/read-session-data) + - [Read session and user data](/docs/sdk/nuxt/read-session-data) - Learn how to use Clerk's composables and helpers to access the active session and user data in your Nuxt app. --- diff --git a/docs/references/nuxt/read-session-data.mdx b/docs/sdk/nuxt/read-session-data.mdx similarity index 100% rename from docs/references/nuxt/read-session-data.mdx rename to docs/sdk/nuxt/read-session-data.mdx diff --git a/docs/references/react-router/custom-signup-signin-pages.mdx b/docs/sdk/react-router/custom-signup-signin-pages.mdx similarity index 97% rename from docs/references/react-router/custom-signup-signin-pages.mdx rename to docs/sdk/react-router/custom-signup-signin-pages.mdx index 5a445e7093..c6d419a53d 100644 --- a/docs/references/react-router/custom-signup-signin-pages.mdx +++ b/docs/sdk/react-router/custom-signup-signin-pages.mdx @@ -3,7 +3,7 @@ title: Build your own sign-up and sign-in pages for your React Router app with C description: Learn how to add custom sign-up and sign-in pages to your React Router app with Clerk's prebuilt components. --- -This guide shows you how to use the [``](/docs/components/authentication/sign-in) and [``](/docs/components/authentication/sign-up) components with the [React Router Splat route](https://reactrouter.com/start/framework/routing#splats) to build custom sign-up and sign-in pages for your React Router app. See the [quickstart tutorial](/docs/quickstarts/react-router) for a step-by-step guide. +This guide shows you how to use the [``](/docs/components/authentication/sign-in) and [``](/docs/components/authentication/sign-up) components with the [React Router Splat route](https://reactrouter.com/start/framework/routing#splats) to build custom sign-up and sign-in pages for your React Router app. See the [quickstart tutorial](/docs/sdk/react-router/quickstart) for a step-by-step guide. 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). diff --git a/docs/references/react-router/get-auth.mdx b/docs/sdk/react-router/get-auth.mdx similarity index 100% rename from docs/references/react-router/get-auth.mdx rename to docs/sdk/react-router/get-auth.mdx diff --git a/docs/references/react-router/library-mode.mdx b/docs/sdk/react-router/library-mode.mdx similarity index 94% rename from docs/references/react-router/library-mode.mdx rename to docs/sdk/react-router/library-mode.mdx index 4d04824993..3baafa1577 100644 --- a/docs/references/react-router/library-mode.mdx +++ b/docs/sdk/react-router/library-mode.mdx @@ -27,12 +27,12 @@ description: Learn how to use Clerk with React Router in library mode to add aut - Protect your pages -React Router can be used as a framework or as a standalone library. This guide explains how to add React Router authentication to an existing React application using library mode. To use React Router as a framework instead, see the [React Router quickstart](/docs/quickstarts/react-router). +React Router can be used as a framework or as a standalone library. This guide explains how to add React Router authentication to an existing React application using library mode. To use React Router as a framework instead, see the [React Router quickstart](/docs/sdk/react-router/quickstart). ## Install `@clerk/react-router` - 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. + Clerk's [React Router SDK](/docs/sdk/react-router/methods) provides prebuilt components, hooks, and stores to make it easy to integrate authentication and user management in your React Router app. Run the following command to install the SDK: diff --git a/docs/references/react-router/overview.mdx b/docs/sdk/react-router/methods.mdx similarity index 77% rename from docs/references/react-router/overview.mdx rename to docs/sdk/react-router/methods.mdx index f2172fd371..430f31563f 100644 --- a/docs/references/react-router/overview.mdx +++ b/docs/sdk/react-router/methods.mdx @@ -6,11 +6,11 @@ description: Learn how to integrate Clerk into your React Router application usi > [!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. -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. +The Clerk React Router SDK is built on top of the [React SDK](/docs/sdk/react/methods) and is the recommended method for integrating Clerk into your React Router application. ## Client-side helpers -The React Router SDK provides access to all of Clerk React's hooks which give you access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object and a set of useful helper methods for signing in and signing up. Learn more in the [React SDK reference](/docs/references/react/overview). +The React Router SDK provides access to all of Clerk React's hooks which give you access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object and a set of useful helper methods for signing in and signing up. Learn more in the [React SDK reference](/docs/sdk/react/methods). @@ -18,8 +18,8 @@ The React Router SDK provides access to all of Clerk React's hooks which give yo The following references show how to integrate Clerk features into applications using React Router server functions and API routes. -- [`getAuth()`](/docs/references/react-router/get-auth) -- [`rootAuthLoader()`](/docs/references/react-router/root-auth-loader) +- [`getAuth()`](/docs/sdk/react-router/get-auth) +- [`rootAuthLoader()`](/docs/sdk/react-router/root-auth-loader) ### `Auth` object @@ -29,5 +29,5 @@ The `getAuth()` method returns an `Auth` object. This JavaScript object contains React Router can be integrated with Clerk in two ways: -- As a framework (recommended): Configure your app using [Clerk's React Router SDK](/docs/quickstarts/react-router) -- As a library: Manually integrate React Router into your React + Vite app using [library mode](/docs/references/react-router/library-mode) +- As a framework (recommended): Configure your app using [Clerk's React Router SDK](/docs/sdk/react-router/quickstart) +- As a library: Manually integrate React Router into your React + Vite app using [library mode](/docs/sdk/react-router/library-mode) diff --git a/docs/quickstarts/react-router.mdx b/docs/sdk/react-router/quickstart.mdx similarity index 95% rename from docs/quickstarts/react-router.mdx rename to docs/sdk/react-router/quickstart.mdx index 7536264e2e..12e3e08b34 100644 --- a/docs/quickstarts/react-router.mdx +++ b/docs/sdk/react-router/quickstart.mdx @@ -31,7 +31,7 @@ description: Learn how to use Clerk to quickly and easily add secure authenticat - Add `` and Clerk components -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). +Clerk's [React Router SDK](/docs/sdk/react-router/methods) 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. @@ -80,7 +80,7 @@ Clerk's [React Router SDK](/docs/references/react-router/overview) provides preb The following code shows how to add this function to your `root.tsx` file. If you're using [Clerk's React Router quickstart](https://github.com/clerk/clerk-react-router-quickstart) or the [React Router template](https://reactrouter.com/start/framework/installation), most of this code will already be present. - To load additional data or configure options, see the [`rootAuthLoader()`](/docs/references/react-router/root-auth-loader) reference. + To load additional data or configure options, see the [`rootAuthLoader()`](/docs/sdk/react-router/root-auth-loader) reference. ```tsx {{ filename: 'app/root.tsx', mark: [1, [6, 8]], collapsible: true }} import { rootAuthLoader } from '@clerk/react-router/ssr.server' diff --git a/docs/references/react-router/read-session-data.mdx b/docs/sdk/react-router/read-session-data.mdx similarity index 67% rename from docs/references/react-router/read-session-data.mdx rename to docs/sdk/react-router/read-session-data.mdx index 23398a1e38..844605502a 100644 --- a/docs/references/react-router/read-session-data.mdx +++ b/docs/sdk/react-router/read-session-data.mdx @@ -7,7 +7,7 @@ Clerk provides a set of [hooks and helpers](/docs/references/react-router/overvi ## Server-side -To access active session and user data on the server-side, use the `getAuth()` helper. See the [reference documentation](/docs/references/react-router/get-auth) for more information, including code examples. +To access active session and user data on the server-side, use the `getAuth()` helper. See the [reference documentation](/docs/sdk/react-router/get-auth) for more information, including code examples. ## Client-side @@ -15,7 +15,7 @@ To access active session and user data on the client-side, use Clerk's `useAuth( ### `useAuth()` -The [`useAuth()`](/docs/references/react/use-auth){{ target: '_blank' }} hook provides information about the current auth state, as well as helper methods to manage the current active session. The hook returns `userId`, which can be used to protect your routes, as shown in the following example: +The [`useAuth()`](/docs/sdk/react/use-auth){{ target: '_blank' }} hook provides information about the current auth state, as well as helper methods to manage the current active session. The hook returns `userId`, which can be used to protect your routes, as shown in the following example: ```tsx {{ filename: 'app/routes/use-auth.tsx' }} import { useAuth } from '@clerk/react-router' @@ -35,7 +35,7 @@ export default function UseAuthPage() { ### `useUser()` -The [`useUser()`](/docs/references/react/use-user){{ target: '_blank' }} hook provides the current user's [`User`](/docs/references/javascript/user/user){{ target: '_blank' }} object, which holds all of the information for a user of your application and provides a set of methods to manage their account. +The [`useUser()`](/docs/sdk/react/use-user){{ target: '_blank' }} hook provides the current user's [`User`](/docs/references/javascript/user/user){{ target: '_blank' }} object, which holds all of the information for a user of your application and provides a set of methods to manage their account. ```tsx {{ filename: 'app/routes/use-user.tsx' }} import { useUser } from '@clerk/react-router' diff --git a/docs/references/react-router/root-auth-loader.mdx b/docs/sdk/react-router/root-auth-loader.mdx similarity index 100% rename from docs/references/react-router/root-auth-loader.mdx rename to docs/sdk/react-router/root-auth-loader.mdx diff --git a/docs/references/react/overview.mdx b/docs/sdk/react/methods.mdx similarity index 75% rename from docs/references/react/overview.mdx rename to docs/sdk/react/methods.mdx index c35327c780..8f55dc3231 100644 --- a/docs/references/react/overview.mdx +++ b/docs/sdk/react/methods.mdx @@ -22,12 +22,12 @@ Clerk offers framework-specific SDKs that are customized to provide the better d | Framework | Package | Docs | | - | - | - | -| Next.js | `@clerk/nextjs` | [Next.js SDK](/docs/references/nextjs/overview) | -| React Router | `@clerk/clerk-react-router` | [React Router SDK](/docs/references/react-router/overview) | -| Remix | `@clerk/remix` | [Remix SDK](/docs/references/remix/clerk-app) | -| Astro | `@clerk/astro` | [Astro SDK](/docs/references/astro/overview) | -| Tanstack Start | `@clerk/tanstack-start` | [Tanstack Start SDK](/docs/references/tanstack-start/overview) | +| Next.js | `@clerk/nextjs` | [Next.js SDK](/docs/sdk/nextjs/methods) | +| React Router | `@clerk/clerk-react-router` | [React Router SDK](/docs/sdk/react-router/methods) | +| Remix | `@clerk/remix` | [Remix SDK](/docs/sdk/remix/clerk-app) | +| Astro | `@clerk/astro` | [Astro SDK](/docs/sdk/astro/methods) | +| Tanstack Start | `@clerk/tanstack-start` | [Tanstack Start SDK](/docs/sdk/tanstack-start/methods) | ## Set up Clerk React -Before you can add Clerk to your React application, you must create a Clerk app in the Clerk Dashboard. To get started, follow the [setup guide](/docs/quickstarts/setup-clerk). Then, follow the [quickstart guide](/docs/quickstarts/react) to set up the React SDK in your app. +Before you can add Clerk to your React application, you must create a Clerk app in the Clerk Dashboard. To get started, follow the [setup guide](/docs/getting-started). Then, follow the [quickstart guide](/docs/sdk/react/quickstart) to set up the React SDK in your app. diff --git a/docs/quickstarts/react.mdx b/docs/sdk/react/quickstart.mdx similarity index 95% rename from docs/quickstarts/react.mdx rename to docs/sdk/react/quickstart.mdx index c904071c13..6364d89df8 100644 --- a/docs/quickstarts/react.mdx +++ b/docs/sdk/react/quickstart.mdx @@ -57,7 +57,7 @@ description: Add authentication and user management to your React app with Clerk ## Install `@clerk/clerk-react` - Clerk's [React SDK](/docs/references/react/overview) gives you access to prebuilt components, hooks, and helpers to make user authentication easier. + Clerk's [React SDK](/docs/sdk/react/methods) gives you access to prebuilt components, hooks, and helpers to make user authentication easier. Run the following command to install the SDK: @@ -197,8 +197,8 @@ description: Add authentication and user management to your React app with Clerk React Router can be integrated with Clerk in two ways: -- As a framework: Use Clerk's built-in [React Router integration](/docs/quickstarts/react-router) -- As a library: Manually integrate React Router into your Clerk application using [library mode](/docs/references/react-router/library-mode) +- As a framework: Use Clerk's built-in [React Router integration](/docs/sdk/react-router/quickstart) +- As a library: Manually integrate React Router into your Clerk application using [library mode](/docs/sdk/react-router/library-mode) ## More resources @@ -215,6 +215,6 @@ Learn more about Clerk components, how to customize them, and how to use Clerk's --- - - [Client-side helpers (hooks)](/docs/references/react/use-user) + - [Client-side helpers (hooks)](/docs/sdk/react/use-user) - Learn more about Clerk's client-side helpers and how to use them. diff --git a/docs/references/react/use-auth.mdx b/docs/sdk/react/use-auth.mdx similarity index 88% rename from docs/references/react/use-auth.mdx rename to docs/sdk/react/use-auth.mdx index f63c648a5f..e8cc203c23 100644 --- a/docs/references/react/use-auth.mdx +++ b/docs/sdk/react/use-auth.mdx @@ -78,7 +78,7 @@ The `useAuth()` hook provides access to the current user's authentication state ## How to use the `useAuth()` hook > [!NOTE] -> For Next.js applications, it's recommended to use the [`auth()`](/docs/references/nextjs/auth) helper instead of `useAuth()`. Since `auth()` must be used in Server Components, you'll need to pass auth data to Client Components as needed. If you prefer `useAuth()`, you must pass the `dynamic` prop to ``, but be aware this switches the app to dynamic rendering. Learn more [here](/docs/references/nextjs/rendering-modes). +> For Next.js applications, it's recommended to use the [`auth()`](/docs/sdk/nextjs/auth) helper instead of `useAuth()`. Since `auth()` must be used in Server Components, you'll need to pass auth data to Client Components as needed. If you prefer `useAuth()`, you must pass the `dynamic` prop to ``, but be aware this switches the app to dynamic rendering. Learn more [here](/docs/sdk/nextjs/rendering-modes). The following example demonstrates how to use the `useAuth()` hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the `getToken()` method to retrieve a session token for fetching data from an external resource. diff --git a/docs/references/react/use-clerk.mdx b/docs/sdk/react/use-clerk.mdx similarity index 100% rename from docs/references/react/use-clerk.mdx rename to docs/sdk/react/use-clerk.mdx diff --git a/docs/references/react/use-organization-list.mdx b/docs/sdk/react/use-organization-list.mdx similarity index 100% rename from docs/references/react/use-organization-list.mdx rename to docs/sdk/react/use-organization-list.mdx diff --git a/docs/references/react/use-organization.mdx b/docs/sdk/react/use-organization.mdx similarity index 100% rename from docs/references/react/use-organization.mdx rename to docs/sdk/react/use-organization.mdx diff --git a/docs/references/react/use-reverification.mdx b/docs/sdk/react/use-reverification.mdx similarity index 100% rename from docs/references/react/use-reverification.mdx rename to docs/sdk/react/use-reverification.mdx diff --git a/docs/references/react/use-session-list.mdx b/docs/sdk/react/use-session-list.mdx similarity index 100% rename from docs/references/react/use-session-list.mdx rename to docs/sdk/react/use-session-list.mdx diff --git a/docs/references/react/use-session.mdx b/docs/sdk/react/use-session.mdx similarity index 100% rename from docs/references/react/use-session.mdx rename to docs/sdk/react/use-session.mdx diff --git a/docs/references/react/use-sign-in.mdx b/docs/sdk/react/use-sign-in.mdx similarity index 100% rename from docs/references/react/use-sign-in.mdx rename to docs/sdk/react/use-sign-in.mdx diff --git a/docs/references/react/use-sign-up.mdx b/docs/sdk/react/use-sign-up.mdx similarity index 100% rename from docs/references/react/use-sign-up.mdx rename to docs/sdk/react/use-sign-up.mdx diff --git a/docs/references/react/use-user.mdx b/docs/sdk/react/use-user.mdx similarity index 100% rename from docs/references/react/use-user.mdx rename to docs/sdk/react/use-user.mdx diff --git a/docs/references/redwood/overview.mdx b/docs/sdk/redwood/quickstart.mdx similarity index 100% rename from docs/references/redwood/overview.mdx rename to docs/sdk/redwood/quickstart.mdx diff --git a/docs/references/remix/clerk-app.mdx b/docs/sdk/remix/clerk-app.mdx similarity index 100% rename from docs/references/remix/clerk-app.mdx rename to docs/sdk/remix/clerk-app.mdx diff --git a/docs/references/remix/custom-signup-signin-pages.mdx b/docs/sdk/remix/custom-signup-signin-pages.mdx similarity index 96% rename from docs/references/remix/custom-signup-signin-pages.mdx rename to docs/sdk/remix/custom-signup-signin-pages.mdx index 3157c9702e..adb5e1e8f3 100644 --- a/docs/references/remix/custom-signup-signin-pages.mdx +++ b/docs/sdk/remix/custom-signup-signin-pages.mdx @@ -10,7 +10,7 @@ If Clerk's prebuilt components don't meet your specific needs or if you require The functionality of the components are controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com). > [!NOTE] -> Just getting started with Clerk and Remix? See the [quickstart tutorial](/docs/quickstarts/remix)! +> Just getting started with Clerk and Remix? See the [quickstart tutorial](/docs/sdk/remix/quickstart)! ## Build your sign-up page @@ -102,6 +102,6 @@ The functionality of the components are controlled by the instance settings you ## Next steps - - [Read user and session data](/docs/references/remix/read-session-data) + - [Read user and session data](/docs/sdk/remix/read-session-data) - Learn how to use Clerk's hooks and helpers to access the active session and user data in your Remix application. diff --git a/docs/quickstarts/remix.mdx b/docs/sdk/remix/quickstart.mdx similarity index 94% rename from docs/quickstarts/remix.mdx rename to docs/sdk/remix/quickstart.mdx index 7b7909a905..4b29a716af 100644 --- a/docs/quickstarts/remix.mdx +++ b/docs/sdk/remix/quickstart.mdx @@ -35,7 +35,7 @@ description: Learn how to use Clerk to quickly and easily add secure authenticat Learn how to use Clerk to quickly and easily add secure authentication and user management to your Remix app. This guide assumes that you are using Remix v2 or later. > [!NOTE] -> If you are using Remix SPA mode, follow the [Remix SPA mode guide](/docs/references/remix/spa-mode). +> If you are using Remix SPA mode, follow the [Remix SPA mode guide](/docs/sdk/remix/spa-mode). ## Install `@clerk/remix` @@ -230,7 +230,7 @@ Learn how to use Clerk to quickly and easily add secure authentication and user ### Server-side - To protect your routes, use the [`getAuth()`](/docs/references/nextjs/get-auth) function in your loader. This function retrieves the authentication state from the request object, returning an `Auth` object that includes the `userId`, allowing you to determine if the user is authenticated. + To protect your routes, use the [`getAuth()`](/docs/sdk/nextjs/get-auth) function in your loader. This function retrieves the authentication state from the request object, returning an `Auth` object that includes the `userId`, allowing you to determine if the user is authenticated. ```tsx {{ filename: 'routes/_index.tsx' }} import { UserButton } from '@clerk/remix' @@ -280,12 +280,12 @@ Learn how to use Clerk to quickly and easily add secure authentication and user ## Next steps - - [Create custom sign-up and sign-in pages](/docs/references/remix/custom-signup-signin-pages) + - [Create custom sign-up and sign-in pages](/docs/sdk/remix/custom-signup-signin-pages) - Learn how add custom sign-up and sign-in pages with Clerk components. --- - - [Read user and session data](/docs/references/remix/read-session-data) + - [Read user and session data](/docs/sdk/remix/read-session-data) - Learn how to use Clerk's hooks and helpers to access the active session and user data in your Remix app. --- diff --git a/docs/references/remix/read-session-data.mdx b/docs/sdk/remix/read-session-data.mdx similarity index 79% rename from docs/references/remix/read-session-data.mdx rename to docs/sdk/remix/read-session-data.mdx index a65cf9403a..43fd0533fd 100644 --- a/docs/references/remix/read-session-data.mdx +++ b/docs/sdk/remix/read-session-data.mdx @@ -9,7 +9,7 @@ Clerk provides a set of [hooks and helpers](/docs/references/nextjs/overview#cli ### `getAuth()` -The [`getAuth()`](/docs/references/nextjs/get-auth){{ target: '_blank' }} helper allows you to access the [`Auth` object](/docs/references/backend/types/auth-object){{ target: '_blank' }}, which includes the current user's `userId`. You can use the `userId` to protect your routes or get the user's data. +The [`getAuth()`](/docs/sdk/nextjs/get-auth){{ target: '_blank' }} helper allows you to access the [`Auth` object](/docs/references/backend/types/auth-object){{ target: '_blank' }}, which includes the current user's `userId`. You can use the `userId` to protect your routes or get the user's data. In the following example, the `userId` is passed to the Backend SDK's [`getUser()`](/docs/references/backend/user/get-user){{ target: '_blank' }} method to get the user's full `User` object. For information on how to use the Backend SDK, see the [Backend SDK documentation](/docs/references/backend/overview){{ target: '_blank' }}. @@ -71,7 +71,7 @@ In the following example, the `userId` is passed to the Backend SDK's [`getUser( ### `useAuth()` -The [`useAuth()`](/docs/references/react/use-auth){{ target: '_blank' }} hook provides information about the current auth state, as well as helper methods to manage the current active session. The hook returns `userId`, which can be used to protect your routes. +The [`useAuth()`](/docs/sdk/react/use-auth){{ target: '_blank' }} hook provides information about the current auth state, as well as helper methods to manage the current active session. The hook returns `userId`, which can be used to protect your routes. ```tsx {{ filename: 'routes/example.tsx' }} import { useAuth } from '@clerk/remix' @@ -94,7 +94,7 @@ export default function Example() { ### `useUser()` -The [`useUser()`](/docs/references/react/use-user){{ target: '_blank' }} hook provides the current user's [`User`](/docs/references/javascript/user/user){{ target: '_blank' }} object, which holds all of the information for a user of your application and provides a set of methods to manage their account. +The [`useUser()`](/docs/sdk/react/use-user){{ target: '_blank' }} hook provides the current user's [`User`](/docs/references/javascript/user/user){{ target: '_blank' }} object, which holds all of the information for a user of your application and provides a set of methods to manage their account. ```tsx {{ filename: 'routes/example.tsx' }} import { useUser } from '@clerk/remix' diff --git a/docs/references/remix/spa-mode.mdx b/docs/sdk/remix/spa-mode.mdx similarity index 99% rename from docs/references/remix/spa-mode.mdx rename to docs/sdk/remix/spa-mode.mdx index c0c6de3a04..4757b6f462 100644 --- a/docs/references/remix/spa-mode.mdx +++ b/docs/sdk/remix/spa-mode.mdx @@ -22,7 +22,7 @@ description: Clerk supports Remix SPA mode out-of-the-box. > [!NOTE] > This guide explains how to use Clerk with [Remix in SPA mode](https://remix.run/docs/en/main/guides/spa-mode). -> If you are using Remix with SSR, follow the [Remix quickstart](/docs/quickstarts/remix). +> If you are using Remix with SSR, follow the [Remix quickstart](/docs/sdk/remix/quickstart). ## Install `@clerk/remix` diff --git a/docs/references/ruby/available-methods.mdx b/docs/sdk/ruby/methods.mdx similarity index 100% rename from docs/references/ruby/available-methods.mdx rename to docs/sdk/ruby/methods.mdx diff --git a/docs/references/ruby/overview.mdx b/docs/sdk/ruby/quickstart.mdx similarity index 98% rename from docs/references/ruby/overview.mdx rename to docs/sdk/ruby/quickstart.mdx index fb9b3491f7..8f757fe5c5 100644 --- a/docs/references/ruby/overview.mdx +++ b/docs/sdk/ruby/quickstart.mdx @@ -6,7 +6,7 @@ description: Learn how to integrate Ruby into your Clerk application. ## Create a Clerk application - You need to create a Clerk application in the Clerk Dashboard before you can set up Clerk Ruby. For more information, see the [setup guide](/docs/quickstarts/setup-clerk). + You need to create a Clerk application in the Clerk Dashboard before you can set up Clerk Ruby. For more information, see the [setup guide](/docs/getting-started). ## Install Ruby diff --git a/docs/references/ruby/rack-rails.mdx b/docs/sdk/ruby/rack-rails.mdx similarity index 100% rename from docs/references/ruby/rack-rails.mdx rename to docs/sdk/ruby/rack-rails.mdx diff --git a/docs/references/tanstack-start/create-clerk-handler.mdx b/docs/sdk/tanstack-start/create-clerk-handler.mdx similarity index 100% rename from docs/references/tanstack-start/create-clerk-handler.mdx rename to docs/sdk/tanstack-start/create-clerk-handler.mdx diff --git a/docs/references/tanstack-start/custom-signup-signin-pages.mdx b/docs/sdk/tanstack-start/custom-signup-signin-pages.mdx similarity index 95% rename from docs/references/tanstack-start/custom-signup-signin-pages.mdx rename to docs/sdk/tanstack-start/custom-signup-signin-pages.mdx index 3abd5ac433..d67fbcf549 100644 --- a/docs/references/tanstack-start/custom-signup-signin-pages.mdx +++ b/docs/sdk/tanstack-start/custom-signup-signin-pages.mdx @@ -8,7 +8,7 @@ This guide shows you how to use the [``](/docs/components/authenticati 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, see the [custom flow guides](/docs/custom-flows/overview). > [!NOTE] -> Just getting started with Clerk and TanStack Start? See the [quickstart tutorial](/docs/quickstarts/tanstack-start)! +> Just getting started with Clerk and TanStack Start? See the [quickstart tutorial](/docs/sdk/tanstack-start/quickstart)! ## Build a sign-up page @@ -80,6 +80,6 @@ If Clerk's prebuilt components don't meet your specific needs or if you require ## Next steps - - [Read user and session data](/docs/references/tanstack-start/read-session-data) + - [Read user and session data](/docs/sdk/tanstack-start/read-session-data) - Learn how to use Clerk's hooks and helpers to access the active session and user data in your TanStack Start application. diff --git a/docs/references/tanstack-start/get-auth.mdx b/docs/sdk/tanstack-start/get-auth.mdx similarity index 100% rename from docs/references/tanstack-start/get-auth.mdx rename to docs/sdk/tanstack-start/get-auth.mdx diff --git a/docs/references/tanstack-start/overview.mdx b/docs/sdk/tanstack-start/methods.mdx similarity index 68% rename from docs/references/tanstack-start/overview.mdx rename to docs/sdk/tanstack-start/methods.mdx index f112908324..73bfdba127 100644 --- a/docs/references/tanstack-start/overview.mdx +++ b/docs/sdk/tanstack-start/methods.mdx @@ -3,16 +3,16 @@ title: Clerk TanStack Start SDK description: Learn how to integrate Clerk into your TanStack Start application using the Clerk TanStack Start SDK. --- -The Clerk TanStack Start SDK is built on top of the [React SDK](/docs/references/react/overview) and is the recommended method for integrating Clerk into your TanStack Start application. +The Clerk TanStack Start SDK is built on top of the [React SDK](/docs/sdk/react/methods) and is the recommended method for integrating Clerk into your TanStack Start application. ## Guides -- [Read session and user data](/docs/references/tanstack-start/read-session-data) -- [Add custom sign up and sign in pages](/docs/references/tanstack-start/custom-signup-signin-pages) +- [Read session and user data](/docs/sdk/tanstack-start/read-session-data) +- [Add custom sign up and sign in pages](/docs/sdk/tanstack-start/custom-signup-signin-pages) ## Client-side helpers -The TanStack Start SDK is a wrapper around Clerk React, so you can use the hooks that Clerk React provides. These hooks give you access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object, and a set of useful helper methods for signing in and signing up. Learn more in the [React SDK reference](/docs/references/react/overview). +The TanStack Start SDK is a wrapper around Clerk React, so you can use the hooks that Clerk React provides. These hooks give you access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object, and a set of useful helper methods for signing in and signing up. Learn more in the [React SDK reference](/docs/sdk/react/methods). @@ -20,7 +20,7 @@ The TanStack Start SDK is a wrapper around Clerk React, so you can use the hooks The following references show how to integrate Clerk features into applications using TanStack Start server functions and API routes. -- [`getAuth()`](/docs/references/tanstack-start/get-auth) +- [`getAuth()`](/docs/sdk/tanstack-start/get-auth) ### `Auth` object diff --git a/docs/quickstarts/tanstack-start.mdx b/docs/sdk/tanstack-start/quickstart.mdx similarity index 86% rename from docs/quickstarts/tanstack-start.mdx rename to docs/sdk/tanstack-start/quickstart.mdx index 0490284dca..864638bb09 100644 --- a/docs/quickstarts/tanstack-start.mdx +++ b/docs/sdk/tanstack-start/quickstart.mdx @@ -33,7 +33,7 @@ description: Learn how to use Clerk to quickly and easily add secure authenticat ## Install `@clerk/tanstack-start` - Clerk's [TanStack Start SDK](/docs/references/tanstack-start/overview) gives you access to prebuilt components, React hooks, and helpers to make user authentication easier. + Clerk's [TanStack Start SDK](/docs/sdk/tanstack-start/methods) gives you access to prebuilt components, React hooks, and helpers to make user authentication easier. Run the following command to install the SDK: @@ -74,7 +74,7 @@ description: Learn how to use Clerk to quickly and easily add secure authenticat TanStack's [`createStartHandler()`](https://tanstack.com/router/latest/docs/framework/react/start/getting-started#the-server-entry-point) creates a server-side handler that determines which routes and loaders need to be executed when the user hits a given route. - Clerk's [`createClerkHandler()`](/docs/references/tanstack-start/create-clerk-handler) configures Clerk to handle authentication state for TanStack routes, allowing you to easily access user session information within your app. + Clerk's [`createClerkHandler()`](/docs/sdk/tanstack-start/create-clerk-handler) configures Clerk to handle authentication state for TanStack routes, allowing you to easily access user session information within your app. Update your app's SSR entrypoint by wrapping `createStartHandler()` in `createClerkHandler()`, as shown in the following example: @@ -179,7 +179,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 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. + 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/sdk/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. @@ -243,12 +243,12 @@ description: Learn how to use Clerk to quickly and easily add secure authenticat ## Next steps - - [Create custom sign-up and sign-in pages](/docs/references/tanstack-start/custom-signup-signin-pages) + - [Create custom sign-up and sign-in pages](/docs/sdk/tanstack-start/custom-signup-signin-pages) - Learn how add custom sign-up and sign-in pages with Clerk components. --- - - [Read user and session data](/docs/references/tanstack-start/read-session-data) + - [Read user and session data](/docs/sdk/tanstack-start/read-session-data) - Learn how to use Clerk's hooks and helpers to access the active session and user data in your TanStack Start app. --- diff --git a/docs/references/tanstack-start/read-session-data.mdx b/docs/sdk/tanstack-start/read-session-data.mdx similarity index 70% rename from docs/references/tanstack-start/read-session-data.mdx rename to docs/sdk/tanstack-start/read-session-data.mdx index 689fd176ea..655e154cff 100644 --- a/docs/references/tanstack-start/read-session-data.mdx +++ b/docs/sdk/tanstack-start/read-session-data.mdx @@ -7,7 +7,7 @@ Clerk provides a set of [hooks and helpers](/docs/references/tanstack-start/over ## Server-side -To access active session and user data on the server-side, use the `getAuth()` helper. See the [reference documentation](/docs/references/tanstack-start/get-auth) for more information, including code examples. +To access active session and user data on the server-side, use the `getAuth()` helper. See the [reference documentation](/docs/sdk/tanstack-start/get-auth) for more information, including code examples. ## Client-side @@ -15,7 +15,7 @@ To access active session and user data on the client-side, use Clerk's `useAuth( ### `useAuth()` -The [`useAuth()`](/docs/references/react/use-auth){{ target: '_blank' }} hook provides information about the current auth state, as well as helper methods to manage the current active session. The hook returns `userId`, which can be used to protect your routes, as shown in the following example: +The [`useAuth()`](/docs/sdk/react/use-auth){{ target: '_blank' }} hook provides information about the current auth state, as well as helper methods to manage the current active session. The hook returns `userId`, which can be used to protect your routes, as shown in the following example: ```tsx {{ filename: 'routes/example.tsx' }} import { useAuth } from '@clerk/tanstack-start' @@ -43,7 +43,7 @@ function Example() { ### `useUser()` -The [`useUser()`](/docs/references/react/use-user){{ target: '_blank' }} hook provides the current user's [`User`](/docs/references/javascript/user/user){{ target: '_blank' }} object, which holds all of the information for a user of your application and provides a set of methods to manage their account. +The [`useUser()`](/docs/sdk/react/use-user){{ target: '_blank' }} hook provides the current user's [`User`](/docs/references/javascript/user/user){{ target: '_blank' }} object, which holds all of the information for a user of your application and provides a set of methods to manage their account. ```tsx {{ filename: 'routes/example.tsx' }} import { useUser } from '@clerk/tanstack-start' diff --git a/docs/references/vue/overview.mdx b/docs/sdk/vue/methods.mdx similarity index 85% rename from docs/references/vue/overview.mdx rename to docs/sdk/vue/methods.mdx index 4f6ff740aa..54eebb3788 100644 --- a/docs/references/vue/overview.mdx +++ b/docs/sdk/vue/methods.mdx @@ -20,8 +20,8 @@ Clerk offers framework-specific SDKs that are customized to provide the better d | Framework | Package | Docs | | - | - | - | -| Nuxt | `@clerk/nuxt` | [Nuxt SDK](/docs/references/nuxt/overview) | +| Nuxt | `@clerk/nuxt` | [Nuxt SDK](/docs/sdk/nuxt/methods) | ## Set up Clerk Vue -Before you can add Clerk to your Vue application, you must create a Clerk app in the Clerk Dashboard. To get started, follow the [setup guide](/docs/quickstarts/setup-clerk). Then, follow the [quickstart guide](/docs/quickstarts/vue) to set up the Vue SDK in your app. +Before you can add Clerk to your Vue application, you must create a Clerk app in the Clerk Dashboard. To get started, follow the [setup guide](/docs/getting-started). Then, follow the [quickstart guide](/docs/sdk/vue/quickstart) to set up the Vue SDK in your app. diff --git a/docs/references/vue/migrating-from-vue-community-sdk.mdx b/docs/sdk/vue/migrating-from-vue-community-sdk.mdx similarity index 100% rename from docs/references/vue/migrating-from-vue-community-sdk.mdx rename to docs/sdk/vue/migrating-from-vue-community-sdk.mdx diff --git a/docs/quickstarts/vue.mdx b/docs/sdk/vue/quickstart.mdx similarity index 92% rename from docs/quickstarts/vue.mdx rename to docs/sdk/vue/quickstart.mdx index f80dbe23cb..fc7521fc51 100644 --- a/docs/quickstarts/vue.mdx +++ b/docs/sdk/vue/quickstart.mdx @@ -27,7 +27,7 @@ description: Add authentication and user management to your Vue app with Clerk. - Create a header with Clerk components -Clerk's [Vue SDK](/docs/references/vue/overview) provides prebuilt components and composables to make it easy to integrate authentication and user management in your Vue app. This guide assumes that you're using [Vue 3](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/). +Clerk's [Vue SDK](/docs/sdk/vue/methods) provides prebuilt components and composables to make it easy to integrate authentication and user management in your Vue app. This guide assumes that you're using [Vue 3](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/). ### Create a Vue app using Vite @@ -59,7 +59,7 @@ Clerk's [Vue SDK](/docs/references/vue/overview) provides prebuilt components an ### Install `@clerk/vue` - Clerk's [Vue SDK](/docs/references/vue/overview) gives you access to prebuilt components, composables, and helpers to make user authentication easier. + Clerk's [Vue SDK](/docs/sdk/vue/methods) gives you access to prebuilt components, composables, and helpers to make user authentication easier. Run the following command to install the SDK: diff --git a/docs/references/vue/use-auth.mdx b/docs/sdk/vue/use-auth.mdx similarity index 100% rename from docs/references/vue/use-auth.mdx rename to docs/sdk/vue/use-auth.mdx diff --git a/docs/references/vue/use-clerk.mdx b/docs/sdk/vue/use-clerk.mdx similarity index 100% rename from docs/references/vue/use-clerk.mdx rename to docs/sdk/vue/use-clerk.mdx diff --git a/docs/references/vue/use-organization.mdx b/docs/sdk/vue/use-organization.mdx similarity index 100% rename from docs/references/vue/use-organization.mdx rename to docs/sdk/vue/use-organization.mdx diff --git a/docs/references/vue/use-session-list.mdx b/docs/sdk/vue/use-session-list.mdx similarity index 100% rename from docs/references/vue/use-session-list.mdx rename to docs/sdk/vue/use-session-list.mdx diff --git a/docs/references/vue/use-session.mdx b/docs/sdk/vue/use-session.mdx similarity index 100% rename from docs/references/vue/use-session.mdx rename to docs/sdk/vue/use-session.mdx diff --git a/docs/references/vue/use-sign-in.mdx b/docs/sdk/vue/use-sign-in.mdx similarity index 100% rename from docs/references/vue/use-sign-in.mdx rename to docs/sdk/vue/use-sign-in.mdx diff --git a/docs/references/vue/use-sign-up.mdx b/docs/sdk/vue/use-sign-up.mdx similarity index 100% rename from docs/references/vue/use-sign-up.mdx rename to docs/sdk/vue/use-sign-up.mdx diff --git a/docs/references/vue/use-user.mdx b/docs/sdk/vue/use-user.mdx similarity index 100% rename from docs/references/vue/use-user.mdx rename to docs/sdk/vue/use-user.mdx diff --git a/docs/troubleshooting/create-a-minimal-reproduction.mdx b/docs/troubleshooting/create-a-minimal-reproduction.mdx index 7018ee20f3..afc6e8bad9 100644 --- a/docs/troubleshooting/create-a-minimal-reproduction.mdx +++ b/docs/troubleshooting/create-a-minimal-reproduction.mdx @@ -38,11 +38,11 @@ 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 the [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/getting-started) to help you get started. ### Set the environment variables - Set the environment variables in your Clerk application. You can find instructions on how to do so in the appropriate [quickstart guide](/docs/quickstarts/overview). + Set the environment variables in your Clerk application. You can find instructions on how to do so in the appropriate [quickstart guide](/docs/quickstarts). ### Run the app diff --git a/docs/troubleshooting/overview.mdx b/docs/troubleshooting/overview.mdx index 291ed6b8db..e12de87f6b 100644 --- a/docs/troubleshooting/overview.mdx +++ b/docs/troubleshooting/overview.mdx @@ -7,7 +7,7 @@ We hope that our documentation is thorough and transparent enough that you won't Refer to the [Backend API](/docs/reference/backend-api){{ target: '_blank' }} and [Frontend API](/docs/reference/frontend-api){{ target: '_blank' }} reference docs for questions about object structures, requests, and responses. -Are you looking for a place to get started? See the [quickstarts](/docs/quickstarts/overview). +Are you looking for a place to get started? See the [quickstarts](/docs/quickstarts). ## Discord community diff --git a/docs/upgrade-guides/core-2/nextjs.mdx b/docs/upgrade-guides/core-2/nextjs.mdx index f666a62f43..ce8ea8d6b9 100644 --- a/docs/upgrade-guides/core-2/nextjs.mdx +++ b/docs/upgrade-guides/core-2/nextjs.mdx @@ -96,7 +96,7 @@ The new version ships with improved design and UX across all of Clerk's [UI comp ### New Middleware architecture -User and customer feedback about `authMiddleware()` has been clear in that Middleware logic was a often friction point. As such, in v5 you will find a completely new Middleware helper called [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware) that should alleviate the issues folks had with `authMiddleware()`. +User and customer feedback about `authMiddleware()` has been clear in that Middleware logic was a often friction point. As such, in v5 you will find a completely new Middleware helper called [`clerkMiddleware()`](/docs/sdk/nextjs/clerk-middleware) that should alleviate the issues folks had with `authMiddleware()`. The primary change from the previous `authMiddleware()` is that `clerkMiddleware()` does not protect any routes by default, instead requiring the developer to add routes they would like to be protected by auth. This is a substantial contrast to the previous `authMiddleware()`, which protected all routes by default, requiring the developer to add exceptions. The API was also substantially simplified, and it has become easier to combine with other Middleware helpers smoothly as well. @@ -132,7 +132,7 @@ A couple things to note here: - With `clerkMiddleware`, you're defining the routes you want **to be protected**, rather than the routes you don't want to be protected. - The `auth.protect()` helper is used extensively here. See its [reference doc](/docs/references/nextjs/auth#protect) for more info. -See the [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware) docs for more information and detailed usage examples. +See the [`clerkMiddleware()`](/docs/sdk/nextjs/clerk-middleware) docs for more information and detailed usage examples. #### Migrating to `clerkMiddleware()` @@ -158,7 +158,7 @@ export const config = { } ``` -Of course, in most cases you'll have a more complicated setup than this. You can find some examples below for how to migrate a few common use cases. Be sure to review the [`clerkMiddleware()` documentation](/docs/references/nextjs/clerk-middleware) if your specific use case is not mentioned. +Of course, in most cases you'll have a more complicated setup than this. You can find some examples below for how to migrate a few common use cases. Be sure to review the [`clerkMiddleware()` documentation](/docs/sdk/nextjs/clerk-middleware) if your specific use case is not mentioned. If you are using the `@clerk/nextjs/app-beta` import anywhere, it should use `@clerk/nextjs` instead. The `app-beta` import has been removed as our App Router support is stable. - Make this change carefully as some behavior may have changed between our beta and stable releases. You can refer to [our documentation](/docs/quickstarts/nextjs) and/or [approuter example](https://github.com/clerk/clerk-nextjs-app-quickstart) for up-to-date usage. + Make this change carefully as some behavior may have changed between our beta and stable releases. You can refer to [our documentation](/docs/sdk/nextjs/quickstart) and/or [approuter example](https://github.com/clerk/clerk-nextjs-app-quickstart) for up-to-date usage. The `@clerk/nextjs` import will work with both App Router and Pages Router. @@ -1111,7 +1111,7 @@ As part of this major version, a number of previously deprecated props, argument - The `WithSession` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/references/react/overview). An example of how to do so is below: + The `WithSession` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/sdk/react/methods). An example of how to do so is below: ```js export const WithSession = ({ children }) => { @@ -1124,7 +1124,7 @@ As part of this major version, a number of previously deprecated props, argument - The `WithClerk` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/references/react/overview). An example of how to do so is below: + The `WithClerk` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/sdk/react/methods). An example of how to do so is below: ```js export const WithClerk = ({ children }) => { @@ -1137,7 +1137,7 @@ As part of this major version, a number of previously deprecated props, argument - The `WithUser` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/references/react/overview). An example of how to do so is below: + The `WithUser` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/sdk/react/methods). An example of how to do so is below: ```js export const WithUser = ({ children }) => { @@ -1150,7 +1150,7 @@ As part of this major version, a number of previously deprecated props, argument - The `withClerk` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/references/react/overview). An example of how to do so is below: + The `withClerk` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/sdk/react/methods). An example of how to do so is below: ```js function withClerk(Component, displayName) { @@ -1171,7 +1171,7 @@ As part of this major version, a number of previously deprecated props, argument - The `withSession` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/references/react/overview). An example of how to do so is below: + The `withSession` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/sdk/react/methods). An example of how to do so is below: ```js function withSession(Component, displayName) { @@ -1192,7 +1192,7 @@ As part of this major version, a number of previously deprecated props, argument - The `withUser` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/references/react/overview). An example of how to do so is below: + The `withUser` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/sdk/react/methods). An example of how to do so is below: ```js function withUser(Component, displayName) { diff --git a/docs/upgrade-guides/core-2/react.mdx b/docs/upgrade-guides/core-2/react.mdx index 7ae6d2ed9d..e360df5cea 100644 --- a/docs/upgrade-guides/core-2/react.mdx +++ b/docs/upgrade-guides/core-2/react.mdx @@ -607,7 +607,7 @@ As part of this major version, a number of previously deprecated props, argument - Any place where `useOrganizations` is used should be switched to [`useOrganizationList`](/docs/references/react/use-organization-list) or [`useOrganization`](/docs/references/react/use-organization) instead. The return signature has also changed, so take note of this when making the upgrade. + Any place where `useOrganizations` is used should be switched to [`useOrganizationList`](/docs/sdk/react/use-organization-list) or [`useOrganization`](/docs/sdk/react/use-organization) instead. The return signature has also changed, so take note of this when making the upgrade. ```js {{ prettier: false }} // before: useOrganizations return values @@ -640,7 +640,7 @@ As part of this major version, a number of previously deprecated props, argument - The `WithSession` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/references/react/overview). An example of how to do so is below: + The `WithSession` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/sdk/react/methods). An example of how to do so is below: ```js export const WithSession = ({ children }) => { @@ -653,7 +653,7 @@ As part of this major version, a number of previously deprecated props, argument - The `WithClerk` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/references/react/overview). An example of how to do so is below: + The `WithClerk` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/sdk/react/methods). An example of how to do so is below: ```js export const WithClerk = ({ children }) => { @@ -666,7 +666,7 @@ As part of this major version, a number of previously deprecated props, argument - The `WithUser` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/references/react/overview). An example of how to do so is below: + The `WithUser` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/sdk/react/methods). An example of how to do so is below: ```js export const WithUser = ({ children }) => { @@ -679,7 +679,7 @@ As part of this major version, a number of previously deprecated props, argument - The `withClerk` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/references/react/overview). An example of how to do so is below: + The `withClerk` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/sdk/react/methods). An example of how to do so is below: ```js function withClerk(Component, displayName) { @@ -700,7 +700,7 @@ As part of this major version, a number of previously deprecated props, argument - The `withSession` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/references/react/overview). An example of how to do so is below: + The `withSession` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/sdk/react/methods). An example of how to do so is below: ```js function withSession(Component, displayName) { @@ -721,7 +721,7 @@ As part of this major version, a number of previously deprecated props, argument - The `withUser` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/references/react/overview). An example of how to do so is below: + The `withUser` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](/docs/sdk/react/methods). An example of how to do so is below: ```js function withUser(Component, displayName) { diff --git a/docs/upgrade-guides/nextjs/v6.mdx b/docs/upgrade-guides/nextjs/v6.mdx index 5ce8ade59f..498bb9af95 100644 --- a/docs/upgrade-guides/nextjs/v6.mdx +++ b/docs/upgrade-guides/nextjs/v6.mdx @@ -110,7 +110,7 @@ export default function RootLayout({ children }) { } ``` -Note that this isn't recommended, and in most cases you should use `auth()` to access auth data at request time instead. For more information, see the guide on [Next.js rendering modes and Clerk](/docs/references/nextjs/rendering-modes). +Note that this isn't recommended, and in most cases you should use `auth()` to access auth data at request time instead. For more information, see the guide on [Next.js rendering modes and Clerk](/docs/sdk/nextjs/rendering-modes). ## Removed deprecated APIs diff --git a/docs/users/metadata.mdx b/docs/users/metadata.mdx index 211bce1488..63f02e4573 100644 --- a/docs/users/metadata.mdx +++ b/docs/users/metadata.mdx @@ -279,7 +279,7 @@ Public metadata is accessible by both the frontend and the backend, but can only There are multiple ways to retrieve public metadata. -On the frontend, it's available on the [`User`](/docs/references/javascript/user/user) object which can be accessed using the [`useUser()`](/docs/references/react/use-user) hook. +On the frontend, it's available on the [`User`](/docs/references/javascript/user/user) object which can be accessed using the [`useUser()`](/docs/sdk/react/use-user) hook. On the backend, it's available on the [Backend `User`](/docs/references/backend/types/backend-user) object which can be accessed using the JavaScript Backend SDK's [`getUser()`](/docs/references/backend/user/get-user) method. It can also be attached to a session token, and the `sessionClaims` of the session token can be retrieved on the [`Auth`](/docs/references/backend/types/auth-object) object. If you need to retrieve public metadata frequently in the backend, the best option is to attach it to the session token and retrieve it from the session token. See the [guide on customizing your session token](/docs/backend-requests/making/custom-session-token). @@ -510,6 +510,6 @@ The following examples demonstrate how to update `unsafeMetadata` using [the Bac There are multiple ways to retrieve unsafe metadata. -On the frontend, it is available on the [`User`](/docs/references/javascript/user/user) object, which you can access by using the [`useUser()`](/docs/references/react/use-user) hook. +On the frontend, it is available on the [`User`](/docs/references/javascript/user/user) object, which you can access by using the [`useUser()`](/docs/sdk/react/use-user) hook. On the backend, it's available on the [Backend `User`](/docs/references/backend/types/backend-user) object which can be accessed using the JavaScript Backend SDK's [`getUser()`](/docs/references/backend/user/get-user) method. It can also be attached to a session token, and the `sessionClaims` of the session token can be retrieved on the [`Auth`](/docs/references/backend/types/auth-object) object. If you need to retrieve unsafe metadata frequently in the backend, the best option is to attach it to the session token and retrieve it from the session token. See the [guide on customizing your session token](/docs/backend-requests/making/custom-session-token). diff --git a/docs/users/overview.mdx b/docs/users/overview.mdx index c1302f5653..4b84ac4940 100644 --- a/docs/users/overview.mdx +++ b/docs/users/overview.mdx @@ -21,7 +21,7 @@ For more information on the `User` object, such as helper methods for retrieving Clerk provides the prebuilt components [``](/docs/components/user/user-button) and [``](/docs/components/user/user-profile) in order to help your users manage their profile data. -If you are using React, the [React SDK](/docs/references/react/use-user) provides hooks to help manage user authentication and profile data. +If you are using React, the [React SDK](/docs/sdk/react/use-user) provides hooks to help manage user authentication and profile data. 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). diff --git a/docs/users/user-impersonation.mdx b/docs/users/user-impersonation.mdx index c41c9e76ea..fafbcb4405 100644 --- a/docs/users/user-impersonation.mdx +++ b/docs/users/user-impersonation.mdx @@ -79,7 +79,7 @@ To detect impersonated sessions in the frontend, the `actor` object contains the - You can use the [`useAuth()`](/docs/references/react/use-auth) hook to get access to the authentication context, which includes the `actor` object. + You can use the [`useAuth()`](/docs/sdk/react/use-auth) hook to get access to the authentication context, which includes the `actor` object. ```jsx import { useAuth } from '@clerk/nextjs/server' @@ -127,7 +127,7 @@ To detect impersonated sessions in the frontend, the `actor` object contains the - The Next.js [`auth()`](/docs/references/nextjs/auth) helper provides the `actor` object in the authentication context. + The Next.js [`auth()`](/docs/sdk/nextjs/auth) helper provides the `actor` object in the authentication context. ```jsx import { auth } from '@clerk/nextjs/server' diff --git a/docs/users/web3.mdx b/docs/users/web3.mdx index a823fee5ae..60055819f4 100644 --- a/docs/users/web3.mdx +++ b/docs/users/web3.mdx @@ -7,13 +7,13 @@ Learn how to use Clerk to quickly and easily add secure authentication and user ## Before you start -You need to create a Clerk application in the [Clerk Dashboard](https://dashboard.clerk.com/) and configure the application to use **Sign in with Metamask**, **Sign in with Coinbase Wallet** or **Sign in with OKX Wallet**. For more information on how to set up a Clerk application, see the [setup guide](/docs/quickstarts/setup-clerk). To enable Metamask, Coinbase Wallet, or OKX Wallet authentication, see the [dedicated guide](/docs/authentication/configuration/sign-up-sign-in-options#web3-authentication). +You need to create a Clerk application in the [Clerk Dashboard](https://dashboard.clerk.com/) and configure the application to use **Sign in with Metamask**, **Sign in with Coinbase Wallet** or **Sign in with OKX Wallet**. For more information on how to set up a Clerk application, see the [setup guide](/docs/getting-started). To enable Metamask, Coinbase Wallet, or OKX Wallet authentication, see the [dedicated guide](/docs/authentication/configuration/sign-up-sign-in-options#web3-authentication). Ensure that you've installed the [Metamask](https://metamask.io/download/), [Coinbase Wallet](https://www.coinbase.com/wallet/downloads), or [OKX Wallet](https://www.okx.com/help/section/faq-web3-wallet) plugins for a seamless sign-in experience. ## Creating a new Next.js app -Once you have a Clerk application set up in the dashboard, it's time to create a Next.js application. Clerk provides a detailed guide on how to [create a new Next.js app with Clerk](/docs/quickstarts/nextjs). +Once you have a Clerk application set up in the dashboard, it's time to create a Next.js application. Clerk provides a detailed guide on how to [create a new Next.js app with Clerk](/docs/sdk/nextjs/quickstart). ## Accessing the Web3 address from the frontend @@ -21,7 +21,7 @@ At this point, your Next.js application should be integrated with Clerk and conf After signing in with your Web3 provider, you'll be presented with the Next.js default start screen. Let's modify the start screen to display a user's primary Web3 address on the page. -In this example, the [`User`](/docs/references/javascript/user/user) object for the current user can be accessed through the [`useUser()`](/docs/references/react/use-user) hook. The user's primary Web3 address can then be retrieved from the `User` object. +In this example, the [`User`](/docs/references/javascript/user/user) object for the current user can be accessed through the [`useUser()`](/docs/sdk/react/use-user) hook. The user's primary Web3 address can then be retrieved from the `User` object. ```jsx {{ filename: 'pages/index.js' }} import { SignIn, SignOutButton, UserButton, useUser } from '@clerk/nextjs' @@ -114,6 +114,6 @@ Now that you have Web3 authentication in a new Next.js application, and you know --- - - [Next.js SDK Reference](/docs/references/nextjs/overview) + - [Next.js SDK Reference](/docs/sdk/nextjs/methods) - Learn more about additional Next.js methods. diff --git a/docs/webhooks/sync-data.mdx b/docs/webhooks/sync-data.mdx index a7024f6bf3..4b5c059c2f 100644 --- a/docs/webhooks/sync-data.mdx +++ b/docs/webhooks/sync-data.mdx @@ -74,7 +74,7 @@ These steps apply to any Clerk event. To make the setup process easier, it's rec ## Set the webhook route as public in your Middleware - Incoming webhook events don't contain auth information. They come from an external source and aren't signed in or out, so the route must be public to allow access. If you're using `clerkMiddleware()`, ensure that the `/api/webhooks(.*)` route is set as public. For information on configuring routes, see the [`clerkMiddleware()` guide](/docs/references/nextjs/clerk-middleware). + Incoming webhook events don't contain auth information. They come from an external source and aren't signed in or out, so the route must be public to allow access. If you're using `clerkMiddleware()`, ensure that the `/api/webhooks(.*)` route is set as public. For information on configuring routes, see the [`clerkMiddleware()` guide](/docs/sdk/nextjs/clerk-middleware). ## Install `svix`