{transcription.length > 0 && (
diff --git a/app/src/app/transcriptions/page.tsx b/app/src/app/transcriptions/page.tsx
index 99b53b1..38935d3 100644
--- a/app/src/app/transcriptions/page.tsx
+++ b/app/src/app/transcriptions/page.tsx
@@ -1,3 +1,4 @@
+import { validateRequest } from "@/auth";
import NavigateBack from "@/components/NavigateBack";
import TranscriptionItem from "@/components/TranscriptionItem";
import { db } from "@/db";
@@ -9,12 +10,19 @@ export const fetchCache = "force-no-store";
export const revalidate = 0;
import { Metadata } from "next";
+import { redirect } from "next/navigation";
export const metadata: Metadata = {
title: "Lingo.ai | Transcriptions",
};
const page = async () => {
+
+ const {user} = await validateRequest();
+
+ if (!user) return redirect("/signin");
+
+
const userTranscriptions = await db
.select({
id: transcriptions.id,
diff --git a/app/src/auth.ts b/app/src/auth.ts
new file mode 100644
index 0000000..dce5ae3
--- /dev/null
+++ b/app/src/auth.ts
@@ -0,0 +1,62 @@
+// src/auth.ts
+import { Lucia } from "lucia";
+import { db } from "./db";
+import { DrizzlePostgreSQLAdapter } from "@lucia-auth/adapter-drizzle";
+import { sessionTable, userTable } from "./db/schema";
+import { cookies } from "next/headers";
+import { cache } from "react";
+import type { Session, User } from "lucia";
+
+const adapter = new DrizzlePostgreSQLAdapter(db,sessionTable,userTable);
+
+export const lucia = new Lucia(adapter, {
+ sessionCookie: {
+ expires: false,
+ attributes: {
+ secure: process.env.NODE_ENV === "production"
+ }
+ },
+ getUserAttributes: (attributes) => {
+ return {
+ // attributes has the type of DatabaseUserAttributes
+ username: attributes.username
+ };
+ }
+});
+
+export const validateRequest = cache(
+ async (): Promise<{ user: User; session: Session } | { user: null; session: null }> => {
+ const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? null;
+ if (!sessionId) {
+ return {
+ user: null,
+ session: null
+ };
+ }
+
+ const result = await lucia.validateSession(sessionId);
+ // next.js throws when you attempt to set cookie when rendering page
+ try {
+ if (result.session && result.session.fresh) {
+ const sessionCookie = lucia.createSessionCookie(result.session.id);
+ cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+ }
+ if (!result.session) {
+ const sessionCookie = lucia.createBlankSessionCookie();
+ cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+ }
+ } catch {}
+ return result;
+ }
+);
+
+declare module "lucia" {
+ interface Register {
+ Lucia: typeof lucia;
+ DatabaseUserAttributes: DatabaseUserAttributes;
+ }
+}
+
+interface DatabaseUserAttributes {
+ username: string;
+}
\ No newline at end of file
diff --git a/app/src/components/Landing.tsx b/app/src/components/Landing.tsx
index 93cbb18..a32fbcc 100644
--- a/app/src/components/Landing.tsx
+++ b/app/src/components/Landing.tsx
@@ -8,7 +8,6 @@ import { useRouter } from "next/navigation";
import Link from "next/link";
const Landing = () => {
- const router = useRouter();
return (
@@ -24,7 +23,7 @@ const Landing = () => {
with ease.
{
+interface RecorderCardProps {
+ userId: string;
+}
+const RecorderCard = (props:RecorderCardProps) => {
+ const { userId } = props;
+
const router = useRouter();
const [file, setFile] = useState
(null);
const [uploadProgress, setUploadProgress] = useState(0);
@@ -33,22 +38,12 @@ const RecorderCard = () => {
const [audioURL, setAudioURL] = useState("");
const [recordingTime, setRecordingTime] = useState(0);
const [isPlaying, setIsPlaying] = useState(false);
- const [user, setUser] = useState(null);
const mediaRecorder = useRef(null);
const chunks = useRef([]);
const audioRef = useRef(null);
const timerRef = useRef(null);
- useEffect(() => {
- const storedUser = localStorage.getItem("user");
- if (!storedUser) {
- router.push("/register");
- } else {
- setUser(storedUser);
- }
- }, [router]);
-
const handleFileChange = (newFiles: File[]) => {
if (newFiles.length > 0) {
setFile(newFiles[0]);
@@ -102,7 +97,7 @@ const RecorderCard = () => {
saveTranscribe({
documentUrl: data.documentUrl,
documentName: data.documentName,
- registrationId: JSON.parse(user!).userId,
+ userID: userId,
summary: res.summary,
translation: res.translation,
});
@@ -219,7 +214,7 @@ const RecorderCard = () => {
return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
};
- if (!user) {
+ if (!userId) {
return ;
}
diff --git a/app/src/components/RegisterForm.tsx b/app/src/components/UserForm.tsx
similarity index 53%
rename from app/src/components/RegisterForm.tsx
rename to app/src/components/UserForm.tsx
index 9113c39..80e1060 100644
--- a/app/src/components/RegisterForm.tsx
+++ b/app/src/components/UserForm.tsx
@@ -15,62 +15,35 @@ import {
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { RegisterUserRequest, registerUserSchema } from "@/Validators/register";
-import { useMutation } from "@tanstack/react-query";
-import axios, { AxiosError } from "axios";
-import { toast } from "sonner";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-const RegisterForm = () => {
- const router = useRouter();
- const [isPersistingUser,setIsPersistingUser] = useState(false);
+import { useUser } from "@/hooks/useUser";
- useEffect(() => {
- if (typeof window !== "undefined" && localStorage.getItem("user")) {
- router.push("/new");
- }
- }, [router]);
+interface UserFormProps {
+ formType: "signin" | "signup";
+}
+
+const UserForm = (props: UserFormProps) => {
+
+ const { formType } = props;
+
+ const { disableSubmit, isPending, signupUser, signinUser } = useUser();
const form = useForm({
resolver: zodResolver(registerUserSchema),
defaultValues: {
- userName: "",
+ password: "",
userEmail: "",
},
mode: "all",
});
- const { mutate, isPending } = useMutation({
- mutationKey: ["registerUser"],
- mutationFn: async (payload: RegisterUserRequest) => {
- const response = await axios.post("/api/register", payload);
- return response.data;
- },
- onSuccess: async (res) => {
- if (typeof window !== "undefined") {
- localStorage.setItem("user", JSON.stringify(res));
- }
- form.reset();
- router.push("/new");
- setIsPersistingUser(false);
- },
- onError: (error) => {
- if (error instanceof AxiosError) {
- if (error.response?.status === 422) {
- return toast.error("Failed to Register User", {
- description: error.message,
- });
- }
- }
- return toast.error(
- "Failed to Register User, please try again in some time",
- );
- },
- });
const onSubmit = (data: RegisterUserRequest) => {
- setIsPersistingUser(true);
- mutate(data);
+ if (formType === "signup")
+ signupUser(data)
+ else
+ // console.log("Signin User")
+ signinUser(data)
};
return (
@@ -80,17 +53,19 @@ const RegisterForm = () => {
className="w-full max-w-sm flex flex-col gap-4 justify-center items-center"
>
- Register
+ {
+ formType === "signup" ? "Sign Up" : "Sign In"
+ }
(
- Name
+ Email
-
+
@@ -100,12 +75,12 @@ const RegisterForm = () => {
(
- Email
+ Password
-
+
@@ -113,16 +88,18 @@ const RegisterForm = () => {
/>
);
};
-export default RegisterForm;
\ No newline at end of file
+export default UserForm;
\ No newline at end of file
diff --git a/app/src/db/schema.ts b/app/src/db/schema.ts
index 92200a3..56e0b11 100644
--- a/app/src/db/schema.ts
+++ b/app/src/db/schema.ts
@@ -2,9 +2,9 @@ import { timestamp, pgTable, text, uuid } from "drizzle-orm/pg-core";
export const transcriptions = pgTable("transcriptions", {
id: uuid("id").primaryKey().defaultRandom(),
- registrationId: text("registrationId")
- .notNull()
- .references(() => registrations.id, { onDelete: "cascade" }),
+ userID: text("user_id")
+ .notNull()
+ .references(() => userTable.id),
translation: text("translation").notNull(),
summary: text("summary").notNull(),
createdAt: timestamp("createdAt", { mode: "date" }).defaultNow(),
@@ -21,5 +21,22 @@ export const registrations = pgTable("registrations", {
createdAt: timestamp("createdAt", { mode: "date" }).defaultNow(),
});
+export const userTable = pgTable("user", {
+ id: text("id").primaryKey(),
+ username: text("username").notNull().unique(),
+ password_hash: text("password_hash").notNull(),
+});
+
+export const sessionTable = pgTable("session", {
+ id: text("id").primaryKey(),
+ userId: text("user_id")
+ .notNull()
+ .references(() => userTable.id),
+ expiresAt: timestamp("expires_at", {
+ withTimezone: true,
+ mode: "date"
+ }).notNull()
+});
+
export type TranscriptionsPayload = typeof transcriptions.$inferInsert;
export type TranscriptionsType = typeof transcriptions.$inferSelect;
diff --git a/app/src/hooks/useUser.ts b/app/src/hooks/useUser.ts
new file mode 100644
index 0000000..fdae041
--- /dev/null
+++ b/app/src/hooks/useUser.ts
@@ -0,0 +1,106 @@
+'use client';
+
+import { useMutation } from "@tanstack/react-query";
+import axios, { AxiosError } from "axios";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+import { RegisterUserRequest } from "@/Validators/register";
+import { useState } from "react";
+
+export const useUser = () => {
+
+ const router = useRouter();
+
+ const [disableSubmit,setDisableSubmit] = useState(false);
+ const { mutate:signup, isPending:isSigningUp } = useMutation({
+ mutationKey: ["signup-user"],
+ mutationFn: async (payload: RegisterUserRequest) => {
+ const response = await axios.post("/api/signup", payload);
+ return response.data;
+ },
+ onSuccess: async (res) => {
+ toast.success("User Registered Successfully");
+ router.push("/")
+ },
+ onError: (error) => {
+ if (error instanceof AxiosError) {
+ if (error.response?.status === 422) {
+ return toast.error("Failed to Register User", {
+ description: error.message,
+ });
+ }
+ else if(error.response?.status === 409){
+ return toast.error("User already exists, please sign in", {
+ action: {
+ label: "Signin",
+ onClick: () => router.push("/signin"),
+ }
+ });
+ }
+ }
+ return toast.error(
+ "Failed to Register User, please try again in some time",
+ );
+ },
+ onSettled: () => {
+ setDisableSubmit(false);
+ }
+ });
+
+ const { mutate:signin, isPending:isSigningIn } = useMutation({
+ mutationKey: ["signin-user"],
+ mutationFn: async (payload: RegisterUserRequest) => {
+ const response = await axios.post("/api/signin", payload);
+ return response.data;
+ },
+ onSuccess: async (res) => {
+ toast.success("User sign in Successfull");
+ router.push("/")
+ },
+ onError: (error) => {
+ if (error instanceof AxiosError) {
+ if (error.response?.status === 422) {
+ return toast.error("Failed to sign in User", {
+ description: error.message,
+ });
+ }
+ else if(error.response?.status === 404){
+ return toast.error("User does not exists", {
+ action: {
+ label: "Signup",
+ onClick: () => router.push("/signup"),
+ }
+ });
+ }
+ else if(error.response?.status === 401){
+ return toast.error("Incorrect username or password");
+ }
+ }
+ return toast.error(
+ "Failed to sign in User, please try again in some time",
+ );
+ },
+ onSettled: () => {
+ setDisableSubmit(false);
+ }
+ });
+
+ const signupUser = (data: RegisterUserRequest) => {
+ setDisableSubmit(true);
+ signup(data);
+ }
+
+ const signinUser = (data: RegisterUserRequest) => {
+ setDisableSubmit(true);
+ signin(data);
+ }
+
+ return {
+ signupUser,
+ signinUser,
+ isPending: isSigningUp || isSigningIn,
+ disableSubmit
+ }
+
+}
+