Initializing Okta Signin Widget a second time in a single-page webapp throws an exception

Question

We integrate Okta Sign-in Widget into our React-based website.

Fragment example :

var oktaSignIn = new OktaSignIn({baseUrl: baseUrl});
oktaSignIn.renderEl(...)

It works great when rendering the widget for the first time, but after the user logs in and logs out again, webapp displays the login component again and tries again renderElto display the widget. This throws the following exception:

Backbone.history has already been started

I created this jsfiddle to demonstrate the problem. It just launches the signin widget twice (second time after waiting). You can see that the second call throws an exception.

https://jsfiddle.net/nudwcroo/6/

, webapp , .

? javascript?

Answer 1

, / .

<div id="okta-login-container"></div>

<script type="text/javascript">
    var oktaSignIn = new OktaSignIn(/* config */);

    oktaSignIn.renderEl(
      { el: '#okta-login-container' },
      function (res) {
        if (res.status === 'SUCCESS') {
            // Hide element 
            $("#okta-login-container").hide();
        }
      }
    );
</script>

logout(), , show() , .

function logout() {
    $('#okta-login-container').show();
    // Do more logic
}

Answer 2

, Okta, : (https://github.com/okta/samples-js-react/blob/master/custom-login/src/Login.jsx)

. , , DOM, /.

:

//App.js
class App extends Component {
  constructor() {
    super()
    this.signIn = new OktaSignIn({...})
  }

  render() {
    return <SignInPage widget={this.signIn} />
  }
}

-

//SignInPage.js
...
  componentDidMount() {
    let { redirectUri } = this.state
    let { widget } = this.props
    widget.renderEl(
      { el: '#sign-in-widget' },
      (response) => {
        response.session.setCookieAndRedirect(redirectUri)
      },
      (error) => {
        throw error;
      },
    );

  }

  componentWillUnmount() {
      let { widget } = this.props
      widget.remove()
  }

  render() {
    return  <div id="sign-in-widget"/></div>
  }