From 00b9e250f497231c3b0faf39215ca4c418e3d514 Mon Sep 17 00:00:00 2001
From: hopleus <124590925+hopleus@users.noreply.github.com>
Date: Mon, 27 Jan 2025 23:33:26 +0300
Subject: [PATCH] Fixed separator when only Passkey is enabled (#389)

Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
---
 .../stack/src/components-page/auth-page.tsx   | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/stack/src/components-page/auth-page.tsx b/packages/stack/src/components-page/auth-page.tsx
index ca4d8feec..4fa0c2458 100644
--- 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>
         )}