-
Notifications
You must be signed in to change notification settings - Fork 481
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into rob/eco-224-nuxt-quickstart
- Loading branch information
Showing
380 changed files
with
4,932 additions
and
2,482 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| ```tsx | ||
| import { createClerkClient } from '@clerk/backend' | ||
|
|
||
| export async function GET(req: Request) { | ||
| const clerkClient = createClerkClient({ | ||
| secretKey: process.env.CLERK_SECRET_KEY, | ||
| publishableKey: process.env.CLERK_PUBLISHABLE_KEY, | ||
| }) | ||
|
|
||
| const { isSignedIn } = await clerkClient.authenticateRequest(req, { | ||
| jwtKey: process.env.CLERK_JWT_KEY, | ||
| authorizedParties: ['https://example.com'], | ||
| }) | ||
|
|
||
| if (!isSignedIn) { | ||
| return Response.json({ status: 401 }) | ||
| } | ||
|
|
||
| // Add logic to perform protected actions | ||
|
|
||
| return Response.json({ message: 'This is a reply' }) | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| The following example uses the [`has()`](/docs/references/nextjs/auth-object#has) helper to check if the user has verified their credentials within a specific time period. The `strict` configuration sets the time period to 10 minutes. If the user hasn't verified their credentials within 10 minutes, the `reverificationErrorResponse` utility is used to return an error. | ||
|
|
||
| ```tsx {{ filename: 'app/api/reverification-example/route.ts' }} | ||
| import { auth, reverificationErrorResponse } from '@clerk/nextjs/server' | ||
|
|
||
| export const POST = async (req: Request) => { | ||
| const { has } = await auth() | ||
|
|
||
| // Check if the user has *not* verified their credentials within the past 10 minutes. | ||
| const shouldUserRevalidate = !has({ reverification: 'strict' }) | ||
|
|
||
| // If the user hasn't reverified, return an error with the matching configuration (e.g., `strict`) | ||
| if (shouldUserRevalidate) { | ||
| return reverificationErrorResponse('strict') | ||
| } | ||
|
|
||
| // If the user has verified credentials, return a successful response | ||
| return new Response({ success: true }) | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| > [!CAUTION] | ||
| > The entire session token has a max size of 4kb. Exceeding this size can have adverse effects, including a possible infinite redirect loop for users who exceed this size in Next.js applications. | ||
| > It's recommended to move particularly large claims out of the JWT and fetch these using a separate API call from your backend. | ||
| > [Learn more](/docs/backend-requests/resources/session-tokens#size-limitations). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -41,9 +41,8 @@ To access authentication state from a satellite domain, users will be transparen | |
|
|
||
| To add a satellite domain: | ||
|
|
||
| 1. Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=domains) | ||
| 1. In the navigation sidebar, select **Domains**. | ||
| 1. Select the **Satellite** tab. | ||
| 1. In the Clerk Dashboard, navigate to the [**Domains**](https://dashboard.clerk.com/last-active?path=domains) page. | ||
| 1. Select the **Satellites** tab. | ||
| 1. Select the **Add satellite domain** button and follow the instructions provided. | ||
|
|
||
| For the purposes of this guide: | ||
|
|
@@ -65,11 +64,11 @@ To access authentication state from a satellite domain, users will be transparen | |
| You can configure your satellite application by setting the following environment variables: | ||
|
|
||
| > [!NOTE] | ||
| > In development, your publishable and secret keys will start with `pk_test_` and `sk_test` respectively. | ||
| > In development, your Publishable and Secret Keys will start with `pk_test_` and `sk_test` respectively. | ||
| - In the `.env` file associated with your primary domain: | ||
|
|
||
| <CodeBlockTabs type="framework" options={["Next.js", "Remix"]}> | ||
| <CodeBlockTabs options={["Next.js", "Remix"]}> | ||
| ```env {{ filename: '.env.local' }} | ||
| NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY={{pub_key}} | ||
| CLERK_SECRET_KEY={{secret}} | ||
|
|
@@ -85,15 +84,15 @@ To access authentication state from a satellite domain, users will be transparen | |
| </CodeBlockTabs> | ||
| - In the `.env` file associated with your other (satellite) domain: | ||
|
|
||
| <CodeBlockTabs type="framework" options={["Next.js", "Remix"]}> | ||
| <CodeBlockTabs options={["Next.js", "Remix"]}> | ||
| ```env {{ filename: '.env.local' }} | ||
| NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY={{pub_key}} | ||
| CLERK_SECRET_KEY={{secret}} | ||
| NEXT_PUBLIC_CLERK_IS_SATELLITE=true | ||
| # Production example: | ||
| NEXT_PUBLIC_CLERK_DOMAIN=satellite.dev | ||
| NEXT_PUBLIC_CLERK_SIGN_IN_URL=https://primary.dev/sign-in | ||
| NEXT_PUBLIC_CLERK_SIGN_UP_URL=https://primary.dev/sign-up | ||
| NEXT_PUBLIC_CLERK_SIGN_UP_URL=https://primary.dev/sign-up | ||
| # Development example: | ||
| # NEXT_PUBLIC_CLERK_DOMAIN=http://localhost:3001 | ||
|
|
@@ -153,15 +152,15 @@ To access authentication state from a satellite domain, users will be transparen | |
| You can configure your satellite application by setting the following properties: | ||
|
|
||
| - `isSatellite` - Defines the app as a satellite app when `true`. | ||
| - `domain` - Sets the domain of the satellite application. This is required since we cannot figure this out by your publishable key, since it is the same for all of your multi-domain apps. | ||
| - `domain` - Sets the domain of the satellite application. This is required since we cannot figure this out by your Publishable Key, since it is the same for all of your multi-domain apps. | ||
| - `signInUrl` - This url will be used when signing in on your satellite application and needs to point to your primary application. This option is optional for production instances and required for development instances. | ||
| - `signUpUrl` - This url will be used for signing up on your satellite application and needs to point to your primary application. This option is optional for production instances and required for development instances. | ||
| - `allowedRedirectOrigins` - This is a list of origins that are allowed to redirect back to from the primary domain. | ||
|
|
||
| > [!TIP] | ||
| > The `URL` parameter that can be passed to `isSatellite` and `domain` is the request url for server-side usage or the current location for client usage. | ||
| <Tabs type="framework" items={["Next.js", "Remix"]}> | ||
| <Tabs items={["Next.js", "Remix"]}> | ||
| <Tab> | ||
| In a Next.js application, you must set the properties in the [`<ClerkProvider>`](/docs/components/clerk-provider) component _and_ in your [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware#clerk-middleware). | ||
|
|
||
|
|
@@ -407,4 +406,4 @@ To access authentication state from a satellite domain, users will be transparen | |
| You can repeat this process and create as many satellite applications as you need. | ||
| </Steps> | ||
|
|
||
| If you have any questions about satellite domains, or you're having any trouble setting this up, please contact [[email protected]](mailto:[email protected]) | ||
| If you have any questions about satellite domains, or you're having any trouble setting this up, contact [[email protected]](mailto:[email protected]) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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, check out our [Set up your application guide](/docs/quickstarts/setup-clerk). | ||
| > For more information on creating a Clerk application, see the [setup guide](/docs/quickstarts/setup-clerk). | ||
| ### Configure your proxy server | ||
|
|
||
|
|
@@ -35,7 +35,7 @@ When using a proxy, all requests to the Frontend API will be made through your d | |
| Three additional headers must be set | ||
|
|
||
| - `Clerk-Proxy-Url`: Needs to have the full proxy URL. | ||
| - `Clerk-Secret-Key`: The secret key for your Clerk instance. | ||
| - `Clerk-Secret-Key`: The Secret Key for your Clerk instance. | ||
| - `X-Forwarded-For`: The IP address of the original client making the request. | ||
|
|
||
| #### Example configuration | ||
|
|
@@ -146,7 +146,7 @@ When using a proxy, all requests to the Frontend API will be made through your d | |
| </Tabs> | ||
|
|
||
| > [!NOTE] | ||
| > Every proxy configuration will be different and we're here to help. Please [reach out](/contact/support){{ target: '_blank' }} if there's a specific use-case you're looking to solve. | ||
| > Every proxy configuration will be different and we're here to help. [Contact support](/contact/support){{ target: '_blank' }} if there's a specific use-case you're looking to solve. | ||
| ### Enable proxying | ||
|
|
||
|
|
@@ -158,9 +158,8 @@ When using a proxy, all requests to the Frontend API will be made through your d | |
| <Tabs items={["Dashboard", "Backend API"]}> | ||
| <Tab> | ||
| 1. In the Clerk Dashboard, go to the **[Domains](https://dashboard.clerk.com/last-active?path=domains)** page. | ||
| 1. Navigate to the **Frontend API** section. | ||
| 1. Select the **Advanced** drop down. | ||
| 1. In the Clerk Dashboard, navigate to the **[Domains](https://dashboard.clerk.com/last-active?path=domains)** page. | ||
| 1. In the **Frontend API** section, select the **Advanced** dropdown. | ||
| 1. In the **Proxy URL** field, enter your proxy URL. The proxy URL must be a valid URL and resolve correctly. | ||
| </Tab> | ||
|
|
||
|
|
@@ -187,7 +186,7 @@ When using a proxy, all requests to the Frontend API will be made through your d | |
|
|
||
| To configure your proxy setup using environment variables, your `.env.local` file should look like this: | ||
|
|
||
| <Tabs type="framework" items={["Next.js", "Remix", "JavaScript"]}> | ||
| <Tabs items={["Next.js", "Remix", "JavaScript"]}> | ||
| <Tab> | ||
| ```env {{ filename: '.env.local' }} | ||
| NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY={{pub_key}} | ||
|
|
@@ -220,39 +219,23 @@ When using a proxy, all requests to the Frontend API will be made through your d | |
|
|
||
| #### Properties in your application | ||
|
|
||
| <Tabs type="framework" items={["Next.js", "Remix", "JavaScript"]}> | ||
| <Tabs items={["Next.js", "Remix", "JavaScript"]}> | ||
| <Tab> | ||
| To configure your proxy setup using properties in your Next.js application, set the `proxyUrl` property on the [`<ClerkProvider>`](/docs/components/clerk-provider) component. | ||
|
|
||
| <CodeBlockTabs type="router" options={["App Router", "Pages Router"]}> | ||
| ```tsx {{ filename: 'app/layout.tsx', mark: [5] }} | ||
| import { ClerkProvider } from '@clerk/nextjs' | ||
|
|
||
| export default function RootLayout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <ClerkProvider proxyUrl="https://app.dev/__clerk"> | ||
| <html lang="en"> | ||
| <body>{children}</body> | ||
| </html> | ||
| </ClerkProvider> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ```tsx {{ filename: '_app.tsx', mark: [6] }} | ||
| import { ClerkProvider } from '@clerk/nextjs' | ||
| import type { AppProps } from 'next/app' | ||
| ```tsx {{ filename: 'app/layout.tsx', mark: [5] }} | ||
| import { ClerkProvider } from '@clerk/nextjs' | ||
|
|
||
| function MyApp({ Component, pageProps }: AppProps) { | ||
| return ( | ||
| <ClerkProvider proxyUrl="https://app.dev/__clerk" {...pageProps}> | ||
| <Component {...pageProps} /> | ||
| </ClerkProvider> | ||
| ) | ||
| } | ||
| export default MyApp | ||
| ``` | ||
| </CodeBlockTabs> | ||
| export default function RootLayout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <ClerkProvider proxyUrl="https://app.dev/__clerk"> | ||
| <html lang="en"> | ||
| <body>{children}</body> | ||
| </html> | ||
| </ClerkProvider> | ||
| ) | ||
| } | ||
| ``` | ||
| </Tab> | ||
|
|
||
| <Tab> | ||
|
|
@@ -288,7 +271,7 @@ When using a proxy, all requests to the Frontend API will be made through your d | |
| ```js {{ filename: 'main.js' }} | ||
| import { Clerk } from '@clerk/clerk-js' | ||
|
|
||
| // Initialize Clerk with your Clerk publishable key | ||
| // Initialize Clerk with your Clerk Publishable Key | ||
| const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY | ||
|
|
||
| const clerk = new Clerk(clerkPubKey) | ||
|
|
@@ -305,4 +288,4 @@ When using a proxy, all requests to the Frontend API will be made through your d | |
| Your application should now be able to access the Frontend API from your proxy! | ||
| </Steps> | ||
|
|
||
| If you have any questions about proxying, or you're having any trouble setting this up, please contact [[email protected]](mailto:[email protected]). | ||
| If you have any questions about proxying, or you're having any trouble setting this up, contact [[email protected]](mailto:[email protected]). | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.