Skip to content

Commit 09f3be2

Browse files
alexisintechalexisintech
authored
TutorialHero no longer supports You will learn section (#2162)
1 parent 550f661 commit 09f3be2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+103
-354
lines changed

‎CONTRIBUTING.md

+9-17
Original file line numberDiff line numberDiff line change
@@ -672,11 +672,11 @@ https://github.com/clerk/clerk-docs/assets/2615508/9b07ba1d-8bb0-498b-935f-432d2
672672

673673
The `<TutorialHero />` component is used at the beginning of a tutorial-type content page. It accepts the following properties:
674674

675-
| Property | Type | Description |
676-
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- |
677-
| `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. |
678-
| `exampleRepo` (optional) | { title: string; link: string }[] | Links to example repositories. |
679-
| `exampleRepoTitle` (optional) | string | The title for the example repository/repositories. Defaults to `'Example repository'`. |
675+
| Property | Type | Description |
676+
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
677+
| `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. |
678+
| `exampleRepo` (optional) | { title: string; link: string }[] | Links to example repositories. |
679+
| `exampleRepoTitle` (optional) | string | The title for the example repository/repositories. Defaults to `'Example repository'` or `'Example repositories'`, but can be passed any string. |
680680

681681
```mdx
682682
<TutorialHero
@@ -690,23 +690,15 @@ The `<TutorialHero />` component is used at the beginning of a tutorial-type con
690690
title: 'Create a Next.js application',
691691
link: 'https://nextjs.org/docs/getting-started/installation',
692692
icon: 'nextjs',
693-
}
693+
},
694694
]}
695695
exampleRepo={[
696696
{
697-
title: 'App router',
697+
title: 'Clerk + Next.js App Router Quickstart',
698698
link: 'https://github.com/clerk/clerk-nextjs-app-quickstart',
699-
}
699+
},
700700
]}
701-
>
702-
703-
- Install `@clerk/nextjs`
704-
- Set up your environment keys to test your app locally
705-
- Add `<ClerkProvider>` to your application
706-
- Use Clerk middleware to implement route-specific authentication
707-
- Create a header with Clerk components for users to sign in and out
708-
709-
</TutorialHero>
701+
/>
710702
```
711703

712704
### `<Cards>`

‎docs/authentication/enterprise-connections/easie/google.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
2121
icon: "user-circle",
2222
}
2323
]}
24-
>
25-
- Use Google to authenticate users with EASIE SSO.
26-
</TutorialHero>
24+
/>
2725

2826
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.
2927

‎docs/authentication/enterprise-connections/easie/microsoft.mdx

+2-4
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,13 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1515
link: "/docs/authentication/configuration/sign-up-sign-in-options#identifiers",
1616
icon: "key",
1717
},
18-
{
18+
{
1919
title: "A Microsoft Azure account is required.",
2020
link: "https://azure.microsoft.com/en-us/free/",
2121
icon: "user-circle",
2222
}
2323
]}
24-
>
25-
- Use Microsoft to authenticate users with EASIE SSO.
26-
</TutorialHero>
24+
/>
2725

2826
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.
2927

‎docs/authentication/enterprise-connections/oidc/custom-provider.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to integrate a custom OIDC provider with Clerk for Enterp
1616
icon: "key",
1717
},
1818
]}
19-
>
20-
- Add a custom OIDC provider to authenticate users with Enterprise SSO
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/enterprise-connections/saml/azure.mdx

+2-8
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,9 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "key",
1717
}
1818
]}
19-
>
20-
- Create a SSO connection via Clerk Dashboard
21-
- Give your customer instructions on how to connect Microsoft Entra ID to your app
22-
- Enable and test the SAML connection
23-
</TutorialHero>
19+
/>
2420

25-
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.
26-
27-
This process requires configuration changes in both the Clerk Dashboard, and in your customer's Microsoft Entra ID settings in their Azure account.
21+
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.
2822

2923
<Steps>
3024
## Create a Microsoft Entra ID SAML connection in Clerk

