When using getStaticProps() to create a static page (without server-side logic/rendering at request time), any authentication checks and redirection to the login page will need to occur on the client side.
One potential solution could involve placing a proxy in front of the static resource, such as using Lambda@Edge, although I am not very experienced with this method yet.
It seems like you are already familiar with implementing check/redirect functionality on the client side based on your question. However, for the benefit of others who may find this post in the future:
To retrieve user information on the client side, include a <UserProvider> in your app and utilize the useUser() hook in client-side components.
Refer to the documentation:
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 more detailed examples, refer to the EXAMPLES.md
document.
Another approach involves utilizing 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>
);
});
Referenced from additional examples.