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 https://github.com/okta/samples-js-react 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?

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, https://github.com/okta/okta-signin-widget/issues/380

Have you see this before?

12%20PM

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.