Next.js Auth0 AuthGate Strategy

_app.tsx

import AppProviders from "@/components/AppProviders";
import AppShell from "@/components/AppShell";
import { withAuth } from "@/lib/auth0/with-auth";
import { AppProps } from "next/app";
import { ReactNode } from "react";

interface MyAppProps extends AppProps {
  err: Error;
  Component: AppProps["Component"] & {
    displayAppShell?: boolean;
    requireAuth?: boolean;
  };
}

function makeAuthGate({
  children,
  requireAuth,
}: {
  children?: ReactNode;
  requireAuth: boolean;
}) {
  if (requireAuth) {
    return withAuth(() => <>{children}</>);
  } else {
    return () => <>{children}</>;
  }
}

function MyApp({ Component, pageProps, err }: MyAppProps) {
  const displayAppShell = Component.displayAppShell ?? true;
  const requireAuth = Component.requireAuth ?? true;

  const AuthGate = makeAuthGate({
    children: displayAppShell ? (
      <AppShell>
        <Component {...pageProps} err={err} />
      </AppShell>
    ) : (
      <Component {...pageProps} err={err} />
    ),
    requireAuth,
  });

  return (
    <AppProviders>
      <AuthGate {...pageProps} />
    </AppProviders>
  );
}

export default MyApp;

with-auth.tsx

import {
  withPageAuthRequired,
  WithPageAuthRequiredOptions,
  WithPageAuthRequiredProps,
} from "@auth0/nextjs-auth0";
import { ComponentType } from "react";

export function withAuth(
  Component: ComponentType<WithPageAuthRequiredProps>,
  options: WithPageAuthRequiredOptions = {}
) {
  return withPageAuthRequired(Component, {
    onRedirecting: () => <p>Authenticating...</p>,
    ...options,
  });
}