Added forgotten redirect/notFound fields into gsspWithNonce function

.changeset/red-crabs-tickle.md

@@ -0,0 +1,7 @@
+---
+"e2e": patch
+"@next-safe/middleware": patch
+---
+
+fix(middleware): Added forgotten redirect/notFound fields into gsspWithNonce function.
+fix(e2e): Aadded test pages to test redirect/notFound fields in gsspWithNonce.

apps/e2e/components/InternalTestLinks.tsx

@@ -0,0 +1,26 @@
+export const InternalTestLinks = () => {
+  return (
+    <ul>
+      <li>
+        <a href="/gsp">Page with getStaticProps</a> (Hash-based)
+      </li>
+      <li>
+        <a href="/gssp">Page with getServerSideProps</a> (Nonce-based)
+      </li>
+      <li>
+        <a href="/gssp-redirect">Page with getServerSideProps</a> (Nonce-based (redirect props))
+      </li>
+      <li>
+        <a href="/gssp-not-found">Page with getServerSideProps</a> (Nonce-based (notFound props) - page should show 404 error)
+      </li>
+      <li>
+        <a href="/isr/gsp">
+          Page with getStaticProps + <code>revalidate</code> (ISR)
+        </a>{' '}
+        (Hash-based)
+      </li>
+    </ul>
+  );
+};
+
+export default InternalTestLinks;

apps/e2e/components/TestNavigation.tsx

@@ -0,0 +1,12 @@
+import { InternalTestLinks } from './InternalTestLinks';
+
+export const TestNavigation = () => {
+  return (
+    <>
+      <h2>Internal navigation to other pages</h2>
+      <InternalTestLinks />
+    </>
+  );
+};
+
+export default TestNavigation;

apps/e2e/pages/gssp-not-found/index.tsx

@@ -0,0 +1,18 @@
+import Layout from 'components/Layout';
+import { gsspWithNonce } from '@next-safe/middleware/dist/document';
+
+export const getServerSideProps = gsspWithNonce(async (ctx) => {
+  return {
+    notFound: true,
+  };
+});
+
+const Page = () => {
+  return (
+    <Layout>
+      Page should show 404 error
+    </Layout>
+  );
+};
+
+export default Page;

apps/e2e/pages/gssp-redirect/index.tsx

@@ -0,0 +1,21 @@
+import Layout from 'components/Layout';
+import { gsspWithNonce } from '@next-safe/middleware/dist/document';
+
+export const getServerSideProps = gsspWithNonce(async (ctx) => {
+  return {
+    redirect: {
+      destination: '/gssp-redirect/redirected',
+      permanent: false,
+    },
+  };
+});
+
+const Page = () => {
+  return (
+    <Layout>
+      Page should redirect to /gssp-redirected
+    </Layout>
+  );
+};
+
+export default Page;

apps/e2e/pages/gssp-redirect/redirected.tsx

@@ -0,0 +1,46 @@
+import "twin.macro";
+import { gsspWithNonce } from "@next-safe/middleware/dist/document";
+import Prose from '../../components/Prose';
+import Hydrated from '../../components/Hydrated';
+import StyleElem from '../../components/StyleElem';
+import StyleAttr from '../../components/StyleAttr';
+import TestNavigation from '../../components/TestNavigation';
+import Layout from '../../components/Layout';
+
+export const getServerSideProps = gsspWithNonce(async (ctx) => {
+  return {
+    props: {},
+  };
+});
+
+const Page = () => {
+
+  return (
+    <Layout>
+      <Prose>
+        <h1>A Page with getServerSideProps (redirected)</h1>
+        <Hydrated />
+        <p>
+          It get's prerendered per request and has access to request and
+          response data
+        </p>
+        <p>
+          That's why it can use Nonce-based CSP, it has the chance to set a
+          fresh nonce as attribute to scripts on each request.
+        </p>
+        <h2>Inline Styles</h2>
+        <StyleElem Tag="p">
+          Hi, i am styled with by an inline style tag. If I am <b>teal</b>, I am
+          trusted by CSP
+        </StyleElem>
+        <StyleAttr Tag="p" color="blue">
+          Hi, i am styled with by an inline style attribute, If I am <b>blue</b>
+          , I am trusted by CSP
+        </StyleAttr>
+        <TestNavigation />
+      </Prose>
+    </Layout>
+  );
+};
+
+export default Page;

apps/e2e/pages/gssp/index.tsx

