Support for PageProps and LayoutProps in withPageAuthRequired

[robcaldecott]

Checklist

• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Describe the problem you'd like to have solved

We are working to move session checks out of middleware.ts to the page or layout level using the withPageAuthRequired helper. One feature we lose by doing this is support for the new NextJS PageProps and LayoutProps types. Having strongly typed routes is a real win and it would be great for withPageAuthRequired to support them.

For example, imagine you have /customers/[id]/details/page.tsx, you can do this:

export async function Page(props: PageProps<"/customers/[id]/details">) {
  // props is typed correctly, with props.params and props.searchParams
  const { id } = await props.params;
  ...
}

However, attempting to use PageProps with withPageAuthRequired results in TS errors.

export default auth0.withPageAuthRequired(async function Page(
  props: PageProps<"/customers/[id]/details">,
) {
  ...
});

You get the following TS error:

Argument of type '(props: PageProps<"/customers/[id]/details">) => Promise<Element>' is not assignable to parameter of type 'WithPageAuthRequiredPageRouterOptions | AppRouterPageRoute | undefined'.
  Type '(props: PageProps<"/customers/[id]/details">) => Promise<Element>' is not assignable to type 'AppRouterPageRoute'.
    Types of parameters 'props' and 'obj' are incompatible.
      Type 'AppRouterPageRouteOpts' is not assignable to type 'PageProps<"/customers/[id]/details">'.
        Types of property 'params' are incompatible.
          Type 'Promise<Record<string, string | string[]>> | undefined' is not assignable to type 'Promise<{ id: string; }>'.
            Type 'undefined' is not assignable to type 'Promise<{ id: string; }>'.ts(2345)

Describe the ideal solution

Ideally, withPageAuthRequired would work with both PageProps and LayoutProps.

Alternatives and current workarounds

No response

Additional context

No response

[nandan-bhat]

Hi @robcaldecott ,

Thanks for filing this issue. Give us some time, we'll look into this and get back to you.

[robcaldecott]

Thanks @nandan-bhat and I have also noticed the following:

No support for Layouts
It would be useful to protect layout.tsx as well. And while this works, the props are wrong as a layout has a children prop:

export default auth0.withPageAuthRequired(
 async function Layout(props) {
  // props.children is not defined
 },
 { returnTo: "/" }
);

withApiAuthRequired type issues
If we want to protect an API route, the function params come through as any.

Before

export async function GET(
  req: NextRequest,
  ctx: RouteContext<'/api/users/[id]'>
) {
  // Get the session
  const session = await auth0.getSession();
}

After

export const GET = auth0.withApiAuthRequired(async function handler(req, ctx) {
  // req and ctx typed as any
  const session = await auth0.getSession();
});