Fixed separator when only Passkey is enabled

stack-auth · Jan 10, 2025 · 6e4cd8c · 6e4cd8c
1 parent 8cb4f01
commit 6e4cd8c
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/packages/stack/src/components-page/auth-page.tsx b/packages/stack/src/components-page/auth-page.tsx
@@ -85,7 +85,9 @@ function Inner (props: Props) {
     return <PredefinedMessageCard type='signUpDisabled' fullPage={props.fullPage} />;
   }
 
-  const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && project.config.oauthProviders.length > 0;
+  const hasOAuthProviders = project.config.oauthProviders.length > 0;
+  const hasPasskey = (project.config.passkeyEnabled === true && props.type === "sign-in");
+  const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && (hasOAuthProviders || hasPasskey);
 
   return (
     <MaybeFullPage fullPage={!!props.fullPage}>
@@ -114,10 +116,12 @@ function Inner (props: Props) {
             </Typography>
           )}
         </div>
-        <div className='gap-4 flex flex-col items-stretch stack-scope'>
-          <OAuthButtonGroup type={props.type} mockProject={props.mockProject} />
-          {project.config.passkeyEnabled && props.type === "sign-in" && <PasskeyButton type={props.type} />}
-        </div>
+        {(hasOAuthProviders || hasPasskey) && (
+          <div className='gap-4 flex flex-col items-stretch stack-scope'>
+            {hasOAuthProviders && <OAuthButtonGroup type={props.type} mockProject={props.mockProject} />}
+            {hasPasskey && <PasskeyButton type={props.type} />}
+          </div>
+        )}
 
         {enableSeparator && <SeparatorWithText text={t('Or continue with')} />}
         {project.config.credentialEnabled && project.config.magicLinkEnabled ? (
@@ -139,9 +143,12 @@ function Inner (props: Props) {
           props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>
         ) : project.config.magicLinkEnabled ? (
           <MagicLinkSignIn/>
-        ) : project.config.oauthProviders.length === 0 ? <Typography variant={"destructive"} className="text-center">{t("No authentication method enabled.")}</Typography> : null}
+        ) : !(hasOAuthProviders || hasPasskey) ? <Typography variant={"destructive"} className="text-center">{t("No authentication method enabled.")}</Typography> : null}
         {props.extraInfo && (
-          <div className='flex flex-col items-center text-center text-sm text-gray-500 mt-2'>
+          <div className={cn('flex flex-col items-center text-center text-sm text-gray-500', {
+            'mt-2': project.config.credentialEnabled || project.config.magicLinkEnabled,
+            'mt-6': !(project.config.credentialEnabled || project.config.magicLinkEnabled),
+          })}>
             <div>{props.extraInfo}</div>
           </div>
         )}