Okta-Signin-widget no callback happening

1.3k views Asked by At

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

0

There are 0 answers