Privy React Auth hydration error report

privy-hydration-bug-report.md

Privy React Auth - Hydration Error: Invalid HTML Nesting

Summary

Privy's internal styled-components use <p> elements that contain <div> children, causing React hydration errors in Next.js applications.

Environment

• @privy-io/react-auth: 3.11.0
• Next.js: 16.1.1 (Turbopack)
• React: 18.x
• Configuration: walletChainType: "solana-only"

Error Messages

In HTML, <div> cannot be a descendant of <p>.
This will cause a hydration error.

<p> cannot contain a nested <div>.
See this log for the ancestor stack trace.

Stack Trace

<styled.p>
  <p className="sc-UFtxX hmEmHj">
    <styled.div>
      <div className="sc-bZTxSr cCskMt">
        ...

The error originates from Privy's internal component hierarchy:

<E contactMethod="j@zora.co" authFlow="email" ...>
  <n title="Enter conf..." subtitle={<span>} ...>
    <w ...>
      <styled.div>
        <div className="sc-hVcFhS ...">
          ...
          <styled.p>        <!-- Parent <p> element -->
            <p className="sc-UFtxX hmEmHj">
              <styled.div>  <!-- Invalid: <div> inside <p> -->
                <div className="sc-bZTxSr cCskMt">

When It Occurs

The error appears when users interact with Privy's email confirmation code entry screen during the authentication flow.

Root Cause

Privy's styled-components use <p> tags (styled.p / sc-UFtxX) that contain <div> children (styled.div / sc-bZTxSr). This is invalid HTML per the HTML5 spec - <p> elements can only contain phrasing content, not flow content like <div>.

Suggested Fix

In Privy's internal components, replace the parent <p> element with a <div> or <span> element that can legally contain block-level children.

Workaround

None available - the invalid nesting is inside Privy's bundled components.

Impact

• Console warnings in development
• Potential hydration mismatches in production
• No functional breakage observed

Minimal Reproduction

1. Set up Next.js app with @privy-io/react-auth@3.11.0
2. Configure email login method
3. Trigger login flow and enter email
4. Observe console errors when confirmation code screen appears