improvement: Add separate login / signup screens

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+- Added seperate page for signup. [#311](https://github.com/sourcebot-dev/sourcebot/pull/331)
+
 ## [4.1.1] - 2025-06-03
 
 ### Added

packages/web/src/app/login/components/loginForm.tsx

@@ -22,9 +22,10 @@ interface LoginFormProps {
     callbackUrl?: string;
     error?: string;
     providers: Array<{ id: string; name: string }>;
+    context: "login" | "signup";
 }
 
-export const LoginForm = ({ callbackUrl, error, providers }: LoginFormProps) => {
+export const LoginForm = ({ callbackUrl, error, providers, context }: LoginFormProps) => {
     const captureEvent = useCaptureEvent();
     const onSignInWithOauth = useCallback((provider: string) => {
         signIn(provider, {
@@ -77,9 +78,11 @@ export const LoginForm = ({ callbackUrl, error, providers }: LoginFormProps) =>
         <div className="flex flex-col items-center justify-center w-full">
             <div className="mb-6 flex flex-col items-center">
                 <SourcebotLogo
-                    className="h-12 sm:h-16"
+                    className="h-12 sm:h-16 mb-3"
                 />
-                <h2 className="text-lg font-bold text-center">Sign in to your account</h2>
+                <h2 className="text-lg font-medium text-center">
+                    {context === "login" ? "Sign in to your account" : "Create a new account"}
+                </h2>
             </div>
             {env.NEXT_PUBLIC_SOURCEBOT_CLOUD_ENVIRONMENT !== undefined && (
                 <div className="w-full sm:w-[500px] max-w-[500px]">
@@ -120,6 +123,17 @@ export const LoginForm = ({ callbackUrl, error, providers }: LoginFormProps) =>
                         ] : [])
                     ]}
                 />
+                <p className="text-sm text-muted-foreground mt-8">
+                    {context === "login" ?
+                        <>
+                            No account yet? <Link className="underline" href="/signup">Sign up</Link>
+                        </>
+                    :
+                        <>
+                            Already have an account? <Link className="underline" href="/login">Sign in</Link>
+                        </>
+                    }
+                </p>
             </Card>
             {env.NEXT_PUBLIC_SOURCEBOT_CLOUD_ENVIRONMENT !== undefined && (
                 <p className="text-xs text-muted-foreground mt-8">By signing in, you agree to the <Link className="underline" href={TERMS_OF_SERVICE_URL} target="_blank">Terms of Service</Link> and <Link className="underline" href={PRIVACY_POLICY_URL} target="_blank">Privacy Policy</Link>.</p>

packages/web/src/app/login/page.tsx

@@ -40,6 +40,7 @@ export default async function Login({ searchParams }: LoginProps) {
                     callbackUrl={searchParams.callbackUrl}
                     error={searchParams.error}
                     providers={providerData}
+                    context="login"
                 />
             </div>
             <Footer />

packages/web/src/app/signup/page.tsx

@@ -0,0 +1,48 @@
+import { auth } from "@/auth";
+import { LoginForm } from "../login/components/loginForm";
+import { redirect } from "next/navigation";
+import { getProviders } from "@/auth";
+import { Footer } from "@/app/components/footer";
+import { createLogger } from "@sourcebot/logger";
+
+const logger = createLogger('signup-page');
+
+interface LoginProps {
+    searchParams: {
+        callbackUrl?: string;
+        error?: string;
+    }
+}
+
+export default async function Signup({ searchParams }: LoginProps) {
+    const session = await auth();
+    if (session) {
+        logger.info("Session found in signup page, redirecting to home");
+        return redirect("/");
+    }
+
+    const providers = getProviders();
+    const providerData = providers
+        .map((provider) => {
+            if (typeof provider === "function") {
+                const providerInfo = provider()
+                return { id: providerInfo.id, name: providerInfo.name }
+            } else {
+                return { id: provider.id, name: provider.name }
+            }
+        });
+
+    return (
+        <div className="flex flex-col min-h-screen bg-backgroundSecondary">
+            <div className="flex-1 flex flex-col items-center p-4 sm:p-12 w-full">
+                <LoginForm
+                    callbackUrl={searchParams.callbackUrl}
+                    error={searchParams.error}
+                    providers={providerData}
+                    context="signup"
+                />
+            </div>
+            <Footer />
+        </div>
+    )
+}

packages/web/src/middleware.ts

@@ -10,7 +10,11 @@ export async function middleware(request: NextRequest) {
         return NextResponse.next();
     }
 
-    if (url.pathname.startsWith('/login') || url.pathname.startsWith('/redeem')) {
+    if (
+        url.pathname.startsWith('/login') ||
+        url.pathname.startsWith('/redeem') ||
+        url.pathname.startsWith('/signup')
+    ) {
         return NextResponse.next();
     }