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!
