Okta Signin Widget Spins Infinitely

Hello there,

I have followed these docs (with a few adjustments) to set up the signin widget.

But when I log in, the widget just spins like this forever:

None of my console.log statements print anything once I click the ‘Sign in’ button - no re-render happens, and my success/error callback is never called. It is just stuck.

Sometimes, after leaving the page up in the spinning state for a long time, I’ll refresh the page and the “logged in” view will be shown correctly.

Can anyone explain why it is spinning?

My code looks like this:

import React, { Component } from 'react';
import OktaSignIn from '@okta/okta-signin-widget';

export default class LoginPage extends Component {

 constructor() {
    super();
    this.state = {user: null};
    this.widget = new OktaSignIn({
      baseUrl: 'https://dev-307220.oktapreview.com',
      logo: '/img/logo.png',
      clientId: '0oacel4qvdqHpt44U0h7',
      redirectUri: 'http://localhost:3000',
      authParams: {
        responseType: 'id_token'
      }
    });

    this.showLogin = this.showLogin.bind(this);
    this.logout = this.logout.bind(this);
  }

  componentDidMount() {
    this.widget.session.get((response) => {
      if (response.status !== 'INACTIVE') {
        this.setState({user: response.login});
      } else {
        this.showLogin();
      }
    });
  }

  showLogin() {
    window.Backbone.history.stop();
    this.widget.renderEl({el: this.loginContainer},
      (response) => {
        console.log('response received: ', response)
        this.setState({user: response.claims.email});
        if (response.status === 'SUCCESS') {
          this.tokenManager.add('my_id_token', response)
        }
      },
      (err) => {
        // Information from: https://github.com/okta/okta-signin-widget
        //
        // The widget will handle most types of errors - for example, if the user
        // enters an invalid password or there are issues authenticating.
        //
        // This function is invoked with errors the widget cannot recover from:
        // 1. Known errors: CONFIG_ERROR, UNSUPPORTED_BROWSER_ERROR, OAUTH_ERROR
        // 2. Uncaught exceptions
        console.log("error: ", err);
      }
    );
  }

  logout() {
    this.widget.signOut(() => {
      this.setState({user: null});
      this.showLogin();
    });
  }


  render() {
    console.log('render was called')
    return (
      <div>
        {
          this.state.user ? (
            <div className="container">
              <div>Welcome, {this.state.user}!</div>
              <button onClick={this.logout}>Logout</button>
            </div>
          ) : null
        }
        {
          this.state.user ? null : (
            <div ref={(div) => {this.loginContainer = div; }} />
          )
        }
      </div>
    );
  }
}

Appreciate the help!

Also, it looks like the authn POST succeeds, so it is strange that the callback is not called:

Hi smanzer! I just happened upon this thread but I’ll give it a shot in case someone else runs into this again.

I had the same issue and discovered that it had to do with your Router type. I was using HashRouter as I was deploying to GitHub Pages, but BrowserRouter is the one you want to work with the widget. So check that you’re using import { Router as BrowserRotuer } from "react-router-dom"; and let me know if that solves it.

1 Like

Cc @lee.brandt - I remember we saw “infinite spinning” issues like this before, but I thought they were solved. FYI!

Isn’t this backwards? Shouldn’t it be import { BrowserRouter } as Router ?