Credentials provider

packages/db/prisma/migrations/20250214051339_add_hashed_password/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "hashedPassword" TEXT;

packages/db/prisma/schema.prisma

@@ -105,20 +105,20 @@ model Invite {
 }
 
 model Org {
-  id                Int          @id @default(autoincrement())
-  name              String
-  domain            String       @unique
-  createdAt         DateTime     @default(now())
-  updatedAt         DateTime     @updatedAt
-  members           UserToOrg[]
-  connections       Connection[]
-  repos             Repo[]
-  secrets           Secret[]
-
-  stripeCustomerId  String?
+  id          Int          @id @default(autoincrement())
+  name        String
+  domain      String       @unique
+  createdAt   DateTime     @default(now())
+  updatedAt   DateTime     @updatedAt
+  members     UserToOrg[]
+  connections Connection[]
+  repos       Repo[]
+  secrets     Secret[]
+
+  stripeCustomerId String?
 
   /// List of pending invites to this organization
-  invites           Invite[]
+  invites Invite[]
 }
 
 enum OrgRole {
@@ -157,13 +157,14 @@ model Secret {
 
 // @see : https://authjs.dev/concepts/database-models#user
 model User {
-  id            String      @id @default(cuid())
-  name          String?
-  email         String?     @unique
-  emailVerified DateTime?
-  image         String?
-  accounts      Account[]
-  orgs          UserToOrg[]
+  id                String      @id @default(cuid())
+  name              String?
+  email             String?     @unique
+  hashedPassword    String?
+  emailVerified     DateTime?
+  image             String?
+  accounts          Account[]
+  orgs              UserToOrg[]
 
   /// List of pending invites that the user has created
   invites Invite[]

packages/web/package.json

@@ -75,6 +75,7 @@
     "@viz-js/lang-dot": "^1.0.4",
     "@xiechao/codemirror-lang-handlebars": "^1.0.4",
     "ajv": "^8.17.1",
+    "bcrypt": "^5.1.1",
     "class-variance-authority": "^0.7.0",
     "client-only": "^0.0.1",
     "clsx": "^2.1.1",
@@ -124,6 +125,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@types/bcrypt": "^5.0.2",
     "@types/node": "^20",
     "@types/psl": "^1.1.3",
     "@types/react": "^18",

packages/web/src/app/api/(server)/auth/verifyCredentials/route.ts

@@ -0,0 +1,74 @@
+import { ErrorCode } from "@/lib/errorCodes";
+import { verifyCredentialsRequestSchema } from "@/lib/schemas";
+import { schemaValidationError, serviceErrorResponse } from "@/lib/serviceError";
+import { prisma } from "@/prisma";
+import { User as NextAuthUser } from "next-auth";
+import bcrypt from 'bcrypt';
+
+export const runtime = 'nodejs';
+
+export async function POST(request: Request) {
+    const body = await request.json();
+    const parsed = await verifyCredentialsRequestSchema.safeParseAsync(body);
+
+    if (!parsed.success) {
+        return serviceErrorResponse(
+            schemaValidationError(parsed.error)
+        )
+    }
+
+    const { email, password } = parsed.data;
+    const user = await getOrCreateUser(email, password);
+
+    if (!user) {
+        return serviceErrorResponse(
+            {
+                statusCode: 401,
+                errorCode: ErrorCode.INVALID_CREDENTIALS,
+                message: 'Invalid email or password',
+            }
+        )
+    }
+
+    return Response.json(user);
+}
+
+async function getOrCreateUser(email: string, password: string): Promise<NextAuthUser | null> {
+    const user = await prisma.user.findUnique({
+        where: { email }
+    });
+
+    // The user doesn't exist, so create a new one.
+    if (!user) {
+        const hashedPassword = bcrypt.hashSync(password, 10);
+        const newUser = await prisma.user.create({
+            data: {
+                email,
+                hashedPassword,
+            }
+        });
+
+        return {
+            id: newUser.id,
+            email: newUser.email,
+        }
+
+    // Otherwise, the user exists, so verify the password.
+    } else {
+        if (!user.hashedPassword) {
+            return null;
+        }
+
+        if (!bcrypt.compareSync(password, user.hashedPassword)) {
+            return null;
+        }
+
+        return {
+            id: user.id,
+            email: user.email,
+            name: user.name ?? undefined,
+            image: user.image ?? undefined,
+        };
+    }
+
+}

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

@@ -0,0 +1,151 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import logoDark from "@/public/sb_logo_dark_large.png";
+import logoLight from "@/public/sb_logo_light_large.png";
+import githubLogo from "@/public/github.svg";
+import googleLogo from "@/public/google.svg";
+import Image from "next/image";
+import { signIn } from "next-auth/react";
+import { useCallback, useMemo } from "react";
+import { useNonEmptyQueryParam } from "@/hooks/useNonEmptyQueryParam";
+import { verifyCredentialsRequestSchema } from "@/lib/schemas";
+
+export const LoginForm = () => {
+    const callbackUrl = useNonEmptyQueryParam("callbackUrl");
+    const error = useNonEmptyQueryParam("error");
+
+    const form = useForm<z.infer<typeof verifyCredentialsRequestSchema>>({
+        resolver: zodResolver(verifyCredentialsRequestSchema),
+        defaultValues: {
+            email: "",
+            password: "",
+        },
+    });
+
+    const onSignInWithEmailPassword = (values: z.infer<typeof verifyCredentialsRequestSchema>) => {
+        signIn("credentials", {
+            email: values.email,
+            password: values.password,
+            redirectTo: callbackUrl ?? "/"
+        });
+    }
+
+    const onSignInWithOauth = useCallback((provider: string) => {
+        signIn(provider, { redirectTo: callbackUrl ?? "/" });
+    }, [callbackUrl]);
+
+    const errorMessage = useMemo(() => {
+        if (!error) {
+            return "";
+        }
+        switch (error) {
+            case "CredentialsSignin":
+                return "Invalid email or password. Please try again.";
+            case "OAuthAccountNotLinked":
+                return "This email is already associated with a different sign-in method.";
+            default:
+                return "An error occurred during authentication. Please try again.";
+        }
+    }, [error]);
+
+    return (
+        <div className="flex flex-col items-center border p-16 rounded-lg gap-6 w-[500px]">
+            {error && (
+                <div className="text-sm text-destructive text-center text-wrap border p-2 rounded-md border-destructive">
+                    {errorMessage}
+                </div>
+            )}
+            <div>
+                <Image
+                    src={logoDark}
+                    className="h-16 w-auto hidden dark:block"
+                    alt={"Sourcebot logo"}
+                    priority={true}
+                />
+                <Image
+                    src={logoLight}
+                    className="h-16 w-auto block dark:hidden"
+                    alt={"Sourcebot logo"}
+                    priority={true}
+                />
+            </div>
+            <ProviderButton
+                name="GitHub"
+                logo={githubLogo}
+                onClick={() => {
+                    onSignInWithOauth("github")
+                }}
+            />
+            <ProviderButton
+                name="Google"
+                logo={googleLogo}
+                onClick={() => {
+                    onSignInWithOauth("google")
+                }}
+            />
+            <div className="flex items-center w-full gap-4">
+                <div className="h-[1px] flex-1 bg-border" />
+                <span className="text-muted-foreground text-sm">or</span>
+                <div className="h-[1px] flex-1 bg-border" />
+            </div>
+            <div className="flex flex-col w-60">
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSignInWithEmailPassword)}>
+                        <FormField
+                            control={form.control}
+                            name="email"
+                            render={({ field }) => (
+                                <FormItem className="mb-4">
+                                    <FormLabel>Email</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="email@example.com" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="password"
+                            render={({ field }) => (
+                                <FormItem className="mb-8">
+                                    <FormLabel>Password</FormLabel>
+                                    <FormControl>
+                                        <Input type="password" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <Button type="submit" className="w-full">
+                            Sign in
+                        </Button>
+                    </form>
+                </Form>
+            </div>
+        </div >
+    )
+}
+
+const ProviderButton = ({
+    name,
+    logo,
+    onClick,
+}: {
+    name: string;
+    logo: string;
+    onClick: () => void;
+}) => {
+    return (
+        <Button onClick={onClick}>
+            {logo && <Image src={logo} alt={name} className="w-5 h-5 invert dark:invert-0 mr-2" />}
+            Sign in with {name}
+        </Button>
+    )
+}