feat: update authentication layout and forms for improved user experience; add new dependencies and enhance styling

app/(auth)/auth/layout.tsx

@@ -1,22 +1,10 @@
-import Image from "next/image";
 
 export default function AuthLayout({
 	children,
 }: { children: React.ReactNode }) {
 	return (
 		<div className="bg-gray-100 dark:bg-black w-full h-screen flex items-center justify-center font-sans">
-			<div className="flex flex-col items-center justify-center w-full h-full ">
-				<Image alt="Sar Link Logo" src="/logo.png" width={100} height={100} />
-				<div className="mt-4 flex flex-col items-center justify-center">
-					<h4 className="font-bold text-xl text-sarLinkOrange dark:text-gray-400">
-						SAR Link Portal
-					</h4>
-					<p className="text-gray-400">
-						Pay for your devices and track your bills.
-					</p>
-				</div>
-				{children}
-			</div>
+			{children}
 		</div>
 	);
 }

app/(auth)/auth/verify-otp-registration/page.tsx

@@ -1,7 +1,9 @@
+import { authOptions } from "@/app/auth";
 import VerifyRegistrationOTPForm from "@/components/auth/verify-registration-otp-form";
 import ClientErrorMessage from "@/components/client-error-message";
 import { checkTempIdOrPhone } from "@/queries/authentication";
 import { tryCatch } from "@/utils/tryCatch";
+import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 
 export default async function VerifyRegistrationOTP({
@@ -9,6 +11,11 @@ export default async function VerifyRegistrationOTP({
 }: {
 	searchParams: Promise<{ phone_number: string }>;
 }) {
+	const session = await getServerSession(authOptions)
+	if (session) {
+		// If the user is already logged in, redirect them to the home page
+		return redirect("/");
+	}
 	const phone_number = (await searchParams).phone_number;
 	if (!phone_number) {
 		return redirect("/login");