lock
lock copied to clipboard
Fix: Auth0-Lock Error with React 19 and Nextjs 15
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-groupv2 (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 allReactDOM.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: 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
- [x] I have read the Auth0 general contribution guidelines
- [x] I have read the Auth0 Code of Conduct
- [x] All code quality tools/guidelines have been run/followed
- [ ] All relevant assets have been compiled