lock icon indicating copy to clipboard operation
lock copied to clipboard

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

Open ankita10119 opened this issue 1 month ago • 0 comments

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

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()
  1. 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();
  1. 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>
  1. Dependency Upgrades
  • React: 18.2.0 → 19.2.1
  • React DOM: 18.2.0 → 19.2.1
  • 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

ankita10119 avatar Dec 09 '25 07:12 ankita10119