Skip to content

Commit ce05a61

Browse files
LauraBeatrisalexisintech
LauraBeatris
and
alexisintech
authored
(expo/use-sso) Add redirectUrl parameter to startSSOFlow; remove expo partials (#2005)
Co-authored-by: Alexis Aguilar <[email protected]>
1 parent e0c7a5e commit ce05a61

File tree

5 files changed

+157
-146
lines changed

5 files changed

+157
-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: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,86 @@ 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. Uses the [`useSSO()`](/docs/references/expo/use-sso) hook to access the `startSSOFlow()` method.
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. The optional `redirect_url` param is also set in order to redirect the user once they finish the authentication flow.
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 * as AuthSession from 'expo-auth-session'
92+
import { useSSO } from '@clerk/clerk-expo'
93+
import { View, Button, TextInput } from 'react-native'
94+
95+
export const useWarmUpBrowser = () => {
96+
useEffect(() => {
97+
// Preloads the browser for Android devices to reduce authentication load time
98+
// See: https://docs.expo.dev/guides/authentication/#improving-user-experience
99+
void WebBrowser.warmUpAsync()
100+
return () => {
101+
// Cleanup: closes browser when component unmounts
102+
void WebBrowser.coolDownAsync()
103+
}
104+
}, [])
105+
}
106+
107+
// Handle any pending authentication sessions
108+
WebBrowser.maybeCompleteAuthSession()
109+
110+
export default function Page() {
111+
useWarmUpBrowser()
112+
113+
const [email, setEmail] = useState('')
114+
115+
// Use the `useSSO()` hook to access the `startSSOFlow()` method
116+
const { startSSOFlow } = useSSO()
117+
118+
const onPress = async () => {
119+
try {
120+
// Start the authentication process by calling `startSSOFlow()`
121+
const { createdSessionId, setActive, signIn, signUp } = await startSSOFlow({
122+
strategy: 'enterprise_sso',
123+
identifier: email,
124+
// Defaults to current path
125+
redirectUrl: AuthSession.makeRedirectUri(),
126+
})
127+
128+
// If sign in was successful, set the active session
129+
if (createdSessionId) {
130+
setActive!({ session: createdSessionId })
131+
} else {
132+
// If there is no `createdSessionId`,
133+
// there are missing requirements, such as MFA
134+
// Use the `signIn` or `signUp` returned from `startSSOFlow`
135+
// to handle next steps
136+
}
137+
} catch (err) {
138+
// See https://clerk.com/docs/custom-flows/error-handling
139+
// for more info on error handling
140+
console.error(JSON.stringify(err, null, 2))
141+
}
142+
}
143+
144+
return (
145+
<View>
146+
<TextInput
147+
value={email}
148+
onChangeText={setEmail}
149+
placeholder="Enter email"
150+
placeholderTextColor="#666666"
151+
/>
152+
<Button title="Sign in with SAML" onPress={onPress} />
153+
</View>
154+
)
155+
}
156+
```
77157
</Tab>
78158
</Tabs>

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

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,75 @@ 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. Uses the [`useSSO()`](/docs/references/expo/use-sso) hook to access the `startSSOFlow()` method.
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). The optional `redirect_url` param is also set in order to redirect the user once they finish the authentication flow.
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 * as AuthSession from 'expo-auth-session'
86+
import { useSSO } from '@clerk/clerk-expo'
87+
import { View, Button } from 'react-native'
88+
89+
export const useWarmUpBrowser = () => {
90+
useEffect(() => {
91+
// Preloads the browser for Android devices to reduce authentication load time
92+
// See: https://docs.expo.dev/guides/authentication/#improving-user-experience
93+
void WebBrowser.warmUpAsync()
94+
return () => {
95+
// Cleanup: closes browser when component unmounts
96+
void WebBrowser.coolDownAsync()
97+
}
98+
}, [])
99+
}
100+
101+
// Handle any pending authentication sessions
102+
WebBrowser.maybeCompleteAuthSession()
103+
104+
export default function Page() {
105+
useWarmUpBrowser()
106+
107+
// Use the `useSSO()` hook to access the `startSSOFlow()` method
108+
const { startSSOFlow } = useSSO()
109+
110+
const onPress = useCallback(async () => {
111+
try {
112+
// Start the authentication process by calling `startSSOFlow()`
113+
const { createdSessionId, setActive, signIn, signUp } = await startSSOFlow({
114+
strategy: 'oauth_google',
115+
// Defaults to current path
116+
redirectUrl: AuthSession.makeRedirectUri(),
117+
})
118+
119+
// If sign in was successful, set the active session
120+
if (createdSessionId) {
121+
setActive!({ session: createdSessionId })
122+
} else {
123+
// If there is no `createdSessionId`,
124+
// there are missing requirements, such as MFA
125+
// Use the `signIn` or `signUp` returned from `startSSOFlow`
126+
// to handle next steps
127+
}
128+
} catch (err) {
129+
// See https://clerk.com/docs/custom-flows/error-handling
130+
// for more info on error handling
131+
console.error(JSON.stringify(err, null, 2))
132+
}
133+
}, [])
134+
135+
return (
136+
<View>
137+
<Button title="Sign in with Google" onPress={onPress} />
138+
</View>
139+
)
140+
}
141+
```
74142
</Tab>
75143

76144
<Tab>

‎docs/references/expo/use-sso.mdx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,13 @@ function startSSOFlow(startSSOFlowParams: StartSSOFlowParams): Promise<StartSSOF
3939

4040
---
4141

42+
- `redirectUrl?`
43+
- `string`
44+
45+
The full URL or path to redirect to after the SSO flow is complete. If not specified, defaults to `sso-callback` path.
46+
47+
---
48+
4249
- `unsafeMetadata?`
4350
- [`SignUpUnsafeMetadata`](/docs/references/javascript/types/metadata#sign-up-unsafe-metadata)
4451

0 commit comments

Comments
 (0)