Problems with WithPageAuthRequired and nextjs dynamic routing

[axxcident]

Hello I’m trying to integrate a next.js project with auth0.

I’m running on next.js v14 and auth0 v. 3.5

The issue I’m having is with protecting my pages with WithPageAuthRequired and using Next.js’s dynamic routing at the same time.

I’ve been looking at examples and I’m trying to combine something like this:

export async function generateMetadata({
  params,
}: {
  params: { user_id: string };
}) {
  return {
    title: 'User Dashboard',
    description: `Dashboard for User: ${params.user_id}`,
  };
}
const UserDashboard = ({ params }: { params: { user_id: string } }) => {
 ... rest of page

With this:

... rest of user page above.
export default withPageAuthRequired(UserDashboard, {
  returnTo: ({ params }: AppRouterPageRouteOpts) => {
    if (params) {
      const user_id = params['user_id'];
      if (typeof user_id === 'string') {
        return `${process.env.NEXT_PUBLIC_BASE_URL}/user-dashboard/${user_id}`
      }
    }
  }
});

But I get some typescript error on “UserDashboard”:

Argument of type '({ params }: {    params: {        user_id: string;    };}) => React.JSX.Element' is not assignable to parameter of type 'AppRouterPageRoute'.
  Types of parameters '__0' and 'obj' are incompatible.
    Type 'AppRouterPageRouteOpts' is not assignable to type '{ params: { user_id: string; }; }'.
      Types of property 'params' are incompatible.
        Type 'Record<string, string | string[]> | undefined' is not assignable to type '{ user_id: string; }'.
          Type 'undefined' is not assignable to type '{ user_id: string; }'.ts(2345)
const UserDashboard: ({ params }: {
    params: {
        user_id: string;
    };
}) => React.JSX.Element

I’m very new to Auth0 and so I’m not sure if I should try to use “withPageAuthRequired” to check whether a user is logged in or not. I find the documentation very abstract.

Have anyone had this issue before and know what to do?

In Summary, tried this:

export default withPageAuthRequired(UserDashboard, {
  returnTo: ({ params }: AppRouterPageRouteOpts) => {
    if (params) {
      const user_id = params['user_id'];
      if (typeof user_id === 'string') {
        return `${process.env.NEXT_PUBLIC_BASE_URL}/user-dashboard/${user_id}`
      }
    }
  }
});

And expected some validation to happen that checks if user i logged in and returns them to the user page or log-in page.

[axxcident]

Found the solution:

const UserDashboardSchema = z.object({
  user_id: z.string(),
});

type UserParams = z.infer<typeof UserDashboardSchema>;

const UserDashboard: (
  obj: AppRouterPageRouteOpts,
) => Promise<React.ReactElement> = async ({ params }) => {
  if (!params || !('user_id' in params)) {
    redirect(`${process.env.NEXT_PUBLIC_BASE_URL}/`);
  }
... rest of page component.

Then before exporting the page I needed to wrap the page/component in withPageAuthRequired like so:

export default withPageAuthRequired(UserDashboard, {
  returnTo: (obj: AppRouterPageRouteOpts) => {
    if (obj && obj.params && 'user_id' in obj.params) {
      const { user_id } = obj.params;
      return `${process.env.NEXT_PUBLIC_BASE_URL}/user-dashboard/${user_id}`;
    }
    return `${process.env.NEXT_PUBLIC_BASE_URL}/`;
  },
});

Using Zod and adjusting the dynamic page for what the expected return type of withPageAuthRequired is and of AppRouterPageRouteOpts. Then I worked.