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>
+ )
+}

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>
+ )
+}

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>
+ )
+}

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>
+ )
+}

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>
+ )
+}

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>
+ )
+}

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>
+ )
+}

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>
+ )
+}