feat(auth): add email-first sign-in

apps/storybook/stories/SignInForm.stories.tsx

@@ -1,5 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/nextjs';
 import { SignInForm } from '@/components/auth/SignInForm';
+import { orderNewAccountProviders } from '@/lib/auth/sign-in-methods';
+import { ProdNonSSOAuthProviders } from '@/lib/auth/provider-metadata';
+
+// Mirrors discovery for an eligible unknown email, including Google-first presentation.
+const eligibleNewAccountProviders = orderNewAccountProviders(ProdNonSSOAuthProviders);
 
 const meta: Meta<typeof SignInForm> = {
   title: 'Auth/SignInForm',
@@ -12,8 +17,8 @@ const meta: Meta<typeof SignInForm> = {
     isSignUp: false,
     error: undefined,
     allowFakeLogin: false,
-    title: undefined,
-    subtitle: undefined,
+    title: 'Welcome.',
+    subtitle: 'Sign in or create an account to get started',
   },
 };
 
@@ -34,6 +39,8 @@ export const LandingNewUser: Story = {
   },
 };
 
+export const InitialSignInEmailOnly: Story = LandingNewUser;
+
 export const LandingNewUserEmailInput: Story = {
   args: {
     storybookInitialState: {
@@ -56,9 +63,32 @@ export const LandingNewUserEmailInputWithValue: Story = {
   },
 };
 
+export const InvalidEmail: Story = {
+  args: {
+    storybookInitialState: {
+      flowState: 'landing',
+      tier: 'new',
+      email: 'not-an-email',
+    },
+  },
+};
+
+export const DiscoveryLoading: Story = {
+  args: {
+    storybookInitialState: {
+      flowState: 'landing',
+      tier: 'new',
+      email: 'user@example.com',
+      showTurnstile: true,
+    },
+  },
+};
+
 export const LandingNewUserSignUp: Story = {
   args: {
     isSignUp: true,
+    title: 'Create your account',
+    subtitle: 'Sign up to get started',
     storybookInitialState: {
       flowState: 'landing',
       tier: 'new',
@@ -67,6 +97,21 @@ export const LandingNewUserSignUp: Story = {
   },
 };
 
+export const LandingEnterpriseSSO: Story = {
+  args: {
+    ssoMode: true,
+    emailOnly: true,
+    title: 'Enterprise SSO',
+    subtitle: "Enter your work email address to sign in with your organization's Single Sign-On",
+    storybookInitialState: {
+      flowState: 'landing',
+      tier: 'new',
+      email: '',
+      showEmailInput: true,
+    },
+  },
+};
+
 export const LandingNewUserWithError: Story = {
   args: {
     error: 'An error occurred. Please try again.',
@@ -184,20 +229,40 @@ export const ProviderSelectNewUser: Story = {
     storybookInitialState: {
       flowState: 'provider-select',
       email: 'newuser@example.com',
-      availableProviders: ['google', 'github', 'gitlab', 'linkedin', 'email'],
+      availableProviders: eligibleNewAccountProviders,
+      isNewUser: true,
+    },
+  },
+};
+
+export const ProviderSelectExistingGoogleFirst: Story = {
+  args: {
+    storybookInitialState: {
+      flowState: 'provider-select',
+      email: 'user@example.com',
+      availableProviders: ['google', 'github', 'email'],
+      isNewUser: false,
+    },
+  },
+};
+
+export const UnknownEmailAccountCreation: Story = {
+  args: {
+    storybookInitialState: {
+      flowState: 'provider-select',
+      email: 'new.user@example.com',
+      availableProviders: eligibleNewAccountProviders,
       isNewUser: true,
     },
   },
 };
 
-export const ProviderSelectNewUserWithPreferredProvider: Story = {
+export const ProviderSelectNewUserGoogleFirst: Story = {
   args: {
     storybookInitialState: {
       flowState: 'provider-select',
-      tier: 'returning', // This simulates having a hint, so preferred provider is first
       email: 'user@example.com',
-      // Providers would be sorted with preferred (e.g., 'github') first
-      availableProviders: ['github', 'google', 'gitlab', 'linkedin', 'email'],
+      availableProviders: eligibleNewAccountProviders,
       isNewUser: true,
     },
   },
@@ -338,6 +403,19 @@ export const Redirecting: Story = {
   },
 };
 
+export const RedirectingSingleProvider: Story = Redirecting;
+
+export const NoSupportedMethod: Story = {
+  args: {
+    error: 'No supported sign-in method is available for this account. Use a different email.',
+    storybookInitialState: {
+      flowState: 'landing',
+      tier: 'new',
+      email: 'long.email.address.for.mobile.layout@example.com',
+    },
+  },
+};
+
 export const RedirectingWithTitle: Story = {
   args: {
     title: 'Signing you in...',