update nextjs & nextauth, improve loading-indicator, improve auth-redirect-flow

2026-04-24 03:21:20 -05:00 · 2022-07-20 09:39:22 +02:00
parent 5539ec59b3
commit 3afe4a8a97
4 changed files with 370 additions and 91 deletions
@@ -1,9 +1,14 @@
+import { TailSpin } from "react-loader-spinner";
+
 export default function Loading() {
  return (
    <div className="min-h-screen px-4 py-16 bg-white sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
      <div className="mx-auto max-w-max">
-        <main className="sm:flex">
-          <p className="mt-1 text-base text-ui-gray-dark">Loading...</p>
+        <main>
+          <div className="flex justify-center">
+            <TailSpin color="#1f2937" height={30} width={30} />
+          </div>
+          <p className="mt-5 text-sm text-ui-gray-dark">Loading...</p>
        </main>
      </div>
    </div>
@@ -1,5 +1,6 @@
 import { signIn, useSession } from "next-auth/react";
 import Head from "next/head";
+import { useEffect, useState } from "react";
 import { classNames } from "../../lib/utils";
 import Loading from "../Loading";
 import MenuBreadcrumbs from "./MenuBreadcrumbs";
@@ -27,16 +28,24 @@ export default function BaseLayoutAuthorized({
  limitHeightScreen = false,
 }: BaseLayoutAuthorizedProps) {
  const { data: session, status } = useSession();
+  const [loading, setLoading] = useState(true);

-  if (status === "loading") {
+  console.log(status);
+
+  useEffect(() => {
+    if (status !== "loading") {
+      if (!session) {
+        signIn();
+      } else {
+        setLoading(false);
+      }
+    }
+  }, [session, status]);
+
+  if (status === "loading" || loading) {
    return <Loading />;
  }

-  if (!session) {
-    signIn();
-    return <div>You need to be authenticated to view this page.</div>;
-  }
-
  return (
    <>
      <Head>