Skip to content

Commit fbf01cb

Browse files
alexisintechalexisintech
committed
code review; pending testing
1 parent ef80482 commit fbf01cb

File tree

4 files changed

+146
-146
lines changed

4 files changed

+146
-146
lines changed

‎docs/_partials/expo/enterprise-sso-custom-flow.mdx

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎docs/_partials/expo/oauth-custom-flow.mdx

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎docs/custom-flows/enterprise-connections.mdx

Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,84 @@ You must configure your application instance through the Clerk Dashboard for the
7373
</Tab>
7474

7575
<Tab>
76-
<Include src="_partials/expo/enterprise-sso-custom-flow" />
76+
> [!IMPORTANT]
77+
> Expo supports [SAML](/docs/authentication/enterprise-connections/overview#saml) Enterprise SSO, but does not support [OIDC](/docs/authentication/enterprise-connections/overview#oidc).
78+
79+
The following example **will both sign up _and_ sign in users**, eliminating the need for a separate sign-up page.
80+
81+
The following example:
82+
83+
1. Accesses the `startSSOFlow()` method using the [`useSSO()`](/docs/references/expo/use-sso) hook.
84+
1. Calls the `startSSOFlow()` method with the `strategy` param set to `enterprise_sso` and the `identifier` param set to the user's email address that they provided.
85+
- If authentication is successful, the `setActive()` method is called to set the active session with the new `createdSessionId`.
86+
- If authentication is not successful, you can handle the missing requirements, such as MFA, using the [`signIn`](/docs/references/javascript/sign-in/sign-in) or [`signUp`](/docs/references/javascript/sign-up/sign-up) object returned from `startSSOFlow()`, depending on if the user is signing in or signing up. These objects include properties, like `status`, that can be used to determine the next steps. See the respective linked references for more information.
87+
88+
```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }}
89+
import React, { useEffect, useState } from 'react'
90+
import * as WebBrowser from 'expo-web-browser'
91+
import { useSSO } from '@clerk/clerk-expo'
92+
import { View, Button, TextInput } from 'react-native'
93+
94+
export const useWarmUpBrowser = () => {
95+
useEffect(() => {
96+
// Preloads the browser for Android devices to reduce authentication load time
97+
// See: https://docs.expo.dev/guides/authentication/#improving-user-experience
98+
void WebBrowser.warmUpAsync()
99+
return () => {
100+
// Cleanup: closes browser when component unmounts
101+
void WebBrowser.coolDownAsync()
102+
}
103+
}, [])
104+
}
105+
106+
// Handle any pending authentication sessions
107+
WebBrowser.maybeCompleteAuthSession()
108+
109+
export default function Page() {
110+
useWarmUpBrowser()
111+
112+
const [email, setEmail] = useState('')
113+
114+
// Use the `useSSO()` hook to access the `startSSOFlow()` method
115+
const { startSSOFlow } = useSSO()
116+
117+
const onPress = async () => {
118+
try {
119+
// Start the authentication process by calling `startSSOFlow()`
120+
const { createdSessionId, setActive, signIn, signUp } = await startSSOFlow({
121+
strategy: 'enterprise_sso',
122+
identifier: email,
123+
redirectUrl: '/', // The URL to redirect to after successful authentication
124+
})
125+
126+
// If sign in was successful, set the active session
127+
if (createdSessionId) {
128+
setActive!({ session: createdSessionId })
129+
} else {
130+
// If there is no `createdSessionId`,
131+
// there are missing requirements, such as MFA
132+
// Use the `signIn` or `signUp` returned from `startSSOFlow`
133+
// to handle next steps
134+
}
135+
} catch (err) {
136+
// See https://clerk.com/docs/custom-flows/error-handling
137+
// for more info on error handling
138+
console.error(JSON.stringify(err, null, 2))
139+
}
140+
}
141+
142+
return (
143+
<View>
144+
<TextInput
145+
value={email}
146+
onChangeText={setEmail}
147+
placeholder="Enter email"
148+
placeholderTextColor="#666666"
149+
/>
150+
<Button title="Sign in with SAML" onPress={onPress} />
151+
</View>
152+
)
153+
}
154+
```
77155
</Tab>
78156
</Tabs>

‎docs/custom-flows/oauth-connections.mdx

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,73 @@ You must configure your application instance through the Clerk Dashboard for the
7070
</Tab>
7171

7272
<Tab>
73-
<Include src="_partials/expo/oauth-custom-flow" />
73+
The following example **will both sign up _and_ sign in users**, eliminating the need for a separate sign-up page.
74+
75+
The following example:
76+
77+
1. Accesses the `startSSOFlow()` method using the [`useSSO()`](/docs/references/expo/use-sso) hook.
78+
1. Calls the `startSSOFlow()` method with the `strategy` param set to `oauth_google`, but you can use any of the [supported OAuth strategies](/docs/references/javascript/types/sso#oauth-strategy).
79+
- If authentication is successful, the `setActive()` method is called to set the active session with the new `createdSessionId`.
80+
- If authentication is not successful, you can handle the missing requirements, such as MFA, using the [`signIn`](/docs/references/javascript/sign-in/sign-in) or [`signUp`](/docs/references/javascript/sign-up/sign-up) object returned from `startSSOFlow()`, depending on if the user is signing in or signing up. These objects include properties, like `status`, that can be used to determine the next steps. See the respective linked references for more information.
81+
82+
```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }}
83+
import React, { useCallback, useEffect } from 'react'
84+
import * as WebBrowser from 'expo-web-browser'
85+
import { useSSO } from '@clerk/clerk-expo'
86+
import { View, Button } from 'react-native'
87+
88+
export const useWarmUpBrowser = () => {
89+
useEffect(() => {
90+
// Preloads the browser for Android devices to reduce authentication load time
91+
// See: https://docs.expo.dev/guides/authentication/#improving-user-experience
92+
void WebBrowser.warmUpAsync()
93+
return () => {
94+
// Cleanup: closes browser when component unmounts
95+
void WebBrowser.coolDownAsync()
96+
}
97+
}, [])
98+
}
99+
100+
// Handle any pending authentication sessions
101+
WebBrowser.maybeCompleteAuthSession()
102+
103+
export default function Page() {
104+
useWarmUpBrowser()
105+
106+
// Use the `useSSO()` hook to access the `startSSOFlow()` method
107+
const { startSSOFlow } = useSSO()
108+
109+
const onPress = useCallback(async () => {
110+
try {
111+
// Start the authentication process by calling `startSSOFlow()`
112+
const { createdSessionId, setActive, signIn, signUp } = await startSSOFlow({
113+
strategy: 'oauth_google',
114+
redirectUrl: '/', // The URL to redirect to after successful authentication
115+
})
116+
117+
// If sign in was successful, set the active session
118+
if (createdSessionId) {
119+
setActive!({ session: createdSessionId })
120+
} else {
121+
// If there is no `createdSessionId`,
122+
// there are missing requirements, such as MFA
123+
// Use the `signIn` or `signUp` returned from `startSSOFlow`
124+
// to handle next steps
125+
}
126+
} catch (err) {
127+
// See https://clerk.com/docs/custom-flows/error-handling
128+
// for more info on error handling
129+
console.error(JSON.stringify(err, null, 2))
130+
}
131+
}, [])
132+
133+
return (
134+
<View>
135+
<Button title="Sign in with Google" onPress={onPress} />
136+
</View>
137+
)
138+
}
139+
```
74140
</Tab>
75141

76142
<Tab>

0 commit comments

Comments
 (0)