User authentication + dynamic routing problems (Auth0 & next.js App Router)

Question

I have the basic Auth0 setup with app/api/[auth0]/route.ts and so users can log in/out but there is no validation to check and redirect a user to the start page if they haven't logged in.

So I've been trying to integrate some sort of user-authentication on my profile page. But my profile (app/user-dashboard/[user_id]/page.tsx) page is configured with dynamic routing like so:

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

Very similar to how nextjs docs explain in it nextjs.org. And I've tried to implement "withPageAuthRequired" on this page: like so:

... 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.

Answer 1

The error you are seeing comes from the expected type (Record<string, string | string[]> | undefined) not matching your specified type user_id: string. I agree the documentation is a bit lacking in this regard.

My suggestion is to not type your params in your Page.tsx

const UserDashboard = ({ params }) => {
  // ...
}

And then before using the params check that they are valid, either manually or by using a validation library such as Zod. That could look like this:

const UserDashboard = ({ params: rawParams }) => {
  const params = z
    .object({
      user_id: z.string()
    })
    .safeParse(rawParams);

  if (!params.success) redirect('/');
  // ...
}

export default withPageAuthRequired(UserDashboard, {
  returnTo: ({ params: rawParams }) => {
  const params = z
    .object({
      user_id: z.string()
    })
    .safeParse(rawParams);

    if (params.success) return `${process.env.NEXT_PUBLIC_BASE_URL}/user-dashboard/${user_id}`;
  }
});