withPageAuthRequired doesn't work with typescript/nextjs?

Help
,
1

I am trying to restrict access to a page using auth0. The code below works fine HOWEVER , I get a typescript error when I try to compile it. Is there a more idiomatic way to restrict a page using auth0? Or is there some trick to get the types to work?

"use client"
import { withPageAuthRequired } from "@auth0/nextjs-auth0/client";
export function Page() {

    // return <Call channelId={params.channel_id}></Call>


    return <div></div>
}


export default withPageAuthRequired(Page, {

})

Error:

 error TS2344: Type 'OmitWithTag<typeof import("app/[id]/page"), "default" | "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | ... 7 more ... | "generateViewport", "">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'Page' is incompatible with index signature.
    Type '() => Element' is not assignable to type 'never'.

  8 checkFields<Diff<{
                ~~~~~~
  9   default: Function
    ~~~~~~~~~~~~~~~~~~~
... 
 24 
    
 25 }, TEntry, ''>>()
    ~~~~~~~~~~~~~~
1 Like
2

I’m having the same problem:

.next/types/app/user/[username]/layout.ts:28:13
Type error: Type ‘OmitWithTag<AppRouterPageRouteOpts, keyof LayoutProps, “default”>’ does not satisfy the constraint ‘{ [x: string]: never; }’.
Property ‘searchParams’ is incompatible with index signature.
Type ‘{ [key: string]: string | string | undefined; }’ is not assignable to type ‘never’.

26 |
27 | // Check the prop type of the entry function

28 | checkFields<Diff<LayoutProps, FirstArg<TEntry[‘default’]>, ‘default’>>()

Code:
export default withPageAuthRequired(
async function Page({ children, params }: Props) {
return (

1 Like
3

bumping this post - needs addressing