[data-slot=field-group]]:gap-4",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+const fieldVariants = cva(
+ "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+ {
+ variants: {
+ orientation: {
+ vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+ horizontal: [
+ "flex-row items-center",
+ "[&>[data-slot=field-label]]:flex-auto",
+ "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+ ],
+ responsive: [
+ "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+ "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+ "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+ ],
+ },
+ },
+ defaultVariants: {
+ orientation: "vertical",
+ },
+ }
+)
+
+function Field({
+ className,
+ orientation = "vertical",
+ ...props
+}: React.ComponentProps<"div"> & VariantProps
) {
+ return (
+
+ )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function FieldLabel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ [data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+ "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+ return (
+ a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function FieldSeparator({
+ children,
+ className,
+ ...props
+}: React.ComponentProps<"div"> & {
+ children?: React.ReactNode
+}) {
+ return (
+
+
+ {children}
+
+ )}
+
+ )
+}
+
+function FieldError({
+ className,
+ children,
+ errors,
+ ...props
+}: React.ComponentProps<"div"> & {
+ errors?: Array<{ message?: string } | undefined>
+}) {
+ const content = useMemo(() => {
+ if (children) {
+ return children
+ }
+
+ if (!errors?.length) {
+ return null
+ }
+
+ const uniqueErrors = [
+ ...new Map(errors.map((error) => [error?.message, error])).values(),
+ ]
+
+ if (uniqueErrors?.length == 1) {
+ return uniqueErrors[0]?.message
+ }
+
+ return (
+
+ {uniqueErrors.map(
+ (error, index) =>
+ error?.message && {error.message}
+ )}
+
+ )
+ }, [children, errors])
+
+ if (!content) {
+ return null
+ }
+
+ return (
+
+ {content}
+
+ )
+}
+
+export {
+ Field,
+ FieldLabel,
+ FieldDescription,
+ FieldError,
+ FieldGroup,
+ FieldLegend,
+ FieldSeparator,
+ FieldSet,
+ FieldContent,
+ FieldTitle,
+}
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
new file mode 100644
index 0000000..f371fea
--- /dev/null
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import type { Label as LabelPrimitive } from "radix-ui"
+import { Slot } from "radix-ui"
+import {
+ Controller,
+ FormProvider,
+ useFormContext,
+ useFormState,
+ type ControllerProps,
+ type FieldPath,
+ type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
+> = {
+ name: TName
+}
+
+const FormFieldContext = React.createContext(
+ {} as FormFieldContextValue
+)
+
+const FormField = <
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
+>({
+ ...props
+}: ControllerProps) => {
+ return (
+
+
+ )
+}
+
+const useFormField = () => {
+ const fieldContext = React.useContext(FormFieldContext)
+ const itemContext = React.useContext(FormItemContext)
+ const { getFieldState } = useFormContext()
+ const formState = useFormState({ name: fieldContext.name })
+ const fieldState = getFieldState(fieldContext.name, formState)
+
+ if (!fieldContext) {
+ throw new Error("useFormField should be used within ")
+ }
+
+ const { id } = itemContext
+
+ return {
+ id,
+ name: fieldContext.name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
+ ...fieldState,
+ }
+}
+
+type FormItemContextValue = {
+ id: string
+}
+
+const FormItemContext = React.createContext(
+ {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+ const id = React.useId()
+
+ return (
+
+
+
+ )
+}
+
+function FormLabel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ const { error, formItemId } = useFormField()
+
+ return (
+ ) {
+ const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+ return (
+
+ )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+ const { error, formMessageId } = useFormField()
+ const body = error ? String(error?.message ?? "") : props.children
+
+ if (!body) {
+ return null
+ }
+
+ return (
+
+ {body}
+
+ )
+}
+
+export {
+ useFormField,
+ Form,
+ FormItem,
+ FormLabel,
+ FormControl,
+ FormDescription,
+ FormMessage,
+ FormField,
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..f1124ae
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ | null = null;
+
+ constructor() {
+ const configSchema = z.object({
+ host: z.string("EMAIL_HOST is required").min(1, "EMAIL_HOST cannot be empty"),
+ port: z.string("EMAIL_PORT is required")
+ .min(1, "EMAIL_PORT cannot be empty")
+ .transform((val, ctx) => {
+ const n = parseInt(val, 10);
+ if (Number.isNaN(n) || n < 1 || n > 65535) {
+ ctx.addIssue({ code: "custom", message: "EMAIL_PORT must be a valid port number (1-65535)" });
+ return z.NEVER;
+ }
+ return n;
+ }),
+ secure: z.union([
+ z.string().transform(val => val === "true" || val === "1"),
+ z.boolean()
+ ], { error: "EMAIL_SECURE must be a boolean or string 'true'/'false'" }),
+ auth: z.object({
+ user: z.string("EMAIL_USER is required").min(1, "EMAIL_USER cannot be empty"),
+ pass: z.string("EMAIL_PASSWORD is required").min(1, "EMAIL_PASSWORD cannot be empty"),
+ }, { error: "Email auth credentials (EMAIL_USER, EMAIL_PASSWORD) are required" }),
+ })
+
+ const fromEnv = {
+ host: process.env.EMAIL_HOST,
+ port: process.env.EMAIL_PORT,
+ secure: Boolean(process.env.EMAIL_SECURE ?? false),
+ auth: {
+ user: process.env.EMAIL_USER,
+ pass: process.env.EMAIL_PASSWORD,
+ },
+ }
+
+
+ const validatedConfig = configSchema.safeParse(fromEnv);
+ if (!validatedConfig.success) {
+ const details = validatedConfig.error.issues
+ .map((issue) =>
+ ` • ${issue.path.length ? String(issue.path.join(".")) : "config"}: ${issue.message}`
+ )
+ .join("\n");
+ throw new Error(`Invalid email configuration:\n${details}`);
+ }
+
+ this.config = validatedConfig.data;
+ this.transporter = createTransport(this.config);
+ }
+
+ private async sendEmail(to: string, subject: string, content: string, options?: { html?: boolean }) {
+ if (!this.transporter || !this.config) { throw new Error("Email transporter not initialized"); }
+ console.log("Sending email to", to, "with subject", subject);
+ const mailOptions: SendMailOptions = {
+ from: `${this.config.auth.user} <${this.config.auth.user}>`,
+ to,
+ subject,
+ ...(options?.html ? { html: content } : { text: content }),
+ };
+
+ const result = await this.transporter.sendMail(mailOptions);
+ return result.messageId;
+ }
+
+ public async sendRegisterEmail(to: string, verificationCode: string) {
+ const template = await render(React.createElement(RegisterEmail, { verificationCode }));
+ return this.sendEmail(to, "Verify your email", template, { html: true });
+ }
+}
\ No newline at end of file
diff --git a/src/lib/mail/templates/register.tsx b/src/lib/mail/templates/register.tsx
new file mode 100644
index 0000000..1416c0f
--- /dev/null
+++ b/src/lib/mail/templates/register.tsx
@@ -0,0 +1,115 @@
+import {
+ Body,
+ Container,
+ Font,
+ Head,
+ Heading,
+ Hr,
+ Html,
+ Img,
+ Link,
+ Preview,
+ Section,
+ Tailwind,
+ Text,
+} from '@react-email/components';
+import { emailTailwindConfig } from '../email-tailwind.config';
+
+interface RegisterEmailProps {
+ verificationCode?: string;
+}
+
+const baseUrl = process.env.VERCEL_URL
+ ? `https://${process.env.VERCEL_URL}`
+ : '';
+
+export default function RegisterEmail({
+ verificationCode,
+}: RegisterEmailProps) {
+ return (
+
+
+
+ Sipher Email Verification
+
+
+
+
+
+
+ Verify your email address
+
+
+ Hope this message finds you well.
+
+
+
+ Verification code
+
+
+
+ {verificationCode}
+
+
+ (This code is valid for 10 minutes and can be used only once)
+
+
+
+
+
+ Sipher will never email you and ask you for your personal information.
+ We also will never send you any promotion emails or spam emails.
+
+
+
+
+ This message was produced and distributed by Sipher,
+ Sipher is a federated social media platform. View our{' '}
+
+
+
+
+
+ );
+}
+
+RegisterEmail.PreviewProps = {
+ verificationCode: '596853',
+} satisfies RegisterEmailProps;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/src/server.ts b/src/server.ts
index e69de29..7a35249 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -0,0 +1,20 @@
+import { config } from 'dotenv'
+import { createServer } from 'http'
+import next from 'next'
+
+config({ path: '.env.local' })
+const port = parseInt(process.env.PORT || '3000', 10)
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app.prepare().then(() => {
+ createServer((req, res) => {
+ handle(req, res)
+ }).listen(port)
+
+ console.log(
+ `> Server listening at http://localhost:${port} as ${dev ? 'development' : process.env.NODE_ENV
+ }`
+ )
+})
\ No newline at end of file
diff --git a/tests/auth.test.ts b/tests/auth.test.ts
new file mode 100644
index 0000000..ee68d46
--- /dev/null
+++ b/tests/auth.test.ts
@@ -0,0 +1,45 @@
+import { auth } from "@/lib/auth"
+import { expect, test } from "@playwright/test"
+
+// NOTICE: Does not work, will fix it later
+
+test("create and login user", async ({ context, page }) => {
+ const ctx = await auth.$context
+ const testUtils = ctx.test
+
+ // Go to home page
+ await page.goto("/")
+ // Check if we are redirected to the auth page
+ await expect(page).toHaveURL("/auth")
+
+ // Create and save user
+ const user = testUtils.createUser({
+ email: "e2e@example.com",
+ name: "E2E User"
+ })
+ await testUtils.saveUser(user)
+
+ // Get cookies and inject into browser
+ const cookies = await testUtils.getCookies({
+ userId: user.id,
+ domain: "localhost"
+ })
+ await context.addCookies(cookies)
+
+ // Login
+ await testUtils.login({ userId: user.id })
+ // Check if we got redirected to the home page
+ await expect(page).toHaveURL("/")
+
+ // Check if we are logged in
+ const headers = await testUtils.getAuthHeaders({ userId: user.id })
+ expect(headers).toBeDefined()
+ expect(headers.get("Authorization")).toBeDefined()
+
+ // Delete user
+ await testUtils.deleteUser(user.id)
+
+ // Check if user is deleted
+ const deletedUser = await ctx.internalAdapter.findUserById(user.id)
+ expect(deletedUser).toBeNull()
+})
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index cf9c65d..a19c151 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,34 +1,45 @@
{
- "compilerOptions": {
- "target": "ES2017",
- "lib": ["dom", "dom.iterable", "esnext"],
- "allowJs": true,
- "skipLibCheck": true,
- "strict": true,
- "noEmit": true,
- "esModuleInterop": true,
- "module": "esnext",
- "moduleResolution": "bundler",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "jsx": "react-jsx",
- "incremental": true,
- "plugins": [
- {
- "name": "next"
- }
- ],
- "paths": {
- "@/*": ["./src/*"]
- }
- },
- "include": [
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx",
- ".next/types/**/*.ts",
- ".next/dev/types/**/*.ts",
- "**/*.mts"
- ],
- "exclude": ["node_modules"]
-}
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "react-jsx",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": [
+ "./src/*"
+ ],
+ "@app": [
+ "./src/app"
+ ]
+ }
+ },
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts",
+ ".next/dev/types/**/*.ts",
+ "**/*.mts"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
+}
\ No newline at end of file