Custom Client Session Handling causes Rendered fewer hooks than expected error on build

[KojoEnch]

Question 💬

First, thanks a lot for the awesome work done !

I'm trying to implement @balazsorban44 pattern to check authentication on any page, client side and with a reduced code boilerplate.

It is working smoothly in dev, but whenever I make a new build, I get errors when I visit the pages needing authentication in a new tab, or whenever I disconnect : Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Removing the conditional Component.auth ? call in _app.js makes these errors disappear.

Am I missing a point ? I would be pleased if you could point me in the right direction. Thanks a lot

How to reproduce ☕️

Here's the relevant code.

// src/components/auth/auth.tsx
import {useSession} from "next-auth/react";
// ... other imports

const Auth = ({ children }) => {
    const { data: session, status } = useSession({required: true})
    const isUser = !!session?.user

    if (isUser) {
        return children
    }

    const router = useRouter();
    useEffect(() => {
        if (status !== "loading" && !isUser) {
            router.push(ROUTES.LOGIN);
        }
    }, [status, isUser]);

    if (status === "loading"  || !isUser) {
        return <p>Some nice spinner</p>;
    }
    return children;
};

export default Auth;

A page with authentication

// src/pages/my-account/account-details.tsx
import {useSession} from "next-auth/react";
// ... other imports

export default function AccountDetailsPage() {
	const {data:session} = useSession()
	return (
		<AccountLayout>
			<AccountDetails session={session} />
		</AccountLayout>
	);
}

AccountDetailsPage.Layout = Layout;
AccountDetailsPage.auth = true;

export const getStaticProps: GetStaticProps = async ({locale}) => {
	// ...
};

//_app.tsx
function handleExitComplete() {
	if (typeof window !== "undefined") {
		window.scrollTo({ top: 0 });
	}
}

const Noop: React.FC = ({ children }) => <>{children}</>;

Router.events.on("routeChangeStart", function (path) {
	syncDrupalPreviewRoutes(path)
})

const CustomApp = ({ Component, pageProps: { session, ...pageProps } }: AppProps) => {
	const queryClientRef = useRef<any>();
	if (!queryClientRef.current) {
		queryClientRef.current = new QueryClient();
	}
	const router = useRouter();
	const dir = getDirection(router.locale);
	useEffect(() => {
		document.documentElement.dir = dir;
	}, [dir]);
	const Layout = (Component as any).Layout || Noop;

	return (
		<AnimatePresence exitBeforeEnter onExitComplete={handleExitComplete}>
			<QueryClientProvider client={queryClientRef.current}>
				<Hydrate state={pageProps.dehydratedState}>
					<SessionProvider session={session}>
					<ManagedUIContext>
						<Layout pageProps={pageProps}>
							<DefaultSeo />
							{// @ts-ignore
							Component.auth ? (
								<Auth>
									<Component {...pageProps}  key={router.route} />
								</Auth>
							) :(
								<Component {...pageProps}  key={router.route} />
							)}
							<ToastContainer />
						</Layout>
						<ManagedModal />
						<ManagedDrawer />
					</ManagedUIContext>
					</SessionProvider>
				</Hydrate>
				{/* <ReactQueryDevtools /> */}
			</QueryClientProvider>
		</AnimatePresence>
	);
};

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[KojoEnch]

I simplified the auth component and stuck to the example. I had also a couple of unrelated issues, though, possibly causing the build errors. Now, this work like a charm !

Final auth.tsx

import {useEffect} from "react";
import {signIn, useSession} from "next-auth/react";

const Auth = ({ children }) => {
    const { data: session, status } = useSession({required: true})
    const isUser = !!session?.user

    useEffect(() => {
        if (status !== "loading" && !isUser) {
            signIn();
        }
    }, [status, isUser]);


    if (isUser) {
        return children
    }

    return <div>Loading...</div>;
};

export default Auth;