How to build facebook login in admin on rest?

Question

     const responseFacebook = (response) => {
      console.log(response);
      const payload = {
        id: response.id,
        name: response.name,
        email: response.email,
        token: response.accessToken
      }
      return payload
    }

    class FacebookLogin extends Component {
        co
        login = (auth) => {
          console.log("************Entering***************** ")
          this.props.userLogin(auth, this.props.location.state ? this.props.location.state.nextPathname : '/')
        };

        render() {
            const { handleSubmit, submitting, theme } = this.props;
            const muiTheme = getMuiTheme(theme);
            const { primary1Color, accent1Color } = getColorsFromTheme(muiTheme);
            return (
                <MuiThemeProvider muiTheme={muiTheme}>
                    <div style={{ ...styles.main, backgroundColor: primary1Color }}>
                        <Card style={styles.card}>
                            <div style={styles.avatar}>
                                <Avatar backgroundColor={accent1Color} icon={<LockIcon />} size={60} />
                            </div>
                            <form onSubmit={handleSubmit(this.login)}>
                                <CardActions>
                                <FacebookLogin
                                    appId="1023727501002149"
                                    autoLoad={true}
                                    fields="name,email,picture"
                                    callback={responseFacebook}
                                    cssClass="my-facebook-button-class"
                                    icon="fa-facebook"
                                    />
                                </CardActions>
                            </form>
                        </Card>
                        <Notification />
                    </div>
                </MuiThemeProvider>
            );
        }
    }

    FacebookLogin.propTypes = {
        ...propTypes,
        authClient: PropTypes.func,
        previousRoute: PropTypes.string,
        theme: PropTypes.object,
        userLogin: PropTypes.func.isRequired,
    };

    FacebookLogin.defaultProps = {
        theme: defaultTheme,
    };

    const enhance = compose(
        reduxForm({
            form: 'signIn',
            validate: (values, props) => {
                const errors = {};
                return errors;
            },
        }),
        connect(null, { userLogin: userLoginAction }),
    );

    export default enhance( FacebookLogin );

I am trying to implement facebook login in admin on rest using https://www.npmjs.com/package/react-facebook-login.

This login component is getting me the response from facebook which i need to send to login function defined in the facebookLogin Class.

Please do advice how can I create custom facebook login page in admin on rest using react component

Help would be really appreciated

Thanks in advance! :)

Answer 1

    class EmailLogin extends Component {
        //function which gets the reponse from the
        responseFacebook = (response) => {
          const payload = {
            id: response.id,
            name: response.name,
            email: response.email,
            token: response.accessToken
          }
          this.props.userLogin(payload, this.props.location.state ? this.props.location.state.nextPathname : '/')
        };

        render() {
            const { handleSubmit, submitting, theme } = this.props;
            console.log("#### 1:", handleSubmit)
            console.log("#### 2:", submitting);
            const muiTheme = getMuiTheme(theme);
            const { primary1Color, accent1Color } = getColorsFromTheme(muiTheme);
            return (
                <MuiThemeProvider muiTheme={muiTheme}>
                    <div style={{ ...styles.main, backgroundColor: primary1Color }}>
                        <Card style={styles.card}>
                            <div style={styles.avatar}>
                                <Avatar backgroundColor={accent1Color} icon={<LockIcon />} size={60} />
                            </div>
                            <form onSubmit={handleSubmit(this.responseFacebook)}>
                                <CardActions>
                                <FacebookLogin
                                    type="submit"
                                    appId="1023727501002149"
                                    autoLoad={true}
                                    fields="name,email,picture"
                                    callback={this.responseFacebook}
                                    icon={<CircularProgress size={25} thickness={2} />}
                                    />
                                </CardActions>
                            </form>
                        </Card>
                        <Notification />
                    </div>
                </MuiThemeProvider>
            );
        }
    }

    EmailLogin.propTypes = {
        ...propTypes,
        authClient: PropTypes.func,
        previousRoute: PropTypes.string,
        theme: PropTypes.object,
        userLogin: PropTypes.func.isRequired,
    };

    EmailLogin.defaultProps = {
        theme: defaultTheme,
    };

    const enhance = compose(
        reduxForm({
            form: 'signIn',
            validate: (values, props) => {
                const errors = {};
                return errors;
            },
        }),
        connect(null, { userLogin: userLoginAction }),
    );

    export default enhance( EmailLogin );

------UPDATED--------

The facebook react component has a callback param which calls a function name responseFacebbok

That function should be triggered at the time of form submit this will help to redirect the response to the authClient which finally calls the backend API.