Skip to content

Commit 763808b

Browse files
LauraBeatrisLauraBeatris
authored
chore(ui): Add wizard steps to <ConfigureSSO /> (#8468)
1 parent 8b23c2e commit 763808b

19 files changed

Lines changed: 1213 additions & 11 deletions

File tree

‎.changeset/lucky-tables-learn.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@clerk/ui': patch
3+
---
4+
5+
Add wizard steps for the `<__experimental_ConfigureSSO />` component

‎packages/clerk-js/src/core/clerk.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1457,6 +1457,15 @@ export class Clerk implements ClerkInterface {
14571457
return;
14581458
}
14591459

1460+
if (noUserExists(this)) {
1461+
if (this.#instanceType === 'development') {
1462+
throw new ClerkRuntimeError(warnings.cannotRenderConfigureSSOComponentWhenUserDoesNotExist, {
1463+
code: CANNOT_RENDER_USER_MISSING_ERROR_CODE,
1464+
});
1465+
}
1466+
return;
1467+
}
1468+
14601469
this.assertComponentsReady(this.#clerkUI);
14611470
const component = 'ConfigureSSO';
14621471
void this.#clerkUI

‎packages/shared/src/internal/clerk-js/warnings.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,8 @@ const warnings = {
6464
'The <APIKeys/> component cannot be rendered when organization API keys are disabled. Since organization API keys are disabled, this is no-op.',
6565
cannotRenderOAuthConsentComponentWhenUserDoesNotExist:
6666
'<OAuthConsent/> cannot render unless a user is signed in. Since no user is signed in, this is no-op.',
67+
cannotRenderConfigureSSOComponentWhenUserDoesNotExist:
68+
'<ConfigureSSO/> cannot render unless a user is signed in. Since no user is signed in, this is no-op.',
6769
cannotRenderConfigureSSOComponentWhenDisabled:
6870
'The <ConfigureSSO/> component cannot be rendered when self-serve SSO is disabled. Visit `https://dashboard.clerk.com` to enable the feature. Since self-serve SSO is disabled, this is no-op.',
6971
cannotRenderConfigureSSOComponentWhenEmailAddressDisabled:

‎packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx‎

Lines changed: 102 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
import { useOrganization } from '@clerk/shared/react/index';
1+
import { __internal_useUserEnterpriseConnections, useOrganization, useUser } from '@clerk/shared/react';
22
import type { __experimental_ConfigureSSOProps } from '@clerk/shared/types';
33
import React from 'react';
44

55
import { useEnvironment, withCoreUserGuard } from '@/contexts';
6-
import { Box, Col, Flex, Flow, Icon, localizationKeys, Text, useAppearance } from '@/customizables';
6+
import { Box, Col, descriptors, Flex, Flow, Icon, localizationKeys, Text, useAppearance } from '@/customizables';
77
import { ApplicationLogo } from '@/elements/ApplicationLogo';
88
import { withCardStateProvider } from '@/elements/contexts';
99
import { NavBar, NavbarContextProvider } from '@/elements/Navbar';
1010
import { ProfileCard } from '@/elements/ProfileCard';
1111
import { BoxIcon } from '@/icons';
1212
import { Route, Switch } from '@/router';
1313

14+
import { ConfigureSSOFlowProvider } from './ConfigureSSOContext';
15+
import { ConfigureCreateApp, ConfirmationStep, ProvideEmail, TestConfigurationStep, VerifyDomainStep } from './steps';
16+
import { ConfigureSSOWizard } from './wizard';
17+
1418
const ConfigureSSOInternal = () => {
1519
return (
1620
<Flow.Root flow='configureSSO'>
17-
<Flow.Part>
18-
<Switch>
19-
<Route>
20-
<AuthenticatedContent />
21-
</Route>
22-
</Switch>
23-
</Flow.Part>
21+
<Switch>
22+
<Route>
23+
<AuthenticatedContent />
24+
</Route>
25+
</Switch>
2426
</Flow.Root>
2527
);
2628
};
@@ -32,6 +34,11 @@ const AuthenticatedContent = withCoreUserGuard(() => {
3234
const { parsedOptions } = useAppearance();
3335
const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);
3436

37+
const { data: enterpriseConnections, isLoading: isLoadingEnterpriseConnections } =
38+
__internal_useUserEnterpriseConnections({ enabled: true });
39+
// Currently FAPI only supports one enterprise connection per user
40+
const enterpriseConnection = enterpriseConnections?.[0];
41+
3542
return (
3643
<ProfileCard.Root
3744
sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}
@@ -89,12 +96,97 @@ const AuthenticatedContent = withCoreUserGuard(() => {
8996
routes={[]}
9097
contentRef={contentRef}
9198
/>
92-
<ProfileCard.Content contentRef={contentRef} />
99+
<Col
100+
ref={contentRef}
101+
elementDescriptor={descriptors.scrollBox}
102+
sx={t => ({
103+
backgroundColor: t.colors.$colorBackground,
104+
position: 'relative',
105+
borderRadius: t.radii.$lg,
106+
width: '100%',
107+
overflow: 'hidden',
108+
borderWidth: t.borderWidths.$normal,
109+
borderStyle: t.borderStyles.$solid,
110+
borderColor: t.colors.$borderAlpha150,
111+
marginBlock: '-1px',
112+
marginInlineEnd: '-1px',
113+
flex: 1,
114+
})}
115+
>
116+
<ConfigureSSOFlowProvider
117+
enterpriseConnection={enterpriseConnection}
118+
isLoading={isLoadingEnterpriseConnections}
119+
>
120+
<ConfigureSSOSteps />
121+
</ConfigureSSOFlowProvider>
122+
</Col>
93123
</NavbarContextProvider>
94124
</ProfileCard.Root>
95125
);
96126
});
97127

128+
const ConfigureSSOSteps = () => {
129+
const { user } = useUser();
130+
131+
const primaryEmailAddress = user?.primaryEmailAddress;
132+
133+
return (
134+
<ConfigureSSOWizard>
135+
<ConfigureSSOWizard.Step
136+
id='verify-email-domain'
137+
path='verify-email-domain'
138+
label='Verify domain'
139+
>
140+
<ConfigureSSOWizard>
141+
{!primaryEmailAddress && (
142+
<ConfigureSSOWizard.Step
143+
id='provide-email'
144+
path='provide-email'
145+
>
146+
<ProvideEmail />
147+
</ConfigureSSOWizard.Step>
148+
)}
149+
<ConfigureSSOWizard.Step
150+
id='verify-domain'
151+
path='verify-domain'
152+
>
153+
<VerifyDomainStep />
154+
</ConfigureSSOWizard.Step>
155+
</ConfigureSSOWizard>
156+
</ConfigureSSOWizard.Step>
157+
<ConfigureSSOWizard.Step
158+
id='configure'
159+
path='configure'
160+
label='Configure'
161+
>
162+
<ConfigureSSOWizard>
163+
{/* TODO: Implement configure steps */}
164+
<ConfigureSSOWizard.Step
165+
id='create-app'
166+
path='create-app'
167+
>
168+
<ConfigureCreateApp />
169+
</ConfigureSSOWizard.Step>
170+
</ConfigureSSOWizard>
171+
</ConfigureSSOWizard.Step>
172+
<ConfigureSSOWizard.Step
173+
id='test'
174+
path='test'
175+
label='Test'
176+
>
177+
<TestConfigurationStep />
178+
</ConfigureSSOWizard.Step>
179+
<ConfigureSSOWizard.Step
180+
id='confirmation'
181+
path='confirmation'
182+
label='Confirmation'
183+
>
184+
<ConfirmationStep />
185+
</ConfigureSSOWizard.Step>
186+
</ConfigureSSOWizard>
187+
);
188+
};
189+
98190
const OrganizationSidebarSubtitle = () => {
99191
const { organization } = useOrganization();
100192

‎packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import type { EnterpriseConnectionResource } from '@clerk/shared/types';
2+
import React, { type PropsWithChildren } from 'react';
3+
4+
/**
5+
* Shared form state for the ConfigureSSO wizard, persisted across steps
6+
*/
7+
export interface ConfigureSSOData {
8+
/**
9+
* The enterprise connection from the user's primary email address domain
10+
*/
11+
enterpriseConnection: EnterpriseConnectionResource | undefined;
12+
}
13+
14+
export interface ConfigureSSOContextValue extends ConfigureSSOData {
15+
/**
16+
* `true` while the parent is still fetching the user's enterprise
17+
* connection
18+
*/
19+
isLoading: boolean;
20+
}
21+
22+
interface ConfigureSSOFlowProviderProps {
23+
enterpriseConnection: EnterpriseConnectionResource | undefined;
24+
isLoading: boolean;
25+
}
26+
27+
const ConfigureSSOFlowContext = React.createContext<ConfigureSSOContextValue | null>(null);
28+
ConfigureSSOFlowContext.displayName = 'ConfigureSSOFlowContext';
29+
30+
export const ConfigureSSOFlowProvider = ({
31+
enterpriseConnection,
32+
isLoading,
33+
children,
34+
}: PropsWithChildren<ConfigureSSOFlowProviderProps>): JSX.Element => {
35+
const value = React.useMemo<ConfigureSSOContextValue>(
36+
() => ({
37+
enterpriseConnection,
38+
isLoading,
39+
}),
40+
[enterpriseConnection, isLoading],
41+
);
42+
43+
return <ConfigureSSOFlowContext.Provider value={value}>{children}</ConfigureSSOFlowContext.Provider>;
44+
};
45+
46+
export const useConfigureSSOFlow = (): ConfigureSSOContextValue => {
47+
const ctx = React.useContext(ConfigureSSOFlowContext);
48+
if (!ctx) {
49+
throw new Error('useConfigureSSOFlow called outside <ConfigureSSOFlowProvider>.');
50+
}
51+
return ctx;
52+
};

‎packages/ui/src/components/ConfigureSSO/steps/ConfigureCreateAppStep.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Flow, Text } from '@/customizables';
2+
3+
import { useConfigureSSOWizard, useRegisterContinueAction } from '../wizard';
4+
import { StepLayout } from './StepLayout';
5+
6+
export const ConfigureCreateApp = (): JSX.Element => {
7+
const { goNext } = useConfigureSSOWizard();
8+
9+
useRegisterContinueAction({
10+
handler: () => goNext(),
11+
});
12+
13+
return (
14+
<Flow.Part part='configureCreateApp'>
15+
<StepLayout
16+
title='Configure Okta Workforce'
17+
subtitle='Create a new enterprise application in your Okta Dashboard.'
18+
>
19+
<Text>UI goes here</Text>
20+
</StepLayout>
21+
</Flow.Part>
22+
);
23+
};

‎packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Flow, Text } from '@/customizables';
2+
3+
import { StepLayout } from './StepLayout';
4+
5+
export const ConfirmationStep = (): JSX.Element => {
6+
return (
7+
<Flow.Part part='sso-confirmation'>
8+
<StepLayout>
9+
<Text>UI goes here</Text>
10+
</StepLayout>
11+
</Flow.Part>
12+
);
13+
};

‎packages/ui/src/components/ConfigureSSO/steps/ProvideEmailStep.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Flow, Text } from '@/customizables';
2+
3+
import { useConfigureSSOWizard, useRegisterContinueAction } from '../wizard';
4+
import { StepLayout } from './StepLayout';
5+
6+
export const ProvideEmail = (): JSX.Element => {
7+
const { goNext } = useConfigureSSOWizard();
8+
9+
useRegisterContinueAction({
10+
handler: () => {
11+
return goNext();
12+
},
13+
});
14+
15+
return (
16+
<Flow.Part part='provideEmail'>
17+
<StepLayout
18+
title='Verify your domain'
19+
subtitle='Verify the domain you want to enable the enterprise connection on.'
20+
>
21+
<Text as='p'>UI goes here</Text>
22+
</StepLayout>
23+
</Flow.Part>
24+
);
25+
};

‎packages/ui/src/components/ConfigureSSO/steps/StepLayout.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react';
2+
3+
import { Col, Flex, Heading, Text } from '@/customizables';
4+
5+
import { ConfigureSSOWizard } from '../wizard';
6+
7+
interface StepLayoutProps {
8+
title?: React.ReactNode;
9+
subtitle?: React.ReactNode;
10+
children: React.ReactNode;
11+
}
12+
13+
/**
14+
* Renders the title row (with the Wizard's Step X/Y badge) on top, a divider, and the step body
15+
* underneath. Each individual step file owns the body content
16+
*
17+
* The Step X/Y badge is rendered via `ConfigureSSOWizard.StepIndicator`,
18+
* which self-hides on steps that have no inner sub-steps
19+
*/
20+
export const StepLayout = ({ title, subtitle, children }: StepLayoutProps): JSX.Element => {
21+
return (
22+
<Col
23+
sx={{
24+
flex: 1,
25+
minHeight: 0,
26+
}}
27+
>
28+
<Flex
29+
align='center'
30+
justify='between'
31+
sx={theme => ({
32+
gap: theme.space.$4,
33+
padding: theme.space.$5,
34+
})}
35+
>
36+
{title ? (
37+
<Col sx={theme => ({ gap: theme.space.$1, minWidth: 0 })}>
38+
<Heading
39+
textVariant='h3'
40+
sx={theme => ({ color: theme.colors.$colorForeground, fontSize: theme.fontSizes.$lg })}
41+
>
42+
{title}
43+
</Heading>
44+
45+
{subtitle ? (
46+
<Text
47+
as='p'
48+
variant='body'
49+
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
50+
>
51+
{subtitle}
52+
</Text>
53+
) : null}
54+
</Col>
55+
) : null}
56+
<ConfigureSSOWizard.StepIndicator />
57+
</Flex>
58+
<Col
59+
sx={theme => ({
60+
flex: 1,
61+
paddingInline: theme.space.$5,
62+
overflowY: 'auto',
63+
})}
64+
>
65+
{children}
66+
</Col>
67+
</Col>
68+
);
69+
};

‎packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Flow, Text } from '@/customizables';
2+
3+
import { StepLayout } from './StepLayout';
4+
5+
export const TestConfigurationStep = (): JSX.Element => {
6+
return (
7+
<Flow.Part part='test-sso'>
8+
<StepLayout
9+
title='Test your SSO connection'
10+
subtitle='Test your SSO configuration to verify you can successfully authenticate via your identity provider'
11+
>
12+
<Text>UI goes here</Text>
13+
</StepLayout>
14+
</Flow.Part>
15+
);
16+
};

0 commit comments

Comments
 (0)