Removed redirect clientside session logic from pages and moved to shell

components/Shell.tsx

@@ -27,11 +27,14 @@ export default function Shell(props) {
     }
 
     const logoutHandler = () => {
-        signOut();
+        signOut({ redirect: false }).then( () => router.push('/auth/logout') );
-        router.push('/');
     }
 
-    return (
+    if ( ! loading && ! session ) {
+        router.replace('/auth/login');
+    }
+
+    return session && (
         <div>
             <div className="bg-gray-800 pb-32">
                 <nav className="bg-gray-800">
@@ -146,4 +149,4 @@ export default function Shell(props) {
             </main>
         </div>
 );
-}
+}

pages/availability/event/[type].tsx

@@ -17,10 +17,6 @@ export default function EventType(props) {
 
     if (loading) {
         return <p className="text-gray-400">Loading...</p>;
-    } else {
-        if (!session) {
-            window.location.href = "/auth/login";
-        }
     }
 
     async function updateEventTypeHandler(event) {
@@ -164,7 +160,9 @@ export default function EventType(props) {
 
 export async function getServerSideProps(context) {
     const session = await getSession(context);
-
+    if (!session) {
+        return { redirect: { permanent: false, destination: '/auth/login' } };
+    }
     const user = await prisma.user.findFirst({
         where: {
             email: session.user.email,

pages/availability/index.tsx

@@ -28,10 +28,6 @@ export default function Availability(props) {
 
     if (loading) {
         return <p className="text-gray-400">Loading...</p>;
-    } else {
-        if (!session) {
-            window.location.href = "/auth/login";
-        }
     }
 
     function toggleAddModal() {
@@ -141,11 +137,11 @@ export default function Availability(props) {
                                         </tr>
                                     </thead>
                                     <tbody className="bg-white divide-y divide-gray-200">
-                                        {props.types.map((eventType) => 
+                                        {props.types.map((eventType) =>
                                             <tr>
                                                 <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                                     {eventType.title}
-                                                    {eventType.hidden && 
+                                                    {eventType.hidden &&
                                                         <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                                                             Hidden
                                                         </span>
@@ -186,7 +182,7 @@ export default function Availability(props) {
                         </div>
                     </div>
                 </div>
-                {showAddModal && 
+                {showAddModal &&
                     <div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
                         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                             <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
@@ -284,7 +280,7 @@ export default function Availability(props) {
                         </div>
                     </div>
                 }
-                {showChangeTimesModal && 
+                {showChangeTimesModal &&
                     <div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
                         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                             <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
@@ -353,6 +349,9 @@ export default function Availability(props) {
 
 export async function getServerSideProps(context) {
     const session = await getSession(context);
+    if (!session) {
+        return { redirect: { permanent: false, destination: '/auth/login' } };
+    }
 
     const user = await prisma.user.findFirst({
         where: {
@@ -382,4 +381,4 @@ export async function getServerSideProps(context) {
     return {
       props: {user, types}, // will be passed to the page component as props
     }
-}
+}

pages/index.tsx

@@ -6,14 +6,9 @@ import { signIn, useSession, getSession } from 'next-auth/client';
 
 export default function Home(props) {
     const [ session, loading ] = useSession();
-
     if (loading) {
         return <p className="text-gray-400">Loading...</p>;
     }
-    if (!session) {
-        window.location.href = "/auth/login";
-        return;
-    }
 
     return(
         <div>

pages/integrations/[integration].tsx

@@ -13,10 +13,6 @@ export default function integration(props) {
 
     if (loading) {
         return <p className="text-gray-400">Loading...</p>;
-    } else {
-        if (!session) {
-            window.location.href = "/";
-        }
     }
 
     function toggleShowAPIKey() {

pages/integrations/index.tsx

@@ -13,10 +13,6 @@ export default function Home({ integrations }) {
 
     if (loading) {
         return <p className="text-gray-400">Loading...</p>;
-    } else {
-        if (!session) {
-            window.location.href = "/";
-        }
     }
 
     function toggleAddModal() {
@@ -181,7 +177,9 @@ const validJson = (jsonString: string) => {
 
 export async function getServerSideProps(context) {
     const session = await getSession(context);
-
+    if (!session) {
+        return { redirect: { permanent: false, destination: '/auth/login' } };
+    }
     const user = await prisma.user.findFirst({
         where: {
             email: session.user.email,

pages/settings/password.tsx

@@ -15,10 +15,6 @@ export default function Settings(props) {
 
     if (loading) {
         return <p className="text-gray-400">Loading...</p>;
-    } else {
-        if (!session) {
-            window.location.href = "/auth/login";
-        }
     }
 
     const closeSuccessModal = () => { setSuccessModalOpen(false); }
@@ -88,6 +84,9 @@ export default function Settings(props) {
 
 export async function getServerSideProps(context) {
     const session = await getSession(context);
+    if (!session) {
+        return { redirect: { permanent: false, destination: '/auth/login' } };
+    }
 
     const user = await prisma.user.findFirst({
         where: {

pages/settings/profile.tsx

@@ -22,10 +22,6 @@ export default function Settings(props) {
 
     if (loading) {
         return <p className="text-gray-400">Loading...</p>;
-    } else {
-        if (!session) {
-            window.location.href = "/auth/login";
-        }
     }
 
     const closeSuccessModal = () => { setSuccessModalOpen(false); }
@@ -159,6 +155,9 @@ export default function Settings(props) {
 
 export async function getServerSideProps(context) {
     const session = await getSession(context);
+    if (!session) {
+        return { redirect: { permanent: false, destination: '/auth/login' } };
+    }
 
     const user = await prisma.user.findFirst({
         where: {