From 47aba5d31e6b31b0062dd8bf4e9dbf51d29ce44c Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 15 Jan 2025 22:44:00 -0300
Subject: [PATCH] Update snippets
---
docs/_partials/expo/oauth-custom-flow.mdx | 58 --------
docs/references/expo/use-oauth.mdx | 61 --------
docs/references/expo/use-sso.mdx | 164 +++++++++++++++++++---
3 files changed, 145 insertions(+), 138 deletions(-)
delete mode 100644 docs/_partials/expo/oauth-custom-flow.mdx
delete mode 100644 docs/references/expo/use-oauth.mdx
diff --git a/docs/_partials/expo/oauth-custom-flow.mdx b/docs/_partials/expo/oauth-custom-flow.mdx
deleted file mode 100644
index 81f09bee6c..0000000000
--- a/docs/_partials/expo/oauth-custom-flow.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
-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 (
-
-
- Home
-
-
-
- )
-}
-```
diff --git a/docs/references/expo/use-oauth.mdx b/docs/references/expo/use-oauth.mdx
deleted file mode 100644
index 560328433e..0000000000
--- a/docs/references/expo/use-oauth.mdx
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: '`useOAuth()`'
-description: Clerk's useOAuth() hook is used to create a new OAuth flow.
----
-
-The `useOAuth()` hook is used to create a new OAuth flow. It can be used in both web and native apps.
-
-## Parameters
-
-
- - `strategy`
- - [`OAuthStrategy`](/docs/references/javascript/types/oauth#o-auth-strategy)
-
- The strategy corresponding to the OAuth provider. For example: `oauth_facebook`, `oauth_github`, etc.
-
- ---
-
- - `redirectUrl?`
- - `string`
-
- The URL or path to redirect to after the OAuth flow is complete.
-
- ---
-
- - `unsafeMetadata?`
- - [`SignUpUnsafeMetadata`](/docs/references/javascript/types/metadata#sign-up-unsafe-metadata)
-
- Unsafe metadata to be passed to the OAuth provider.
-
-
-## Returns
-
-The `useOAuth()` hook returns the `startOAuthFlow()` method, which you can use to initiate the OAuth flow.
-
-The `startOAuthFlow()` method has the following signature:
-
-```ts
-const startOAuthFlow: (
- startOAuthFlowParams?: StartOAuthFlowParams,
-) => Promise
-```
-
-It accepts the following parameters (`StartOAuthFlowParams`):
-
-
- - `redirectUrl?`
- - `string`
-
- The URL or path to redirect to after the OAuth flow is complete.
-
- ---
-
- - `unsafeMetadata?`
- - [`SignUpUnsafeMetadata`](/docs/references/javascript/types/metadata#sign-up-unsafe-metadata)
-
- Unsafe metadata to be passed to the OAuth provider.
-
-
-## How to use the `useOAuth()` hook
-
-
diff --git a/docs/references/expo/use-sso.mdx b/docs/references/expo/use-sso.mdx
index c62a12c808..0d08411142 100644
--- a/docs/references/expo/use-sso.mdx
+++ b/docs/references/expo/use-sso.mdx
@@ -9,36 +9,43 @@ The `useSSO()` hook is used to create a new SSO flow. It can be used in both web
- `strategy`
- - [`OAuthStrategy`](/docs/references/javascript/types/oauth#o-auth-strategy)
- - [`EnterpriseSSOStrategy`](/docs/references/javascript/types/oauth#o-auth-strategy)
- The strategy corresponding to the SSO provider. For example: `oauth_facebook`, `oauth_github`, `enterprise_sso`, etc.
+ - [`OAuthStrategy`](/docs/references/javascript/types/sso#o-auth-strategy)
- ---
+ - [`EnterpriseSSOStrategy`](/docs/references/javascript/types/sso#enterprise-sso-strategy)
- - `redirectUrl?`
- - `string`
+ - `strategy?`
- The URL or path to redirect to after the SSO flow is complete.
+ - `string`
- ---
+ Select the SSO strategy. The `enterprise_sso` value depends on the object's `identifier` value. Possible `strategy` values are:
- - `unsafeMetadata?`
- - [`SignUpUnsafeMetadata`](/docs/references/javascript/types/metadata#sign-up-unsafe-metadata)
+ - `oauth_`: The user will be authenticated with their social sign-in account. [See available social providers](/docs/references/javascript/types/oauth#o-auth-provider).
+ - `enterprise_sso`: The user will be authenticated either through SAML or OIDC, depending on the configuration of the [enterprise connection](/docs/authentication/enterprise-connections/overview) matching the identifier.
+
+ ---
- Unsafe metadata to be passed to the SSO provider.
+ - `redirectUrl?`
+ - `string`
+
+ The URL or path to redirect to after the SSO flow is complete.
+
+ ---
+
+ - `unsafeMetadata?`
+ - [`SignUpUnsafeMetadata`](/docs/references/javascript/types/metadata#sign-up-unsafe-metadata)
+
+ Unsafe metadata to be passed to the SSO provider.
## Returns
The `useSSO()` hook returns the `startFlow()` method, which you can use to initiate the SSO flow.
-The `startFlow()` method has the following signature:
+The `startSSOFlow()` method has the following signature:
```ts
-const startFlow: (
- startSSOFlowParams?: StartSSOFlowParams,
-) => Promise
+const startSSOFlow: (startSSOFlowParams?: StartSSOFlowParams) => Promise
```
It accepts the following parameters (`StartSSOFlowParams`):
@@ -57,12 +64,131 @@ It accepts the following parameters (`StartSSOFlowParams`):
Unsafe metadata to be passed to the OAuth provider.
---
+
- `identifier?`
- string
- The [identifier](/docs/authentication/configuration/sign-up-sign-in-options#identifier) of the user.
+ The [identifier](/docs/authentication/configuration/sign-up-sign-in-options#identifier) of the user. Required for `enterprise_sso` strategy.
-## How to use the `useSSO()` hook
-
-
+## How to use `useSSO()`
+
+
+
+ The following example demonstrates how to create a custom SSO 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 { useSSO } 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 { startFlow } = useSSO({ strategy: 'oauth_google' })
+
+ const onPress = React.useCallback(async () => {
+ try {
+ const { createdSessionId, signIn, signUp, setActive } = await startFlow({
+ 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 (
+
+
+
+ )
+ }
+ ```
+
+
+
+ The following example demonstrates how to create a custom SSO sign-in flow with [SAML](/authentication/enterprise-connections/overview#saml).
+
+ ```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 { useSSO } 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 { startFlow } = useSSO({ strategy: 'enterprise_sso' })
+
+ const onPress = React.useCallback(async () => {
+ try {
+ const { createdSessionId, signIn, signUp, setActive } = await startFlow({
+ redirectUrl: Linking.createURL('/dashboard', { scheme: 'myapp' }),
+ // User identifier with a email domain that matches a enterprise connection
+ identifier: 'foo@corp.com',
+ })
+
+ // 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 (
+
+
+
+ )
+ }
+ ```
+
+