Next.js withPageAuthRequired with getStaticProps

Question

According to the documentation for @auth0/nextjs-auth0, we can use withPageAuthRequired to trigger the login screen on pages that require authentication.

Short variant: export const getServerSideProps = withPageAuthRequired();

However, what should I do if I need to use getStaticProps to pre-render a page at build time, since it cannot be used together with getServerSideProps? Is there any way to use withPageAuthRequired on statically generated pages that are served on request?

Right now, I'm performing a double check on the client side to verify authentication, but I would prefer to use a server-side check like I do on other pages.

P.S. There's also a way to use withPageAuthRequired on the client side, but that approach doesn't fit my use case.

Answer 1

Since getStaticProps() is used to build a static page (i.e., no server-side logic/rendering at request time), the auth check and redirect to login will have to happen on the client side.

You might be able to get the behaviour you want by sticking a proxy in front of the static resource (e.g., using Lambda@Edge), though I'm not very familiar with this approach yet.

---

From your question it sounds like you are already familiar with how to do the check/redirect on the client side, but for the benefit of others who come across this post in the future:

To fetch user information on the client side, add a <UserProvider> to your app, and call the useUser() hook in client-side components.

See docs:

Wrap your pages/_app.js component with the UserProvider component:

// pages/_app.js
import React from 'react';
import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

You can now determine if a user is authenticated by checking that the user object returned by the useUser() hook is defined. You can also log in or log out your users from the frontend layer of your Next.js application by redirecting them to the appropriate automatically-generated route:

// pages/index.js
import { useUser } from '@auth0/nextjs-auth0';

export default function Index() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  if (user) {
    return (
      <div>
        Welcome {user.name}!
        <a href="/api/auth/logout">Logout</a>
      </div>
    );
  }

  return <a href="/api/auth/login">Login</a>;
}

For other comprehensive examples, see the EXAMPLES.md document.

An alternative approach that uses withPageAuthRequired() on the client side:

import React from 'react';
import { withPageAuthRequired } from '@auth0/nextjs-auth0';

import Layout from '../components/layout';

export default withPageAuthRequired(function Profile({ user }) {
  return (
    <Layout>
      <h1>Profile</h1>
      <h4>Profile</h4>
      <pre data-testid="profile">{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  );
});

Linked from additional examples.