app/api/authentication.tsx

@@ -0,0 +1,15 @@
+import { getCsrfToken } from '@/app/lib/utils';
+
+export function login({ email, password, onLogin }: { email: string, password: string, onLogin: () => void }) {
+  console.log(email, password);
+  return fetch("/api/default/users/sign_in", {
+    method: 'POST',
+    body: JSON.stringify({ user: { email, password } }),
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  })
+    .then(onLogin)
+    .catch((error) => console.error(error));
+} 

app/page.tsx

@@ -2,10 +2,25 @@
 
 import Link from 'next/link';
 import styles from '@/app/ui/home.module.css';
+import LoginForm from '@/app/ui/components/login-form';
+
+
 
 export default function Page() {
   return (
     <main className="flex min-h-screen flex-col p-6">
+      <div className="flex flex-row">
+        <div className="w-1/2">
+
+          Already have an account? Sign in
+
+          <LoginForm />
+        </div>
+
+        <div className="w-1/2">
+          Don't have an account? Register now!
+        </div>
+      </div>
 
     </main>
   );

app/ui/components/login-form.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { login } from '../../api/authentication';
+import { useState } from 'react';
+import { classNames } from './button';
+import { useRouter } from 'next/navigation'
+
+export default function LoginForm() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const router = useRouter()
+
+  return (
+    <div className="card flex justify-evenly py-5">
+      <FloatLabel>
+        <InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
+        <label htmlFor="email">Email</label>
+      </FloatLabel>
+      <FloatLabel>
+        <InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
+        <label htmlFor="password">Password</label>
+      </FloatLabel>
+      <button
+        className={classNames('primary')}
+        disabled={email.length == 0 || password.length == 0}
+        onClick={() => login({ email: email, password: password, onLogin: () => router.push('/dashboard') })}>
+        Sign in
+      </button>
+    </div>
+  )
+}