Fix: Auth0-Lock Error with React 19 and Nextjs 15 #2701

ankita10119 · 2025-12-09T07:23:42Z

Changes

Fixes React 19 and NextJS 15 compatibility issues in auth0-lock by removing deprecated APIs that were removed in React 19:

Legacy string refs (ref="name")
ReactDOM.findDOMNode()
react-transition-group v2 (which used deprecated APIs)

Root Cause: auth0-lock was using legacy string refs (e.g., ref="chrome") which were removed in React 19

Closes #2590

Changes Made

1. String Refs → React.createRef() (13 files)

Converted all legacy string refs to the modern createRef() pattern:

Before (React 18 and earlier):

<Chrome ref="chrome" />
this.refs.chrome.focusError()

After (React 19 compatible):

constructor(props) {
  super(props);
  this.chromeRef = React.createRef();
}
<Chrome ref={this.chromeRef} />
this.chromeRef.current.focusError()

Removed ReactDOM.findDOMNode()
Replaced all ReactDOM.findDOMNode() calls with direct ref access:

Before:

const node = ReactDOM.findDOMNode(this);
node.focus();

After:

const node = this.nodeRef.current;
node.focus();

Added nodeRef Props to CSSTransition

Added nodeRef props to CSSTransition components to avoid react-transition-group's findDOMNode fallback:

Before:

<CSSTransition classNames="slide" timeout={350}>
  {children}
</CSSTransition>

After:

<CSSTransition
  nodeRef={this.transitionRef}
  classNames="slide"
  timeout={350}
>
  <div ref={this.transitionRef}>
    {children}
  </div>
</CSSTransition>

Dependency Upgrades

react-transition-group: 2.2.1 → 4.4.5 (v2 used deprecated React APIs)

Testing

Test Environment:

Next.js 15.2.6
React 19.2.1
React DOM 19.2.1

Test Scenarios:

Lock widget renders without errors
No "Expected ref to be a function" errors
No "findDOMNode is not a function" errors
No legacy context API warnings
Widget interactions work (typing, tab switching, form submission)

This change adds unit test coverage
This change adds integration test coverage
This change has been tested on the latest version of the platform/language

Checklist

I have read the Auth0 general contribution guidelines
I have read the Auth0 Code of Conduct
All code quality tools/guidelines have been run/followed
All relevant assets have been compiled

ankita10119 · 2025-12-10T11:42:00Z

@claude

github-actions · 2025-12-10T11:42:28Z

Claude finished @ankita10119's task —— View job

Overall Assessment

❌ This pull request implements the React 19 migration correctly in principle but has several code quality issues that should be addressed before merging. The core migration strategy (string refs → createRef, removing findDOMNode, upgrading react-transition-group) is sound, but the implementation has inconsistencies and pre-existing code quality issues.

Key Issues Identified

Critical Issues:

Inconsistent ref patterns (chrome.jsx:420) - The SubmitButton still uses callback refs while the rest of the file migrated to createRef(), creating maintenance confusion
Mixed ref patterns (multisize_slide.js:191) - The Child component uses callback refs while Slider uses createRef(), creating inconsistency within the same file
Unsafe node access (multisize_slide.js:47) - Direct property access component.node without null checking could cause runtime errors if the ref isn't set

Code Quality Issues (Pre-existing, not introduced by this PR):

Loose equality operators (!=, ==) used throughout the codebase (email_input.jsx:41-45, captcha_input.jsx:57-61, container.jsx:50) - should use strict equality (!==, ===)
Unnecessary logic in findAutofocusInput (chrome.jsx:249-254) - the instanceof check is ineffective
Several files use deprecated lifecycle methods (UNSAFE_componentWillReceiveProps)

Positive Aspects:

Correct migration from legacy string refs to React.createRef()
Proper upgrade of react-transition-group to v4.4.5
Added nodeRef props to CSSTransition components to avoid deprecated findDOMNode
React and React DOM successfully upgraded to 19.2.1
The test file changes are minimal and appropriate

Recommendations

Address the inconsistent ref patterns - Complete the migration by converting all callback refs to createRef() for consistency
Add null safety checks - Protect against potential runtime errors when accessing ref properties
Consider addressing code quality issues - While not introduced by this PR, the loose equality operators should be fixed (can be done in a follow-up PR)
Testing - The PR mentions manual testing but lacks unit test updates. Consider adding tests to verify the ref migrations work correctly

Security & Performance

No security vulnerabilities or performance regressions identified. The migration maintains the same behavior while updating to modern React patterns.

src/ui/box/multisize_slide.js

src/ui/box/chrome.jsx

package.json

src/ui/box/chrome.jsx

package.json

- Upgrade react-test-renderer to 19.2.1 - Add .npmrc with legacy-peer-deps for enzyme compatibility - Enzyme test adapter doesn't support React 19 yet - CI will automatically use .npmrc without workflow changes

**Fixed** - Fix: Auth0-Lock Error with React 19 and Nextjs 15 [\#2701](#2701) ([ankita10119](https://github.com/ankita10119))

Fix: Auth0-Lock Error with React 19

6f04d02

ankita10119 requested a review from a team as a code owner December 9, 2025 07:23

ankita10119 requested a review from gyaneshgouraw-okta December 10, 2025 06:51

github-actions bot reviewed Dec 10, 2025

View reviewed changes

src/ui/box/multisize_slide.js Outdated Show resolved Hide resolved

github-actions bot reviewed Dec 10, 2025

View reviewed changes

src/ui/box/chrome.jsx Show resolved Hide resolved