1 files changed, 28 insertions, 7 deletions
diff --git a/packages/web/app/signin/components/SignInForm.tsx b/packages/web/app/signin/components/SignInForm.tsx
index 0b625f1e..986718bf 100644
--- a/packages/web/app/signin/components/SignInForm.tsx
+++ b/packages/web/app/signin/components/SignInForm.tsx
@@ -1,16 +1,37 @@
 import { getProviders } from "next-auth/react";
 import SignInProviderButton from "./SignInProviderButton";
+import CredentialsForm from "./CredentialsForm";
 
 export default async function SignInForm() {
-  const providers = (await getProviders()) ?? [];
+  const providers = await getProviders();
+  let providerValues;
+  if (providers) {
+    providerValues = Object.values(providers).filter(
+      // Credentials are handled manually by the sign in form
+      (p) => p.id != "credentials",
+    );
+  }
 
   return (
-    <div>
-      {Object.values(providers).map((provider) => (
-        <div key={provider.name}>
-          <SignInProviderButton provider={provider} />
-        </div>
-      ))}
+    <div className="flex flex-col items-center space-y-2">
+      <CredentialsForm />
+
+      {providerValues && (
+        <>
+          <div className="flex w-full items-center">
+            <div className="flex-1 grow border-t-2 border-gray-200"></div>
+            <span className="bg-white px-3 text-gray-500">Or</span>
+            <div className="flex-1 grow border-t-2 border-gray-200"></div>
+          </div>
+          <div className="space-y-2">
+            {providerValues.map((provider) => (
+              <div key={provider.id}>
+                <SignInProviderButton provider={provider} />
+              </div>
+            ))}
+          </div>
+        </>
+      )}
     </div>
   );
 }