-
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
158 changed files
with
2,836 additions
and
1,874 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 @@ | ||
The [`<ClerkProvider>`](/docs/components/clerk-provider) component provides session and user context to Clerk's hooks and components. It's recommended to wrap your entire app at the entry point with `<ClerkProvider>` to make authentication globally accessible. See the [reference docs](/docs/components/clerk-provider) for other configuration options. |
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,58 @@ | ||
The following example demonstrates how to create a custom OAuth sign-in flow for [Google accounts](/docs/authentication/social-connections/google). | ||
|
||
```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }} | ||
import React from 'react' | ||
import * as WebBrowser from 'expo-web-browser' | ||
import { Text, View, Button } from 'react-native' | ||
import { Link } from 'expo-router' | ||
import { useOAuth } from '@clerk/clerk-expo' | ||
import * as Linking from 'expo-linking' | ||
|
||
export const useWarmUpBrowser = () => { | ||
React.useEffect(() => { | ||
// Warm up the android browser to improve UX | ||
// https://docs.expo.dev/guides/authentication/#improving-user-experience | ||
void WebBrowser.warmUpAsync() | ||
return () => { | ||
void WebBrowser.coolDownAsync() | ||
} | ||
}, []) | ||
} | ||
|
||
WebBrowser.maybeCompleteAuthSession() | ||
|
||
export default function Page() { | ||
useWarmUpBrowser() | ||
|
||
const { startOAuthFlow } = useOAuth({ strategy: 'oauth_google' }) | ||
|
||
const onPress = React.useCallback(async () => { | ||
try { | ||
const { createdSessionId, signIn, signUp, setActive } = await startOAuthFlow({ | ||
redirectUrl: Linking.createURL('/dashboard', { scheme: 'myapp' }), | ||
}) | ||
|
||
// If sign in was successful, set the active session | ||
if (createdSessionId) { | ||
setActive!({ session: createdSessionId }) | ||
} else { | ||
// Use signIn or signUp returned from startOAuthFlow | ||
// for next steps, such as MFA | ||
} | ||
} catch (err) { | ||
// See https://clerk.com/docs/custom-flows/error-handling | ||
// for more info on error handling | ||
console.error(JSON.stringify(err, null, 2)) | ||
} | ||
}, []) | ||
|
||
return ( | ||
<View> | ||
<Link href="/"> | ||
<Text>Home</Text> | ||
</Link> | ||
<Button title="Sign in with Google" onPress={onPress} /> | ||
</View> | ||
) | ||
} | ||
``` |
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,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' }} |
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
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
88 changes: 88 additions & 0 deletions
88
docs/authentication/enterprise-connections/oidc/custom-provider.mdx
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,88 @@ | ||
--- | ||
title: Add a custom OpenID Connect (OIDC) Provider as an enterprise connection | ||
description: Learn how to integrate a custom OIDC provider with Clerk for Enterprise SSO. | ||
--- | ||
|
||
<TutorialHero | ||
beforeYouStart={[ | ||
{ | ||
title: "Add the Enhanced Authentication add-on to your Pro plan", | ||
link: "/pricing", | ||
icon: "plus-circle", | ||
}, | ||
{ | ||
title: "Enable email address as an identifier for your app", | ||
link: "/docs/authentication/configuration/sign-up-sign-in-options#identifiers", | ||
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. | ||
|
||
To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your Identity Provider (IdP). | ||
|
||
<Steps> | ||
## Set up an enterprise connection in Clerk | ||
|
||
1. In the Clerk Dashboard, navigate to the [**SSO Connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. | ||
1. Select **Add connection** and select **For specific domains**. | ||
1. Under **Third party**, select **OpenID Connect (OIDC)**. | ||
1. Add the **Name** of the connection. | ||
1. Add the **Key** of the provider. This is the provider's unique identifier (cannot be changed after creation). | ||
1. Add the **Specific Domain** that you want to allow this connection for. This is the domain of the users you want to allow to sign in to your app. | ||
1. Select **Add connection**. You will be redirected to the connection's configuration page. Keep this page open. | ||
|
||
## Configure your IdP | ||
|
||
1. If necessary, create a new application in your IdP. | ||
1. In the connection's configuration page of the Clerk Dashboard, copy the **Authorized redirect URI**. | ||
1. Add the value to your IdP's whitelisted URLs. | ||
1. Find your application's **Discovery Endpoint**, **Client ID**, and **Client Secret** and copy them. | ||
|
||
## Set the Discovery Endpoint, Client ID, and Client Secret in Clerk | ||
|
||
1. In your IdP settings, copy your application's **Discovery Endpoint**, **Client ID**, and **Client Secret**. | ||
1. In the connection's configuration page in the Clerk Dashboard, paste these values in their respective fields. | ||
1. Under **Scopes**, add the minimum required scopes based on the IdP's documentation if needed. Common OIDC scopes include `openid`, `email`, and `profile`. | ||
1. Select **Save**. | ||
|
||
> [!NOTE] | ||
> Most IdPs provide a **Discovery Endpoint** to retrieve metadata about an OIDC provider. If your IdP doesn't offer this endpoint or if you need greater control over the setup process, in the connection's configuration page in the Clerk Dashboard, find the **Identity Provider Configuration** section and select **Use Manual Configuration** to manually configure the connection. | ||
## Configure attribute mapping (optional) | ||
|
||
Clerk expects the claims returned by your IdP to follow the [OIDC Standard](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims). If your provider returns claims in a non-standard format, use the **Attribute Mapping** section on the connection's configuration page to adjust the mapping of Clerk's user properties to match the IdP's claim attributes. | ||
|
||
> [!WARNING] | ||
> OIDC Enterprise connections require the [`email_verified`](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims:~:text=Section%C2%A05.7.-,email_verified,-boolean) claim to verify email ownership. However, some IdPs, such as Microsoft Azure Active Directory, might not return this claim or use a non-standard format. | ||
> | ||
> If the IdP doesn't return this claim, you can leave the **Email address verified** field blank and set the **Default value** to **True**. This should only be done if you fully trust the IdP, as it can expose your app to [OAuth attacks](https://www.descope.com/blog/post/noauth). | ||
## Allow additional identifiers (optional) | ||
|
||
User profile information is sourced from the IdP. To allow users to add new identifiers (e.g., email address or phone number) to their profiles: | ||
|
||
1. In the connection's configuration page of the Clerk Dashboard, navigate to the **Advanced** tab. | ||
1. Enable **Allow additional identifiers**. | ||
1. Select **Save**. | ||
|
||
## Enable the connection for Clerk | ||
|
||
To make the connection available for your users to authenticate with: | ||
|
||
1. Navigate back to the Clerk Dashboard where you should still have the connection's configuration page open. If not, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page and select the connection. | ||
1. At the top of the page, toggle on **Enable connection** and select **Save**. | ||
|
||
## Test your connection | ||
|
||
The simplest way to test your enterprise connection is to visit your Clerk app's [Account Portal](/docs/customization/account-portal/overview), which is available for all Clerk apps out-of-the-box. | ||
|
||
1. In the Clerk Dashboard, navigate to the [**Account Portal**](https://dashboard.clerk.com/last-active?path=account-portal) page. | ||
1. Next to the **Sign-in** URL, select **Visit**. The URL should resemble: | ||
- **For development** – `https://your-domain.accounts.dev/sign-in` | ||
- **For production** – `https://accounts.your-domain.com/sign-in` | ||
1. Sign in with your IdP account. | ||
</Steps> |
Oops, something went wrong.