NextJs integration with Azure AD B2C gives hydration errors

Question

NextJs integration with Azure AD B2C gives hydration errors

Erwin van der Kleijn 20

I've recently made some statically generated NextJs pages to use as page templates for Azure B2C. However after initial load (the login form flashes on screen for a couple of seconds) a hydration error occurs and the form dissappears. Is there a way to ensure the hydration error does not happen from Azure?

0 comments

Answer accepted by question author

0 additional answers

Your answer

Answer 1

Hello @Erwin van der Kleijn

This is likely happening because Next.js hydration and Azure AD B2C are both modifying the same DOM.

Azure AD B2C custom pages aren't consumed like a normal Next.js application. B2C loads your HTML template and then injects its own login UI into:

<div id="api"></div>

The custom page is loaded first, then B2C merges/injects its UI fragment before displaying the page.

If the exported Next.js page subsequently hydrates, React expects the browser DOM to match the HTML it originally generated. But B2C has already modified that DOM by inserting the login form. React can therefore report a hydration mismatch and potentially replace that portion of the DOM, which would explain why the B2C form appears briefly and then disappears.

For B2C page templates, therefore, avoid hydrating the container that B2C owns. The safest pattern is to serve the B2C page as essentially a static HTML/CSS template, containing:

<body>
  <!-- your branding/layout -->
  <div id="api"></div>
  <!-- additional static content -->
</body>

and let B2C exclusively manage everything inside #api.

You can still host the generated HTML on Azure Static Web Apps; the hosting location isn't the issue. It allows you to host custom B2C HTML on any publicly accessible HTTPS endpoint that supports CORS.

If you need JavaScript on the B2C page, use B2C's supported JavaScript/page-layout mechanism rather than allowing the complete Next.js application to hydrate the B2C-controlled DOM. I recommend using a fixed page layout contract/version when custom JavaScript depends on B2C-generated elements.

As a quick test, try serving one exported page without the Next.js runtime/hydration scripts, keeping the same CSS/layout and <div id="api"></div>. If the login form remains visible, that would strongly confirm the Next.js hydration conflict.

References:

Customize the UI with HTML templates – Azure AD B2C

JavaScript and page layout versions – Azure AD B2C

ContentDefinitions – Azure AD B2C

Help make this community better for everyone: If this answer helped or resolved your issue, please accept it or upvote it. If not, share more details in a comment so we can continue the discussion and find the right solution. Thank you.