Skip to content

Commit 03d1686

Browse files
mmabroukmmabrouk
committed
fix(frontend): fix auth upgrade flow regression and improve UI
- Fix regression where auth methods were hidden during auth upgrade - Show social auth buttons when auth upgrade is required - Hide email-based flows during auth upgrade (user needs social/SSO) - Move org switch and sign out options to bottom with cleaner layout - Change 'workspace' to 'organization' in copy - Fix unused variable lint error in SendOTP component
1 parent bb37034 commit 03d1686

File tree

2 files changed

+56
-50
lines changed

2 files changed

+56
-50
lines changed

‎web/oss/src/components/pages/auth/SendOTP/index.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -85,11 +85,8 @@ const SendOTP = ({
8585
await clearLoginAttemptInfo()
8686
setMessage({message: "Verification successful", type: "success"})
8787
// Clear selected org via atom to keep storage in sync
88-
const {createdNewRecipeUser, user} = response
89-
await handleAuthSuccess(
90-
{createdNewRecipeUser: true, user},
91-
{isInvitedUser},
92-
)
88+
const {createdNewRecipeUser: _createdNewRecipeUser, user} = response
89+
await handleAuthSuccess({createdNewRecipeUser: true, user}, {isInvitedUser})
9390
} else if (response.status === "INCORRECT_USER_INPUT_CODE_ERROR") {
9491
const trileLeft =
9592
response.maximumCodeInputAttempts - response.failedCodeInputAttemptCount

‎web/oss/src/pages/auth/[[...path]].tsx‎

Lines changed: 54 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,13 @@ const Auth = () => {
104104
isAuthenticated && inviteEmail && currentUserEmail && inviteEmail !== currentUserEmail
105105

106106
// Derived state: whether to show the normal auth flow (not blocked by special states)
107-
const shouldShowNormalAuthFlow = !hasInviteEmailMismatch && !isAuthUpgradeRequired
107+
// Note: We still show auth methods when isAuthUpgradeRequired because the user needs
108+
// to re-authenticate with the required method. Only hide for invite email mismatch.
109+
const shouldShowNormalAuthFlow = !hasInviteEmailMismatch
110+
111+
// When auth upgrade is required, we show social auth but hide email-based flows
112+
// since the user needs to authenticate with a different method (social/SSO)
113+
const shouldShowEmailFlow = shouldShowNormalAuthFlow && !isAuthUpgradeRequired
108114

109115
// Filter out the current org that requires upgrade - user can navigate to other orgs
110116
const otherOrgs = useMemo(() => {
@@ -489,45 +495,12 @@ const Auth = () => {
489495

490496
{/* Show auth upgrade required message prominently */}
491497
{isAuthUpgradeRequired && authMessage && !hasInviteEmailMismatch && (
492-
<div className="flex flex-col gap-4">
493-
<Alert
494-
showIcon
495-
message="Additional authentication required"
496-
description={authMessage}
497-
type="warning"
498-
/>
499-
{isAuthenticated && otherOrgs.length > 0 && (
500-
<div className="flex flex-col gap-2 p-4 bg-[#f5f7fa] rounded-lg">
501-
<Text className="text-sm text-[#586673]">
502-
Can't authenticate with the required method? You can
503-
switch to a different workspace:
504-
</Text>
505-
<Select
506-
placeholder="Select an organization"
507-
className="w-full"
508-
options={orgSelectOptions}
509-
onChange={(value) => {
510-
router.replace(`/w/${value}`)
511-
}}
512-
/>
513-
</div>
514-
)}
515-
{isAuthenticated && (
516-
<Button
517-
type="link"
518-
className="text-center"
519-
onClick={() => {
520-
signOut()
521-
.then(() => {
522-
router.replace("/auth")
523-
})
524-
.catch(console.error)
525-
}}
526-
>
527-
Sign out and use a different account
528-
</Button>
529-
)}
530-
</div>
498+
<Alert
499+
showIcon
500+
message="Additional authentication required"
501+
description={authMessage}
502+
type="warning"
503+
/>
531504
)}
532505

533506
{/* Step 1: Show social auth options (if configured) */}
@@ -540,7 +513,9 @@ const Auth = () => {
540513
setIsLoading={setIsSocialAuthLoading}
541514
providers={providersToShow}
542515
/>
543-
{showEmailEntry && <Divider className="!m-0">or</Divider>}
516+
{showEmailEntry && shouldShowEmailFlow && (
517+
<Divider className="!m-0">or</Divider>
518+
)}
544519
</>
545520
)}
546521

@@ -549,7 +524,7 @@ const Auth = () => {
549524
!emailSubmitted &&
550525
!socialAvailable &&
551526
!isLoginCodeVisible &&
552-
shouldShowNormalAuthFlow && (
527+
shouldShowEmailFlow && (
553528
<EmailFirst
554529
email={email}
555530
setEmail={setEmail}
@@ -563,7 +538,7 @@ const Auth = () => {
563538
!emailSubmitted &&
564539
socialAvailable &&
565540
!showEmailForm &&
566-
shouldShowNormalAuthFlow && (
541+
shouldShowEmailFlow && (
567542
<Button
568543
type="link"
569544
onClick={() => setShowEmailForm(true)}
@@ -578,7 +553,7 @@ const Auth = () => {
578553
socialAvailable &&
579554
showEmailForm &&
580555
!isLoginCodeVisible &&
581-
shouldShowNormalAuthFlow && (
556+
shouldShowEmailFlow && (
582557
<EmailFirst
583558
email={email}
584559
setEmail={setEmail}
@@ -589,7 +564,7 @@ const Auth = () => {
589564
)}
590565

591566
{/* Step 3: After email discovery, show available methods */}
592-
{emailSubmitted && discoveryComplete && shouldShowNormalAuthFlow && (
567+
{emailSubmitted && discoveryComplete && shouldShowEmailFlow && (
593568
<>
594569
{/* Show OTP flow if available */}
595570
{emailOtpAvailable && !isLoginCodeVisible && (
@@ -669,6 +644,40 @@ const Auth = () => {
669644
)}
670645
</>
671646
)}
647+
648+
{/* Auth upgrade: show organization switch and sign out options */}
649+
{isAuthUpgradeRequired && isAuthenticated && !hasInviteEmailMismatch && (
650+
<div className="flex flex-col gap-3 pt-2 border-t border-[#e5e7eb]">
651+
{otherOrgs.length > 0 && (
652+
<div className="flex flex-col gap-2">
653+
<Text className="text-sm text-[#586673]">
654+
Or switch to a different organization:
655+
</Text>
656+
<Select
657+
placeholder="Select an organization"
658+
className="w-full"
659+
options={orgSelectOptions}
660+
onChange={(value) => {
661+
router.replace(`/w/${value}`)
662+
}}
663+
/>
664+
</div>
665+
)}
666+
<Button
667+
type="link"
668+
className="text-center p-0"
669+
onClick={() => {
670+
signOut()
671+
.then(() => {
672+
router.replace("/auth")
673+
})
674+
.catch(console.error)
675+
}}
676+
>
677+
Sign out and use a different account
678+
</Button>
679+
</div>
680+
)}
672681
</div>
673682

674683
{isDemo() && !isLoginCodeVisible && shouldShowNormalAuthFlow && (

0 commit comments

Comments
 (0)