Skip to content

Commit 36b03dd

Browse files
tmilewskitmilewski
authored
chore(elements): Align sign-in/up; Handle multiple social providers (clerk#2550)
* chore(elements): Align sign-in/up; Handle multiple social provider contexts * chore(elements): Remove xstate-layout comment * chore(elements): Apply PR comments * chore(elements): Remove guard
1 parent 00687a4 commit 36b03dd

10 files changed

Lines changed: 242 additions & 212 deletions

File tree

‎.changeset/happy-trees-burn.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,20 @@ import {
99
SignIn,
1010
SignInFactorOne,
1111
SignInFactorTwo,
12+
SignInSocialProviders,
1213
SignInSSOCallback,
1314
SignInStart,
1415
SignInStrategies,
1516
SignInStrategy,
16-
SocialProviders,
1717
Submit,
1818
} from '@clerk/elements';
1919
import clsx from 'clsx';
2020
import Image from 'next/image';
2121
import type { CSSProperties } from 'react';
2222
import { forwardRef } from 'react';
2323

24-
import { Debug } from '@/components/debug';
2524
import { H1, H2, H3, HR, P } from '@/components/design';
25+
import { SignInDebug } from '@/components/sign-in-debug';
2626

2727
const BUTTON_BGS: Record<string, string> = {
2828
github: 'rgba(23 23 23)',
@@ -57,7 +57,7 @@ export default function SignInPage() {
5757
<div className='flex flex-col items-center justify-center gap-12'>
5858
<H1>START</H1>
5959
<div className='flex flex-col gap-3'>
60-
<SocialProviders
60+
<SignInSocialProviders
6161
render={provider => {
6262
return (
6363
<button
@@ -291,7 +291,7 @@ export default function SignInPage() {
291291
<SignInSSOCallback />
292292
</div>
293293

294-
<Debug />
294+
<SignInDebug />
295295
</SignIn>
296296
);
297297
}

‎packages/elements/examples/nextjs/components/debug.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ function LogButtons() {
3434
</Button>
3535
<Button onClick={() => console.dir(ref.getSnapshot().context)}>Log Context</Button>
3636
<Button onClick={() => console.dir(ref.getSnapshot().context.currentFactor)}>Log Current Factor</Button>
37-
<Button onClick={() => console.dir(ref.getSnapshot().context.environment)}>Log Environment</Button>
37+
<Button onClick={() => console.dir(ref.getSnapshot().context.__unstable__environment)}>Log Environment</Button>
3838
<Button onClick={() => console.dir(ref.getSnapshot().context.resource)}>Log Resource</Button>
3939
</>
4040
);

‎packages/elements/examples/nextjs/components/design.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,13 @@ export const HR = (props: ComponentPropsWithoutRef<'hr'>) => (
3434
{...props}
3535
/>
3636
);
37+
38+
export function Button(props: React.ComponentProps<'button'>) {
39+
return (
40+
<button
41+
className='px-4 py-2 b-1 bg-blue-950 bg-opacity-20 hover:bg-opacity-10 active:bg-opacity-5 rounded-md dark:bg-opacity-100 dark:hover:bg-opacity-80 dark:active:bg-opacity-50 transition'
42+
type='button'
43+
{...props}
44+
/>
45+
);
46+
}

‎packages/elements/examples/nextjs/components/sign-in-debug.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
'use client';
2+
3+
import { SignedIn } from '@clerk/clerk-react';
4+
import { useSignInFlow, useSignInFlowSelector } from '@clerk/elements';
5+
import { SignOutButton } from '@clerk/nextjs';
6+
7+
import { Button } from './design';
8+
9+
function SignInActiveState() {
10+
const activeState = useSignInFlowSelector(state => state.value);
11+
const state = activeState ? (typeof activeState === 'string' ? activeState : JSON.stringify({ ...activeState })) : '';
12+
13+
return (
14+
<div className='flex gap-4 bottom-0 w-screen justify-center'>
15+
<pre suppressHydrationWarning>Active State: {state}</pre>
16+
</div>
17+
);
18+
}
19+
20+
export function SignInLogButtons() {
21+
const ref = useSignInFlow();
22+
23+
return (
24+
<>
25+
<Button onClick={() => console.dir(ref.getSnapshot().context.formRef.getSnapshot().context.fields)}>
26+
Log Fields
27+
</Button>
28+
<Button onClick={() => console.dir(ref.getSnapshot().context)}>Log Context</Button>
29+
<Button onClick={() => console.dir(ref.getSnapshot().context.currentFactor)}>Log Current Factor</Button>
30+
<Button onClick={() => console.dir(ref.getSnapshot().context.clerk.__unstable__environment)}>
31+
Log Environment
32+
</Button>
33+
<Button onClick={() => console.dir(ref.getSnapshot().context.resource)}>Log Resource</Button>
34+
</>
35+
);
36+
}
37+
38+
export function SignInDebug() {
39+
return (
40+
<div className='absolute text-xs flex flex-col p-4 gap-4 bottom-0 w-screen justify-center bg-secondary border-tertiary border-t'>
41+
<SignInActiveState />
42+
43+
<div className='flex gap-4 bottom-0 w-screen justify-center'>
44+
<SignInLogButtons />
45+
<SignedIn>
46+
<SignOutButton redirectUrl='/sign-in'>
47+
<Button>Sign Out</Button>
48+
</SignOutButton>
49+
</SignedIn>
50+
</div>
51+
</div>
52+
);
53+
}

‎packages/elements/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import { useNextRouter } from '~/react/router/next';
44

55
/** Common Components */
66
export { Errors, Field, FieldState, Form, Input, Label, Submit } from '~/react/common/form';
7-
export { SocialProviders } from '~/react/common/social-providers';
87

98
/** Sign In Components */
109
export {
1110
SignIn,
1211
SignInStart,
1312
SignInFactorOne,
1413
SignInFactorTwo,
14+
SignInSocialProviders,
1515
SignInSSOCallback,
1616
SignInStrategies,
1717
SignInStrategy,

‎packages/elements/src/internals/machines/sign-in.actors.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type {
22
AttemptFirstFactorParams,
33
AuthenticateWithRedirectParams,
4-
EnvironmentResource,
54
HandleOAuthCallbackParams,
65
HandleSamlCallbackParams,
76
PrepareFirstFactorParams,
@@ -43,18 +42,17 @@ export const createSignIn = fromPromise<SignInResource, CreateSignInInput>(({ in
4342
// ================= authenticateWithRedirect ================= //
4443

4544
export type AuthenticateWithRedirectInput = WithClerk<{
46-
environment: EnvironmentResource | undefined;
4745
strategy: AuthenticateWithRedirectParams['strategy'] | undefined;
4846
}>;
4947

5048
export const authenticateWithRedirect = fromPromise<void, AuthenticateWithRedirectInput>(
51-
async ({ input: { clerk, environment, strategy } }) => {
52-
assertIsDefined(environment);
49+
async ({ input: { clerk, strategy } }) => {
50+
assertIsDefined(clerk.__unstable__environment);
5351
assertIsDefined(strategy);
5452

5553
return clerk.client.signIn.authenticateWithRedirect({
5654
strategy,
57-
redirectUrl: `${environment.displayConfig.signInUrl}/sso-callback`,
55+
redirectUrl: `${clerk.__unstable__environment.displayConfig.signInUrl}/sso-callback`,
5856
redirectUrlComplete: clerk.buildAfterSignInUrl(),
5957
});
6058
},

‎packages/elements/src/internals/machines/sign-in.context.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const StrategiesContext = createContext<StrategiesContextValue>({
4444
/**
4545
* Selects the clerk environment
4646
*/
47-
const clerkEnvironmentSelector = (state: SnapshotState) => state.context.environment;
47+
const clerkEnvironmentSelector = (state: SnapshotState) => state.context.clerk.__unstable__environment;
4848

4949
/**
5050
* Selects the clerk environment
@@ -96,7 +96,7 @@ export function useSignInStrategies(_preferred?: SignInStrategy) {
9696
/**
9797
* Provides the onClick handler for oauth
9898
*/
99-
export const useThirdPartyProviders = () => {
99+
export const useSignInThirdPartyProviders = () => {
100100
const ref = useSignInFlow();
101101
const env = useSignInFlowSelector(clerkEnvironmentSelector);
102102
const providers = useMemo(() => env && getEnabledThirdPartyProviders(env), [env]);

0 commit comments

Comments
 (0)