# Getting a strange 'OktaSignIn is not a constructor'?

**URL:** <https://devforum.okta.com/t/getting-a-strange-oktasignin-is-not-a-constructor/1092>\
**Category:** OAuth/OIDC\
**Tags:** widget\
**Created:** [January 21, 2018, 7:38pm UTC](https://devforum.okta.com/t/getting-a-strange-oktasignin-is-not-a-constructor/1092 "2018-01-21T19:38:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![johnantoni](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/johnantoni/32/289_2.png) [@johnantoni](https://devforum.okta.com/u/johnantoni)\
**Post date:** [January 21, 2018, 7:38pm UTC](https://devforum.okta.com/t/getting-a-strange-oktasignin-is-not-a-constructor/1092/1 "2018-01-21T19:38:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmelberg](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/jmelberg/32/154_2.png) [@jmelberg](https://devforum.okta.com/u/jmelberg)\
**Post date:** [January 22, 2018, 5:38am UTC](https://devforum.okta.com/t/getting-a-strange-oktasignin-is-not-a-constructor/1092/2 "2018-01-22T05:38:51Z")

</div>

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:

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

```

It appears our automated [Travis CI](https://travis-ci.org/okta/samples-js-react/builds/329567365?utm_source=github_status&utm_medium=notification) tests aren’t showing an issue, but I’ll have our team look into [samples-js-react](https://github.com/okta/samples-js-react/) to see if we can reproduce the error.

Let me know if the above solution works!

---

<div class="post-metadata">

**Author:** ![johnantoni](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/johnantoni/32/289_2.png) [@johnantoni](https://devforum.okta.com/u/johnantoni)\
**Post date:** [January 22, 2018, 7:05pm UTC](https://devforum.okta.com/t/getting-a-strange-oktasignin-is-not-a-constructor/1092/3 "2018-01-22T19:05:44Z")

</div>

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

Have you see this before?

![12%20PM](https://global.discourse-cdn.com/oktadev/original/1X/00c0c4672c2e4c28652eb64534071ad46ee4f7df.png)

---

<div class="post-metadata">

**Author:** ![johnantoni](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/johnantoni/32/289_2.png) [@johnantoni](https://devforum.okta.com/u/johnantoni)\
**Post date:** [January 22, 2018, 9:10pm UTC](https://devforum.okta.com/t/getting-a-strange-oktasignin-is-not-a-constructor/1092/4 "2018-01-22T21:10:18Z")

</div>

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.

> <https://github.com/okta/okta-signin-widget/issues/380>

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/oktadev/original/1X/589c4c5f80de422d01f47cee7185a7fb8227835c.png) [@system](https://devforum.okta.com/u/system)\
**Post date:** [January 12, 2024, 10:04pm UTC](https://devforum.okta.com/t/getting-a-strange-oktasignin-is-not-a-constructor/1092/5 "2024-01-12T22:04:42Z")

</div>

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