I'm trying to integrate the okta-signin-widget
into my react app but I can't get it working properly.
My widget config looks like this...
export const OktaSignInWidget = new OktaSignIn({
baseUrl: `https://${OktaDomain}.com`,
clientId: clientId,
authParams: {
issuer: `https://${OktaDomain}.com/oauth2/default`,
responseType: ['id_token', 'token'],
responseMode: 'query',
scopes: ['openid', 'profile', 'email']
}
});
And my Login page like so...
import React, { Component } from "react";
import { withStyles } from "material-ui/styles";
import "./SignInStyles.css";
import Grid from "material-ui/Grid";
import {OktaSignInWidget} from '../common/OktaConfig';
class OktaSignIn extends Component{
componentDidMount(){
console.log('Component Mounted');
OktaSignInWidget.renderEl(
{el: "#okta-sign-in-container"},
function success(res){
console.log('success');
console.log(res);
},
function error(err) {
console.log('err');
console.log(err);
}
)
}
render(){
return (
<Grid container align="flex-start" justify="center" className="epc-grid">
<Grid item>
<div id="okta-sign-in-container"></div>
</Grid>
</Grid>
)
}
}
const styles = theme => ({
});
export default withStyles(styles)(OktaSignIn);
In chromes dev console, I can watch the network and see the authn call being made and the response coming back, but it never goes to success
or error
. Any ideas why? Or what else I might need to configure
Edit: I've also tried changing my signin to use this component
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class OktaSignInWidget extends Component {
componentDidMount() {
const el = ReactDOM.findDOMNode(this);
this.widget = this.props.widget;
this.widget.renderEl({el}, this.props.onSuccess, this.props.onError);
}
componentWillUnmount() {
this.widget.remove();
}
render() {
return <div />;
}
};
and then changing sign in to look like this...
class OktaSignIn extends Component{
componentWillMount() {
this.onSuccess = this.onSuccess.bind(this);
this.onError = this.onError.bind(this);
}
onSuccess(tokens) {
this.props.auth.handleAuthentication(tokens);
console.log('sucess');
}
onError(err) {
console.log('error logging in', err);
}
render(){
const { auth } = this. props;
return (
<Grid container align="flex-start" justify="center" className="epc-grid">
<Grid item>
<OktaSignInWidget
widget={auth.oktaAuth}
onSuccess={this.onSuccess}
onError={this.onError}/>
</Grid>
</Grid>
)
}
}
const styles = theme => ({
errorContainer: {
marginTop: 10,
marginBottom: 10
}
});
export default withStyles(styles)(withAuth(OktaSignIn));
But still no luck