Setup Supabase SSR

apps/web/components/dialogs/ai-expand-concept-prompt-dialog.component.tsx

@@ -72,6 +72,7 @@ export default function AiExpandConceptPromptDialogComponent({
   }, [open, content]);
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -81,6 +82,7 @@ export default function AiExpandConceptPromptDialogComponent({
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -100,6 +102,7 @@ export default function AiExpandConceptPromptDialogComponent({
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"

apps/web/components/dialogs/ai-prood-read-dialog.component.tsx

@@ -65,6 +65,7 @@ export default function AiProofReadDialogComponent({ open, setOpen, content }) {
   }, [open, content]);
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -74,6 +75,7 @@ export default function AiProofReadDialogComponent({ open, setOpen, content }) {
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -93,6 +95,7 @@ export default function AiProofReadDialogComponent({ open, setOpen, content }) {
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"

apps/web/components/dialogs/ai-suggest-title-prompt-dialog.component.tsx

@@ -1,9 +1,9 @@
+import { SpinnerWithSpacing } from "@changes-page/ui";
+import { convertMarkdownToPlainText } from "@changes-page/utils";
 import { Dialog, Transition } from "@headlessui/react";
-import React, { Fragment, useEffect, useRef, useState } from "react";
-import { promptSuggestTitle } from "../../utils/useAiAssistant";
 import { LightningBoltIcon } from "@heroicons/react/solid";
-import { convertMarkdownToPlainText } from "@changes-page/utils";
-import { SpinnerWithSpacing } from "@changes-page/ui";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { promptSuggestTitle } from "../../utils/useAiAssistant";
 import { notifyError } from "../core/toast.component";
 
 export default function AiSuggestTitlePromptDialogComponent({
@@ -37,6 +37,7 @@ export default function AiSuggestTitlePromptDialogComponent({
   }, [open, content]);
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -46,6 +47,7 @@ export default function AiSuggestTitlePromptDialogComponent({
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -65,6 +67,7 @@ export default function AiSuggestTitlePromptDialogComponent({
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"

apps/web/components/dialogs/confirm-delete-dialog.component.tsx

@@ -1,10 +1,10 @@
 /* This example requires Tailwind CSS v2.0+ */
+import { Spinner } from "@changes-page/ui";
 import { Dialog, Transition } from "@headlessui/react";
 import { ExclamationIcon } from "@heroicons/react/outline";
 import classNames from "classnames";
 import Head from "next/head";
 import { Fragment, useRef, useState } from "react";
-import { Spinner } from "@changes-page/ui";
 
 export default function ConfirmDeleteDialog({
   itemName,
@@ -25,7 +25,7 @@ export default function ConfirmDeleteDialog({
           <meta name="theme-color" content="#dc2626" />
         </Head>
       )}
-
+      {/* @ts-ignore */}
       <Transition.Root show={open} as={Fragment}>
         <Dialog
           as="div"
@@ -35,6 +35,7 @@ export default function ConfirmDeleteDialog({
         >
           <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
             <Transition.Child
+              // @ts-ignore
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0"
@@ -54,6 +55,7 @@ export default function ConfirmDeleteDialog({
               &#8203;
             </span>
             <Transition.Child
+              // @ts-ignore
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"

apps/web/components/dialogs/date-time-prompt-dialog.component.tsx

@@ -42,6 +42,7 @@ export default function DateTimePromptDialog({
   }, [open]);
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -51,6 +52,7 @@ export default function DateTimePromptDialog({
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -70,6 +72,7 @@ export default function DateTimePromptDialog({
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"

apps/web/components/dialogs/manage-team-dialog.component.tsx

@@ -85,6 +85,7 @@ export default function ManageTeamDialog({
   });
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -94,6 +95,7 @@ export default function ManageTeamDialog({
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -113,6 +115,7 @@ export default function ManageTeamDialog({
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"

apps/web/components/dialogs/warning-dialog.component.tsx

@@ -1,9 +1,9 @@
 /* This example requires Tailwind CSS v2.0+ */
+import { Spinner } from "@changes-page/ui";
 import { Dialog, Transition } from "@headlessui/react";
 import { ExclamationIcon } from "@heroicons/react/outline";
 import classNames from "classnames";
 import { Fragment, useRef } from "react";
-import { Spinner } from "@changes-page/ui";
 
 export default function WarningDialog({
   title,
@@ -16,6 +16,7 @@ export default function WarningDialog({
   const cancelButtonRef = useRef(null);
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -25,6 +26,7 @@ export default function WarningDialog({
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -44,6 +46,7 @@ export default function WarningDialog({
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"

apps/web/components/dialogs/widget-code-dialog.tsx

@@ -18,6 +18,7 @@ export default function WidgetCodeDialog({ urlSlug, open, setOpen }) {
   );
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -27,6 +28,7 @@ export default function WidgetCodeDialog({ urlSlug, open, setOpen }) {
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -46,6 +48,7 @@ export default function WidgetCodeDialog({ urlSlug, open, setOpen }) {
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"

apps/web/components/forms/post-form.component.tsx

@@ -204,6 +204,7 @@ export default function PostFormComponent({
 
                     <Transition
                       show={open}
+                      // @ts-ignore
                       as={Fragment}
                       leave="transition ease-in duration-100"
                       leaveFrom="opacity-100"
@@ -319,6 +320,7 @@ export default function PostFormComponent({
                 </Menu.Button>
 
                 <Transition
+                  // @ts-ignore
                   as={Fragment}
                   leave="transition ease-in duration-100"
                   leaveFrom="opacity-100"
@@ -586,6 +588,7 @@ export default function PostFormComponent({
             <div className="relative bg-slate-50 dark:bg-slate-900">
               {!editNotes ? (
                 formik.values.notes ? (
+                  // @ts-ignore
                   <ReactMarkdown className="pt-4 mx-auto px-6 prose dark:prose-invert prose-indigo max-w-full">
                     {formik.values.notes}
                   </ReactMarkdown>

apps/web/components/layout/blog-layout.component.tsx

@@ -201,6 +201,7 @@ export default function BlogLayout({
             ) : null}
 
             <div className="blog-content-override prose dark:prose-invert prose-indigo mx-auto mt-6 max-w-[70ch]">
+              {/* @ts-ignore */}
               <ReactMarkdown
                 rehypePlugins={[
                   rehypeRaw,

apps/web/components/layout/header.component.tsx

@@ -212,6 +212,7 @@ export default function HeaderComponent() {
                           </div>
                           <Transition
                             show={open}
+                            // @ts-ignore
                             as={Fragment}
                             enter="transition ease-out duration-100"
                             enterFrom="transform opacity-0 scale-95"

apps/web/components/layout/page.component.tsx

@@ -126,6 +126,7 @@ export default function Page({
                         </Menu.Button>
 
                         <Transition
+                          // @ts-ignore
                           as={Fragment}
                           enter="transition ease-out duration-200"
                           enterFrom="transform opacity-0 scale-95"
@@ -169,6 +170,7 @@ export default function Page({
               <div className="hidden sm:block">
                 <nav className="-mb-px flex space-x-8">
                   {tabs.map((tab) => (
+                    // @ts-ignore
                     <Link
                       key={tab.name}
                       href={tab.href}

apps/web/components/marketing/changelog.tsx

@@ -1,8 +1,8 @@
+import { IPost } from "@changes-page/supabase/types/page";
 import { Transition } from "@headlessui/react";
+import { SpeakerphoneIcon } from "@heroicons/react/outline";
 import { useRouter } from "next/router";
 import { Fragment, useEffect, useState } from "react";
-import { IPost } from "@changes-page/supabase/types/page";
-import { SpeakerphoneIcon } from "@heroicons/react/outline";
 
 type IPostWithUrl = IPost & { url: string };
 
@@ -44,6 +44,7 @@ export default function Changelog() {
     <>
       <Transition
         show
+        // @ts-ignore
         as={Fragment}
         enter="transform ease-out duration-300 transition"
         enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"

apps/web/components/post/post-options.tsx

@@ -1,16 +1,16 @@
-import { Menu, Transition } from "@headlessui/react";
-import { Fragment } from "react";
-import classNames from "classnames";
 import { PostStatus } from "@changes-page/supabase/types/page";
-import { MenuItem } from "../core/menu.component";
+import { Menu, Transition } from "@headlessui/react";
+import { LocationMarkerIcon as RemovePinIcon } from "@heroicons/react/outline";
 import {
   LocationMarkerIcon as AddPinIcon,
   ExternalLinkIcon,
   PencilAltIcon,
   TrashIcon,
 } from "@heroicons/react/solid";
-import { LocationMarkerIcon as RemovePinIcon } from "@heroicons/react/outline";
+import classNames from "classnames";
+import { Fragment } from "react";
 import { ROUTES } from "../../data/routes.data";
+import { MenuItem } from "../core/menu.component";
 
 const PostOptions = ({
   post,
@@ -23,6 +23,7 @@ const PostOptions = ({
   floating = false,
 }) => (
   <Transition
+    // @ts-ignore
     as={Fragment}
     enter="transition ease-out duration-100"
     enterFrom="transform opacity-0 scale-95"

apps/web/components/post/post.tsx

@@ -310,6 +310,7 @@ export function Post({
             </span>
 
             <div className="prose dark:prose-invert text-gray-900 dark:text-gray-300 break-words">
+              {/* @ts-ignore */}
               <ReactMarkdown
                 rehypePlugins={[
                   rehypeRaw,

apps/web/components/roadmap/RoadmapItemModal.tsx

@@ -43,9 +43,11 @@ export default function RoadmapItemModal({
   );
 
   return (
+    // @ts-ignore
     <Transition appear show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-10" onClose={onClose}>
         <Transition.Child
+          // @ts-ignore
           as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
@@ -60,6 +62,7 @@ export default function RoadmapItemModal({
         <div className="fixed inset-0 overflow-y-auto">
           <div className="flex min-h-full items-end justify-center p-0 text-center sm:items-center sm:p-4">
             <Transition.Child
+              // @ts-ignore
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"

apps/web/middleware.ts

@@ -1,20 +1,20 @@
-import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
+import { createMiddlewareClient } from "./utils/supabase/middleware";
 
 export async function middleware(req: NextRequest) {
-  // We need to create a response and hand it to the supabase client to be able to modify the response headers.
-  const res = NextResponse.next();
-  const supabase = createMiddlewareClient({ req, res });
+  const { supabase, response } = createMiddlewareClient(req);
+
+  await supabase.auth.getSession();
+
   const {
-    data: { session },
-  } = await supabase.auth.getSession();
+    data: { user },
+  } = await supabase.auth.getUser();
 
-  if (session?.user) {
-    return res;
+  if (user) {
+    return response;
   }
 
-  // Auth condition not met, redirect to home page.
   const redirectUrl = req.nextUrl.clone();
   redirectUrl.pathname = "/login";
   redirectUrl.searchParams.set(`redirectedFrom`, req.nextUrl.pathname);