clerk · alexisintech · Apr 4, 2025
@@ -587,11 +587,11 @@ https://github.com/clerk/clerk-docs/assets/2615508/9b07ba1d-8bb0-498b-935f-432d2
 
 The `<TutorialHero />` component is used at the beginning of a tutorial-type content page. It accepts the following properties:
 
-| Property                      | Type                                                                                                                           | Description                                                                            |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- |
-| `beforeYouStart`              | { title: string; link: string; icon: [string](<https://github.com/clerk/clerk/blob/main/src/app/(website)/docs/icons.tsx>) }[] | Links to things that learners should complete before the tutorial.                     |
-| `exampleRepo` (optional)      | { title: string; link: string }[]                                                                                              | Links to example repositories.                                                         |
-| `exampleRepoTitle` (optional) | string                                                                                                                         | The title for the example repository/repositories. Defaults to `'Example repository'`. |
+| Property                      | Type                                                                                                                           | Description                                                                                                                                      |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `beforeYouStart`              | { title: string; link: string; icon: [string](<https://github.com/clerk/clerk/blob/main/src/app/(website)/docs/icons.tsx>) }[] | Links to things that learners should complete before the tutorial.                                                                               |
+| `exampleRepo` (optional)      | { title: string; link: string }[]                                                                                              | Links to example repositories.                                                                                                                   |
+| `exampleRepoTitle` (optional) | string                                                                                                                         | The title for the example repository/repositories. Defaults to `'Example repository'` or `'Example repositories'`, but can be passed any string. |
 
 ```mdx
 <TutorialHero
@@ -605,23 +605,15 @@ The `<TutorialHero />` component is used at the beginning of a tutorial-type con
       title: 'Create a Next.js application',
       link: 'https://nextjs.org/docs/getting-started/installation',
       icon: 'nextjs',
-    }
+    },
   ]}
   exampleRepo={[
     {
-      title: 'App router',
+      title: 'Clerk + Next.js App Router Quickstart',
       link: 'https://github.com/clerk/clerk-nextjs-app-quickstart',
-    }
+    },
   ]}
->
-
-- Install `@clerk/nextjs`
-- Set up your environment keys to test your app locally
-- Add `<ClerkProvider>` to your application
-- Use Clerk middleware to implement route-specific authentication
-- Create a header with Clerk components for users to sign in and out
-
-</TutorialHero>
+/>
 ```
 
 ### `<Cards>`

@@ -21,9 +21,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use Google to authenticate users with EASIE SSO.
-</TutorialHero>
+/>
 
 Enabling [EASIE SSO](/docs/authentication/enterprise-connections/overview#easie) with Google allows your users to sign up and sign in to your Clerk application with their Google account.
 

@@ -15,15 +15,13 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       link: "/docs/authentication/configuration/sign-up-sign-in-options#identifiers",
       icon: "key",
     },
-     {
+    {
       title: "A Microsoft Azure account is required.",
       link: "https://azure.microsoft.com/en-us/free/",
       icon: "user-circle",
     }
   ]}
->
-  - Use Microsoft to authenticate users with EASIE SSO.
-</TutorialHero>
+/>
 
 Enabling [EASIE SSO](/docs/authentication/enterprise-connections/overview#easie) with Microsoft (formerly [Active Directory](https://learn.microsoft.com/en-us/entra/fundamentals/new-name)) allows your users to sign up and sign in to your Clerk application with their Microsoft account.
 

@@ -16,9 +16,7 @@ description: Learn how to integrate a custom OIDC provider with Clerk for Enterp
       icon: "key",
     },
   ]}
->
-  - Add a custom OIDC provider to authenticate users with Enterprise SSO
-</TutorialHero>
+/>
 
 This guide explains how to use a custom [OpenID Connect (OIDC)](https://openid.net/developers/how-connect-works) provider to authenticate users via Enterprise SSO.
 

@@ -16,15 +16,9 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "key",
     }
   ]}
->
-  - Create a SSO connection via Clerk Dashboard
-  - Give your customer instructions on how to connect Microsoft Entra ID to your app
-  - Enable and test the SAML connection
-</TutorialHero>
+/>
 
-Enabling SAML with Microsoft Entra ID (formerly [Azure Active Directory](https://learn.microsoft.com/en-us/entra/fundamentals/new-name)) allows your users to sign up and sign in to your Clerk application with their Microsoft account.
-
-This process requires configuration changes in both the Clerk Dashboard, and in your customer's Microsoft Entra ID settings in their Azure account.
+Enabling SAML with Microsoft Entra ID (formerly [Azure Active Directory](https://learn.microsoft.com/en-us/entra/fundamentals/new-name)) allows your users to sign up and sign in to your Clerk application with their Microsoft account. It requires that a SAML connection is configured in both the Clerk Dashboard and Microsoft Entra ID. This guide assumes that you have access to the Clerk app's settings in the Clerk Dashboard. The "customer" in this case is whoever has access to the Microsoft Entra ID settings.
 
 <Steps>
   ## Create a Microsoft Entra ID SAML connection in Clerk

@@ -16,9 +16,7 @@ description: Learn how to integrate an Identity Provider (IdP) with Clerk using
       icon: "key",
     }
   ]}
->
-  - Use a custom IdP to enable single sign-on (SSO) via SAML for your Clerk application.
-</TutorialHero>
+/>
 
 Clerk supports Enterprise SSO via the SAML protocol, enabling you to create authentication strategies for an Identity Provider (IdP). Currently, Clerk offers direct integrations with the following IdPs: [Microsoft Azure AD](/docs/authentication/enterprise-connections/saml/azure), [Google Workspace](/docs/authentication/enterprise-connections/saml/google), and [Okta Workforce](/docs/authentication/enterprise-connections/saml/okta). However, you can also integrate with any other IdPs that supports the SAML protocol.
 

@@ -16,9 +16,7 @@ description: Learn how to integrate Google Workspace with Clerk using SAML SSO.
       icon: "key",
     }
   ]}