@@ -5,6 +5,7 @@ import Hydrated from "components/Hydrated";
 import StyleElem from "components/StyleElem";
 import StyleAttr from "components/StyleAttr";
 import { gsspWithNonce } from "@next-safe/middleware/dist/document";
+import TestNavigation from "../../components/TestNavigation";
 
 export const getServerSideProps = gsspWithNonce(async (ctx) => {
   return {
@@ -35,19 +36,7 @@ const Page = () => {
           Hi, i am styled with by an inline style attribute, If I am <b>blue</b>
           , I am trusted by CSP
         </StyleAttr>
-        <h2>Internal navigation to other pages</h2>
-        <ul>
-          <li>
-            <Link href="/gsp">Page with getStaticProps</Link>
-          </li>
-          <li>
-            <Link href="/isr/gsp">
-              <a>
-                Page with getStaticProps + <code>revalidate</code> (ISR)
-              </a>
-            </Link>
-          </li>
-        </ul>
+        <TestNavigation />
       </Prose>
     </Layout>
   );

apps/e2e/pages/index.tsx

@@ -1,6 +1,7 @@
-import Prose from "components/Prose";
-import Container from "components/Container";
-import Hydrated from "components/Hydrated";
+import Prose from 'components/Prose';
+import Container from 'components/Container';
+import Hydrated from 'components/Hydrated';
+import InternalTestLinks from '../components/InternalTestLinks';
 
 // pages without a data fetching function are static pages and must use a Hash-based CSP.
 const Page = () => {
@@ -18,20 +19,7 @@ const Page = () => {
         </p>
         <h2>Prerendering strategies:</h2>
         <p>This page has no data fetching method</p>
-        <ul>
-          <li>
-            <a href="/gsp">Page with getStaticProps</a> (Hash-based)
-          </li>
-          <li>
-            <a href="/gssp">Page with getServerSideProps</a> (Nonce-based)
-          </li>
-          <li>
-            <a href="/isr/gsp">
-              Page with getStaticProps + <code>revalidate</code> (ISR)
-            </a>{" "}
-            (Hash-based)
-          </li>
-        </ul>
+        <InternalTestLinks />
         <h2>With Mantine:</h2>
         <ul>
           <li>

apps/e2e/pages/isr/[slug].tsx

@@ -1,9 +1,9 @@
-import Link from "next/link";
-import Prose from "components/Prose";
-import Layout from "components/Layout";
-import Hydrated from "components/Hydrated";
-import StyleElem from "components/StyleElem";
-import StyleAttr from "components/StyleAttr";
+import Prose from 'components/Prose';
+import Layout from 'components/Layout';
+import Hydrated from 'components/Hydrated';
+import StyleElem from 'components/StyleElem';
+import StyleAttr from 'components/StyleAttr';
+import TestNavigation from '../../components/TestNavigation';
 
 export const getStaticPaths = async () => {
   // as long as we build-time prerender at least one path, it will work with Hash-based strict CSP.
@@ -63,15 +63,7 @@ const Page = ({ random, revalidate }) => {
           Hi, i am styled with by an inline style attribute, If I am{" "}
           <b>fuchsia</b>, I am trusted by CSP
         </StyleAttr>
-        <h2>Internal navigation to other pages:</h2>
-        <ul>
-          <li>
-            <Link href="/gsp">Page with getStaticProps</Link>
-          </li>
-          <li>
-            <Link href="/gssp">Page with getServerSideProps</Link>
-          </li>
-        </ul>
+        <TestNavigation />
       </Prose>
     </Layout>
   );

packages/next-safe-middleware/src/document/NextPageContext/index.ts

@@ -11,10 +11,18 @@ export function gsspWithNonce<
 ): GetServerSideProps<P & { nonce: string }, Q, D> {
   return async (ctx) => {
     const gsspResult = await getServerSideProps(ctx);
+    const nonce = getCreateCtxNonceIdempotent(ctx);
+    if ("notFound" in gsspResult) {
+      const notFound = await gsspResult.notFound;
+      return { props: { nonce }, notFound: notFound };
+    }
+    if ("redirect" in gsspResult) {
+      const redirect = await gsspResult.redirect;
+      return { props: { nonce }, redirect: redirect };
+    }
     if ("props" in gsspResult) {
-      const nonce = getCreateCtxNonceIdempotent(ctx);
       const props = await gsspResult.props;
-      return { props: { ...props, nonce } };
+      return { props: { ...props, nonce }};
     }
   };
 }