Unable to use Okta Widget with React JS

Hi Team,

I am trying to embed Okta widget using react JS code into an HTML page. While using OktaSignIn API.

const widget = new OktaSignIn({
** baseUrl: ‘https://dev-827463.okta.com’,**
** clientId: ‘Xxxxxxxxxxxxx’,**
** redirectUri: window.location.origin,**
** authParams: {**
** issuer: ‘https://dev-827463.okta.com’,**
** responseType: [‘token’, ‘id_token’],**
** display: ‘page’**
** }**
});

I see the JS error in chrome / firefox browser while rendering the widget using below code.

showLogin() {
widget.renderEl(
{ el: ‘#sign-in-widget’ },
response => {
this.setState({ user: response.email });
},
err => {
log.error(err);
}
);
}

API version:

@okta/okta-auth-js”: “3.1.4”,
@okta/okta-react”: “3.0.2”,
@okta/okta-signin-widget”: “4.2.2”,
“react”: “16.8.6”

Error trace:

okta-sign-in.entry.js:14 Uncaught (in promise) TypeError: s.default.allKeys is not a function
at a (okta-sign-in.entry.js:14)
at D.i.constructor (okta-sign-in.entry.js:14)
at D.i.constructor (okta-sign-in.entry.js:14)
at new D.i (okta-sign-in.entry.js:52)
at D.i.initialize (okta-sign-in.entry.js:52)
at D.i.t.Router (okta-sign-in.entry.js:52)
at D.i.constructor (okta-sign-in.entry.js:14)
at D.i [as constructor] (okta-sign-in.entry.js:52)
at new D.i (okta-sign-in.entry.js:52)
at i.n [as renderEl] (okta-sign-in.entry.js:49)
a @ okta-sign-in.entry.js:14
constructor @ okta-sign-in.entry.js:14
constructor @ okta-sign-in.entry.js:14
D.i @ okta-sign-in.entry.js:52
initialize @ okta-sign-in.entry.js:52
t.Router @ okta-sign-in.entry.js:52
constructor @ okta-sign-in.entry.js:14
D.i @ okta-sign-in.entry.js:52
D.i @ okta-sign-in.entry.js:52
n @ okta-sign-in.entry.js:49
showLogin @ index.js:37
(anonymous) @ index.js:29
Promise.then (async)
componentDidMount @ index.js:27
commitLifeCycles @ react-dom.development.js:17334
commitAllLifeCycles @ react-dom.development.js:18736
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18948
(anonymous) @ react-dom.development.js:20418
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:20417
performWorkOnRoot @ react-dom.development.js:20346
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
requestWork @ react-dom.development.js:20097
scheduleWork @ react-dom.development.js:19911
scheduleRootUpdate @ react-dom.development.js:20572
updateContainerAtExpirationTime @ react-dom.development.js:20600
updateContainer @ react-dom.development.js:20657
…/…/node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20953
(anonymous) @ react-dom.development.js:21090
unbatchedUpdates @ react-dom.development.js:20459
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21086
render @ react-dom.development.js:21155
(anonymous) @ aem.js:51
bindJSToDom @ aem.js:45
registerComponent @ aem.js:60
…/…/maven/twitter-aem-modules/business2-twitter-project/business2-ui/src/main/content/jcr_root/apps/business2-twitter/components/control/cr03-okta-widget-new/webpack/index.js @ index.js:70
webpack_require @ bootstrap:19
…/…/…/…/…/…/private/var/folders/8m/6g7v7ph915b462wq_z9wq3z00000gp/T/097b9cf4-050a-4692-b6da-e3a7b2b7d3b8/project.js @ project.js:1
webpack_require @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83
Show 14 more frames

Any help would be highly appreciated.

Are you using underscore and what’s the version?

Hi @sumithcl2,
This Could be due to conflicting third party library versions (between the one used by sign in widget and your app) like underscore.js as @haisheng.wu has mentioned.

Please use Source-map-loader webpack plugin and run the application so that you could find out which snippet is throwing this error.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.