fix i18n flicker on auth pages (#1183)

* fix flicker on `/auth/login`

* fix flicker on logout

* fix flicker on error

* fix i18n flicker on signup

Author: KATT

pages/auth/error.tsx

@@ -1,11 +1,14 @@
 import { XIcon } from "@heroicons/react/outline";
+import { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
 import { HeadSeo } from "@components/seo/head-seo";
 
+import { ssrInit } from "@server/lib/ssr";
+
 export default function Error() {
   const { t } = useLocale();
   const router = useRouter();
@@ -48,3 +51,13 @@ export default function Error() {
     </div>
   );
 }
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+}

pages/auth/login.tsx

@@ -1,16 +1,20 @@
+import { GetServerSidePropsContext } from "next";
 import { getCsrfToken, signIn } from "next-auth/client";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
 import { ErrorCode, getSession } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
+import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import AddToHomescreen from "@components/AddToHomescreen";
 import Loader from "@components/Loader";
 import { HeadSeo } from "@components/seo/head-seo";
 
-export default function Login({ csrfToken }) {
+import { ssrInit } from "@server/lib/ssr";
+
+export default function Login({ csrfToken }: inferSSRProps<typeof getServerSideProps>) {
   const { t } = useLocale();
   const router = useRouter();
   const [email, setEmail] = useState("");
@@ -90,7 +94,7 @@ export default function Login({ csrfToken }) {
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div className="bg-white py-8 px-4 mx-2 rounded-sm sm:px-10 border border-neutral-200">
           <form className="space-y-6" onSubmit={handleSubmit}>
-            <input name="csrfToken" type="hidden" defaultValue={csrfToken} hidden />
+            <input name="csrfToken" type="hidden" defaultValue={csrfToken || undefined} hidden />
             <div>
               <label htmlFor="email" className="block text-sm font-medium text-neutral-700">
                 {t("email_address")}
@@ -185,17 +189,24 @@ export default function Login({ csrfToken }) {
   );
 }
 
-Login.getInitialProps = async (context) => {
-  const { req, res } = context;
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const { req } = context;
   const session = await getSession({ req });
+  const ssr = await ssrInit(context);
 
   if (session) {
-    res.writeHead(302, { Location: "/" });
-    res.end();
-    return;
+    return {
+      redirect: {
+        destination: "/",
+        permanent: false,
+      },
+    };
   }
 
   return {
-    csrfToken: await getCsrfToken(context),
+    props: {
+      csrfToken: await getCsrfToken(context),
+      trpcState: ssr.dehydrate(),
+    },
   };
-};
+}

pages/auth/logout.tsx

@@ -1,10 +1,13 @@
 import { CheckIcon } from "@heroicons/react/outline";
+import { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
 import { HeadSeo } from "@components/seo/head-seo";
 
+import { ssrInit } from "@server/lib/ssr";
+
 export default function Logout() {
   const { t } = useLocale();
 
@@ -45,3 +48,13 @@ export default function Logout() {
     </div>
   );
 }
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+}

pages/auth/signup.tsx

@@ -13,6 +13,8 @@ import { HeadSeo } from "@components/seo/head-seo";
 import { Alert } from "@components/ui/Alert";
 import Button from "@components/ui/Button";
 
+import { ssrInit } from "@server/lib/ssr";
+
 type Props = inferSSRProps<typeof getServerSideProps>;
 
 type FormValues = {
@@ -133,6 +135,7 @@ export default function Signup({ email }: Props) {
 }
 
 export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(ctx);
   const token = asStringOrNull(ctx.query.token);
   if (!token) {
     return {
@@ -169,9 +172,17 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
 
   if (existingUser) {
     return {
-      redirect: { permanent: false, destination: "/auth/login?callbackUrl=" + ctx.query.callbackUrl },
+      redirect: {
+        permanent: false,
+        destination: "/auth/login?callbackUrl=" + ctx.query.callbackUrl,
+      },
     };
   }
 
-  return { props: { email: verificationRequest.identifier } };
+  return {
+    props: {
+      email: verificationRequest.identifier,
+      trpcState: ssr.dehydrate(),
+    },
+  };
 };