Hi, I’m trying to change my app to use the OktaSignIn Widget rather than redirecting to the Okta site for sign-in.
I’m using the example code GitHub - okta/samples-js-react: React Auth SDK sample and added the Login.js to my site however I’m getting a strange => OktaSignIn is not a constructor?
The library is loaded so it should be available, any ideas?
login.js
import React, { Component } from 'react';
import * as OktaSignIn from '@okta/okta-signin-widget';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
import '@okta/okta-signin-widget/dist/css/okta-theme.css';
import config from './../.config';
export default class LoginPage extends Component {
constructor(props) {
super(props);
this.signIn = new OktaSignIn({
/**
* Note: when using the Sign-In Widget for an OIDC flow, it still
* needs to be configured with the base URL for your Okta Org. Here
* we derive it from the given issuer for convenience.
*/
baseUrl: config.oidc.issuer.split('/oauth2')[0],
clientId: config.oidc.clientId,
redirectUri: config.oidc.redirectUri,
logo: '/react.svg',
i18n: {
en: {
'primaryauth.title': 'Sign in to React & Company',
},
},
authParams: {
responseType: ['id_token', 'token'],
issuer: config.oidc.issuer,
display: 'page',
scopes: config.oidc.scope.split(' '),
},
});
}
componentDidMount() {
this.signIn.renderEl(
{ el: '#sign-in-widget' },
() => {
/**
* In this flow, the success handler will not be called beacuse we redirect
* to the Okta org for the authentication workflow.
*/
},
(err) => {
throw err;
},
);
}
render() {
return (
<div>
<div id="sign-in-widget" />
</div>
);
}
}
my app.js is:
function customAuthHandler({ history }) {
// Redirect to the /login page that has a CustomLoginComponent
history.push('/login');
}
class App extends Component {
render() {
return (
<Router history={history}>
<Security
issuer={config.oidc.issuer}
client_id={config.oidc.clientId}
redirect_uri={config.oidc.redirectUri}
onAuthRequired={customAuthHandler}
>
<Header helpers={helpers}/>
<Container>
<Route path="/implicit/callback" component={ImplicitCallback} />
<Route path="/login" component={Login} />
<Route exact path="/" render={(props) => <HomeRedirect helpers={helpers} {...props} />} />
<Route exact path="/:lang/" render={(props) => <Home helpers={helpers} {...props} />} />
</Container>
</Security>
</Router>
);
}
}
export default App;
Any idea what I’m doing wrong?
