hydration

sinamics · Dec 30, 2024 · 23e8bf3 · 23e8bf3
1 parent 6f99eb0
commit 23e8bf3
Show file tree

Hide file tree

Showing 12 changed files with 183 additions and 158 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -23,14 +23,14 @@ const nextConfig = {
 	eslint: {
 		ignoreDuringBuilds: true,
 	},
-	// async redirects() {
-	// 	return [
-	// 		{
-	// 			source: "/",
-	// 			destination: "/auth/login",
-	// 			permanent: true,
-	// 		},
-	// 	];
-	// },
+	async redirects() {
+		return [
+			{
+				source: "/",
+				destination: "/auth/login",
+				permanent: true,
+			},
+		];
+	},
 };
 export default withNextIntl(nextConfig);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
 		"@faker-js/faker": "^8.0.2",
 		"@heroicons/react": "^2.0.16",
 		"@paralleldrive/cuid2": "^2.2.2",
-		"@prisma/client": "^5.14.0",
+		"@prisma/client": "^6.1.0",
 		"@t3-oss/env-nextjs": "^0.11.1",
 		"@tanstack/react-query": "^5.50.0",
 		"@tanstack/react-query-devtools": "^5.62.11",
@@ -50,7 +50,7 @@
 		"next": "15.1.2",
 		"next-auth": "^5.0.0-beta.25",
 		"next-intl": "3.26.3",
-		"next-themes": "^0.2.1",
+		"next-themes": "^0.4.4",
 		"nodemailer": "^6.9.9",
 		"otplib": "^12.0.1",
 		"qrcode": "^1.5.3",
@@ -97,7 +97,7 @@
 		"jest-mock-extended": "^3.0.4",
 		"jest-module-name-mapper": "^0.1.5",
 		"postcss": "^8.4.31",
-		"prisma": "^5.11.0",
+		"prisma": "^6.1.0",
 		"tailwindcss": "^3.4.3",
 		"ts-jest": "^29.1.0",
 		"ts-node": "^10.9.1",
@@ -110,4 +110,4 @@
 	"prisma": {
 		"seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
 	}
-}
+}
diff --git a/src/app/[locale]/(authorized)/layout.tsx b/src/app/[locale]/(authorized)/layout.tsx
@@ -1,12 +1,22 @@
+import { redirect } from "next/navigation";
 import { ReactNode } from "react";
 import MainLayout from "~/components/layouts/authenticatedLayout";
+import { auth } from "~/server/auth";
 
 type Props = {
 	children: ReactNode;
 };
 
 // Since we have a `not-found.tsx` page on the root, a layout file
 // is required, even if it's just passing children through.
-export default function RootLayout({ children }: Props) {
+export default async function RootLayout({ children }: Props) {
+	const session = await auth();
+
+	// if not authenticated, redirect to login
+	if (!session) {
+		// redirect to login
+		redirect("/auth/login");
+	}
+
 	return <MainLayout>{children}</MainLayout>;
 }
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -1,27 +1,11 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages } from "next-intl/server";
 import { notFound } from "next/navigation";
 import { routing } from "~/i18n/routing";
 import { TRPCReactProvider } from "~/trpc/react";
 import { SessionProvider } from "next-auth/react";
 import { auth } from "~/server/auth";
-
-const geistSans = Geist({
-	variable: "--font-geist-sans",
-	subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-	variable: "--font-geist-mono",
-	subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-	title: "ZTNET",
-	description: "Zerotier web interface",
-};
+// import ZtnetThemeProvider from "~/components/providers/themeProvider";
 
 export default async function RootLayout({
 	children,
@@ -43,16 +27,10 @@ export default async function RootLayout({
 	// side is the easiest way to get started
 	const messages = await getMessages();
 	return (
-		<html lang="en">
-			<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-				<TRPCReactProvider>
-					<SessionProvider session={session}>
-						<NextIntlClientProvider messages={messages}>
-							{children}
-						</NextIntlClientProvider>
-					</SessionProvider>
-				</TRPCReactProvider>
-			</body>
-		</html>
+		<TRPCReactProvider>
+			<SessionProvider session={session}>
+				<NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>
+			</SessionProvider>
+		</TRPCReactProvider>
 	);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,35 @@
 import { ReactNode } from "react";
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./styles/globals.css";
+import { ThemeProvider } from "next-themes";
 
 type Props = {
 	children: ReactNode;
 };
+const geistSans = Geist({
+	variable: "--font-geist-sans",
+	subsets: ["latin"],
+});
 
+const geistMono = Geist_Mono({
+	variable: "--font-geist-mono",
+	subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+	title: "ZTNET",
+	description: "Zerotier web interface",
+};
 // Since we have a `not-found.tsx` page on the root, a layout file
 // is required, even if it's just passing children through.
 export default function RootLayout({ children }: Props) {
-	return children;
+	return (
+		<html lang="en" suppressHydrationWarning>
+			<head />
+			<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+				<ThemeProvider>{children}</ThemeProvider>
+			</body>
+		</html>
+	);
 }
diff --git a/src/components/auth/credentialsForm.tsx b/src/components/auth/credentialsForm.tsx
@@ -1,4 +1,4 @@
-import { signIn, useSession } from "next-auth/react";
+import { signIn } from "next-auth/react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { ErrorCode } from "~/utils/errorCode";
@@ -18,7 +18,6 @@ interface FormData {
 const CredentialsForm: React.FC = () => {
 	const router = useRouter();
 	const t = useTranslations();
-	const session = useSession();
 	const [totpCode, setTotpCode] = useState("");
 	const [showOTP, setShowOTP] = useState<boolean>(false);
 	const [loading, setLoading] = useState({ credentials: false, oauth: false });
@@ -47,7 +46,7 @@ const CredentialsForm: React.FC = () => {
 				...formData,
 			});
 
-			if (response.ok) {
+			if (response?.ok) {
 				await router.push("/network");
 				return;
 			}
@@ -57,7 +56,9 @@ const CredentialsForm: React.FC = () => {
 					setShowOTP(true);
 					break;
 				default:
-					toast.error(response.error, { duration: 10000 });
+					toast.error(response?.error || "An unknown error occurred", {
+						duration: 10000,
+					});
 			}
 		} catch (error) {
 			toast.error(error.message);
@@ -70,12 +71,6 @@ const CredentialsForm: React.FC = () => {
 		<form className="space-y-4" onSubmit={submitHandler}>
 			{!showOTP && (
 				<>
-					<Link
-						href={session?.data ? "/api/auth/signout" : "/api/auth/signin"}
-						className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20"
-					>
-						{session?.data ? "Sign out" : "Sign in"}
-					</Link>
 					<FormInput
 						label={t("authPages.form.email")}
 						name="email"