Type Alias WithPageAuthRequiredAppRouter

Wrap your Server Component with this method to make sure the user is authenticated before visiting the page.

// app/protected-page/page.js
import { auth0 } from "@/lib/auth0";

const ProtectedPage = auth0.withPageAuthRequired(async function ProtectedPage() {
  return <div>Protected content</div>;
}, { returnTo: '/protected-page' });

export default ProtectedPage;
Copy

If the user visits /protected-page without a valid session, it will redirect the user to the login page.

Note: Server Components are not aware of the req or the url of the page. So if you want the user to return to the page after login, you must specify the returnTo option.

You can specify a function to returnTo that accepts the params (A Promise that resolves to an object containing the dynamic route parameters) and searchParams (A Promise that resolves to an object containing the search parameters of the current URL) argument from the page, to preserve dynamic routes and search params.

// app/protected-page/[slug]/page.js
import { AppRouterPageRouteOpts } from '@auth0/nextjs-auth0/server';
import { auth0 } from "@/lib/auth0";

const ProtectedPage = auth0.withPageAuthRequired(async function ProtectedPage({
  params, searchParams
}: AppRouterPageRouteOpts) {
  const slug = (await params)?.slug as string;
  return <div>Protected content for {slug}</div>;
}, {
  returnTo({ params }) {
    return `/protected-page/${(await params)?.slug}`;
  }
});

export default ProtectedPage;
Copy