->
-  - Use Google Workspace to enable SSO via SAML for your Clerk app
-</TutorialHero>
+/>
 
 Enabling SAML with Google allows your users to sign up and sign in to your Clerk application with their Google account.
 

@@ -16,9 +16,7 @@ description: Learn how to integrate Okta Workforce with Clerk using SAML SSO.
       icon: "key",
     }
   ]}
->
-  - Use Okta Workforce to enable SSO via SAML for your Clerk app
-</TutorialHero>
+/>
 
 Enabling SAML with Okta Workforce allows your users to sign up and sign in to your Clerk application with their Okta account.
 

@@ -16,13 +16,11 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use [Sign in with Apple](https://developer.apple.com/sign-in-with-apple/) to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth via [Sign in with Apple](https://developer.apple.com/sign-in-with-apple/) allows your users to sign in and sign up to your Clerk app with their Apple ID.
 
-> [!NOTE]
+> [!IMPORTANT]
 > This guide explains how to configure Sign in with Apple for web based flows. To configure native Sign in with Apple on native applications (iOS), see the [dedicated guide](/docs/references/ios/sign-in-with-apple).
 
 ## Configure for your development instance

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use Atlassian to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with Atlassian allows your users to sign up and sign in to your Clerk app with their Atlassian account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use Bitbucket to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with [Bitbucket](https://developer.atlassian.com/cloud/bitbucket/oauth-2) allows your users to sign up and sign in to your Clerk application with their Bitbucket account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use Box to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with Box allows your users to sign up and sign in to your Clerk app with their Box account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     },
   ]}
->
-  - Use Coinbase to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with [Coinbase](https://docs.cdp.coinbase.com/coinbase-app/docs/coinbase-app) allows your users to sign up and sign in to your Clerk app with their Coinbase account.
 

@@ -16,9 +16,7 @@ description: Configure a custom OpenID Connect (OIDC) compatible authentication
       icon: "user-circle",
     }
   ]}
->
-  - Configure custom Auth provider for your Clerk application.
-</TutorialHero>
+/>
 
 Clerk allows you to configure custom OpenID Connect (OIDC) compatible authentication providers for your application. This guide walks you through the steps to set up a custom OAuth provider.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use Discord to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with [Discord](https://discord.com/developers/docs/topics/oauth2) allows your users to sign up and sign in to your Clerk application with their Discord account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
     icon: "user-circle",
   }
 ]}
->
-  - Use Dropbox to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with Dropbox allows your users to sign up and sign in to your Clerk application with their Dropbox account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
     icon: "user-circle",
   }
 ]}
->
-  - Use Facebook to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with Facebook allows your users to sign up and sign in to your Clerk app with their Facebook account.
 

@@ -17,9 +17,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     },
   ]}
->
-  - Use GitHub to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with [GitHub](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app) allows your users to sign up and sign in to your Clerk app with their GitHub account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     },
   ]}
->
-  - Use GitLab to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with [GitLab](https://docs.gitlab.com/ee/integration/oauth_provider.html) allows your users to sign up and sign in to your Clerk app with their GitLab account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use Google to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with [Google](https://developers.google.com/identity/protocols/oauth2) allows your users to sign up and sign in to your Clerk application with their Google account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use HubSpot to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with HubSpot allows your users to sign up and sign in to your Clerk application with their HubSpot account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use Hugging Face to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with [Hugging Face](https://huggingface.co/) allows your users to sign up and sign in to your Clerk application with their Hugging Face account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use LINE to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with LINE allows your users to sign up and sign in to your Clerk app with their LINE account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     },
   ]}
->
-  - Use Linear to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with [Linear](https://developers.linear.app/docs/oauth/authentication) allows your users to sign up and sign in to your Clerk app with their Linear account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use LinkedIn OIDC to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OpenID Connect (OIDC) with [LinkedIn](https://learn.microsoft.com/en-us/linkedin/shared/authentication/authentication) allows your users to sign up and sign in to your Clerk application with their LinkedIn account.
 

@@ -16,10 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use Microsoft Azure Entra ID to authenticate users with OAuth
-  - Protect your app from [the nOAuth exploit](https://www.descope.com/blog/post/noauth)
-</TutorialHero>
+/>
 
 Enabling OAuth with Microsoft Azure Entra ID (formerly [Active Directory](https://learn.microsoft.com/en-us/entra/fundamentals/new-name)) allows your users to sign up and sign in to your Clerk app with their Microsoft account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use Notion to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with Notion allows your users to sign up and sign in to your Clerk app with their Notion account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     },
   ]}
->
-  - Use Slack to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with [Slack](https://api.slack.com/authentication) allows your users to sign up and sign in to your Clerk app with their Slack account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     },
   ]}
->
-  - Use Spotify to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with [Spotify](https://developer.spotify.com/documentation/web-api/concepts/authorization) allows your users to sign up and sign in to your Clerk application with their Spotify account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
       icon: "user-circle",
     }
   ]}
->
-  - Use TikTok ID to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with [TikTok](https://developers.tiktok.com/doc/login-kit-manage-user-access-tokens) allows your users to sign up and sign in to your Clerk app with their TikTok account.
 

@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
     icon: "user-circle",
   }
 ]}
->
-  - Use Twitch to authenticate users with OAuth
-</TutorialHero>
+/>
 
 Enabling OAuth with [Twitch](https://dev.twitch.tv/docs/api/reference#oauth-client-credentials-flow) allows your users to sign up and sign in to your Clerk application with their Twitch account.