CODEWITHSUNDEEP
next.jsauth0getstaticprops
Arhitector
Arhitector

Reputation: 41

Next.js withPageAuthRequired with getStaticProps

According documentation @auth0/nextjs-auth0 we can use withPageAuthRequired for trigger login screen on pages required login.

short variant: export const getServerSideProps = withPageAuthRequired();

But what to do if I need to use getStaticProps for pre-render page at build time which can't be used together with getServerSideProps? Is there any way to use withPageAuthRequired on request static generated pages?

Right now I am using double check on client side for check auth. But I would rather use a server side check as i use on other pages.

P.S. There is way to use withPageAuthRequired on client side as well. This is not suitable for my use

Upvotes: 3

Views: 8556

Answers (1)

todofixthis
todofixthis

Reputation: 1142

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.

Upvotes: 3

Related Questions