Getting a strange 'OktaSignIn is not a constructor'?

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 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?


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) {
    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() {
      { 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 id="sign-in-widget" />

my app.js is:

function customAuthHandler({ history }) {
  // Redirect to the /login page that has a CustomLoginComponent

class App extends Component {

  render() {
    return (
      <Router history={history}>
          <Header helpers={helpers}/>
            <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} />} />
 export default App;

Any idea what I’m doing wrong?

Hey @johnantoni. I ran into this issue while working with Vue + the Okta Sign-In Widget. Turns out, importing it the widget as a named module gave me similar issues when running UI tests. The trick (for me) was importing the module via the default export:

import OktaSignIn from '@okta/okta-signin-widget';

It appears our automated Travis CI tests aren’t showing an issue, but I’ll have our team look into samples-js-react to see if we can reproduce the error.

Let me know if the above solution works!

1 Like

Awesome, thanks resolved the not-a-constructor error

Next problem I’m getting is with the okta-signin-widget:

$.cookie is not a function

posted the issue on github,

Have you see this before?


managed to resolve it by doing:

const OktaSignIn = require('@okta/okta-signin-widget/dist/js/okta-sign-in.min.js');

updated the issue on github, looks like the jquery-cookie library in the okta-sign-in-widget is legacy and needs to be replaced.