‎docs/authentication/enterprise-connections/saml/custom-provider.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to integrate an Identity Provider (IdP) with Clerk using
1616
icon: "key",
1717
}
1818
]}
19-
>
20-
- Use a custom IdP to enable single sign-on (SSO) via SAML for your Clerk application.
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/enterprise-connections/saml/google.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to integrate Google Workspace with Clerk using SAML SSO.
1616
icon: "key",
1717
}
1818
]}
19-
>
20-
- Use Google Workspace to enable SSO via SAML for your Clerk app
21-
</TutorialHero>
19+
/>
2220

2321
Enabling SAML with Google allows your users to sign up and sign in to your Clerk application with their Google account.
2422

‎docs/authentication/enterprise-connections/saml/okta.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to integrate Okta Workforce with Clerk using SAML SSO.
1616
icon: "key",
1717
}
1818
]}
19-
>
20-
- Use Okta Workforce to enable SSO via SAML for your Clerk app
21-
</TutorialHero>
19+
/>
2220

2321
Enabling SAML with Okta Workforce allows your users to sign up and sign in to your Clerk application with their Okta account.
2422

‎docs/authentication/social-connections/apple.mdx

+2-4
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,11 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use [Sign in with Apple](https://developer.apple.com/sign-in-with-apple/) to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

25-
> [!NOTE]
23+
> [!IMPORTANT]
2624
> 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).
2725
2826
## Configure for your development instance

‎docs/authentication/social-connections/atlassian.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use Atlassian to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
Enabling OAuth with Atlassian allows your users to sign up and sign in to your Clerk app with their Atlassian account.
2422

‎docs/authentication/social-connections/bitbucket.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use Bitbucket to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/social-connections/box.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use Box to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
Enabling OAuth with Box allows your users to sign up and sign in to your Clerk app with their Box account.
2422

‎docs/authentication/social-connections/coinbase.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
},
1818
]}
19-
>
20-
- Use Coinbase to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/social-connections/custom-provider.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Configure a custom OpenID Connect (OIDC) compatible authentication
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Configure custom Auth provider for your Clerk application.
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/social-connections/discord.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use Discord to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/social-connections/dropbox.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use Dropbox to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
Enabling OAuth with Dropbox allows your users to sign up and sign in to your Clerk application with their Dropbox account.
2422

‎docs/authentication/social-connections/facebook.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use Facebook to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
Enabling OAuth with Facebook allows your users to sign up and sign in to your Clerk app with their Facebook account.
2422

‎docs/authentication/social-connections/github.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1717
icon: "user-circle",
1818
},
1919
]}
20-
>
21-
- Use GitHub to authenticate users with OAuth
22-
</TutorialHero>
20+
/>
2321

2422
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.
2523

‎docs/authentication/social-connections/gitlab.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
},
1818
]}
19-
>
20-
- Use GitLab to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/social-connections/google.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use Google to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/social-connections/hubspot.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use HubSpot to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
Enabling OAuth with HubSpot allows your users to sign up and sign in to your Clerk application with their HubSpot account.
2422

‎docs/authentication/social-connections/huggingface.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use Hugging Face to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/social-connections/line.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use LINE to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
Enabling OAuth with LINE allows your users to sign up and sign in to your Clerk app with their LINE account.
2422

‎docs/authentication/social-connections/linear.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
},
1818
]}
19-
>
20-
- Use Linear to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/social-connections/linkedin-oidc.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use LinkedIn OIDC to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/social-connections/microsoft.mdx

+1-4
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use Microsoft Azure Entra ID to authenticate users with OAuth
21-
- Protect your app from [the nOAuth exploit](https://www.descope.com/blog/post/noauth)
22-
</TutorialHero>
19+
/>
2320

2421
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.
2522

‎docs/authentication/social-connections/notion.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use Notion to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
Enabling OAuth with Notion allows your users to sign up and sign in to your Clerk app with their Notion account.
2422

‎docs/authentication/social-connections/slack.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
},
1818
]}
19-
>
20-
- Use Slack to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/social-connections/spotify.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
},
1818
]}
19-
>
20-
- Use Spotify to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/social-connections/tiktok.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use TikTok ID to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

‎docs/authentication/social-connections/twitch.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w
1616
icon: "user-circle",
1717
}
1818
]}
19-
>
20-
- Use Twitch to authenticate users with OAuth
21-
</TutorialHero>
19+
/>
2220

2321
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.
2422

0 commit comments

Comments
 (0)