Building a customised dash component - Authentication via Facebook

Dash Python
1

So I am trying to create a custom component for authenticate an user from existing Facebook account. I have been following the dash-component-boilerplate.
The process of the initial setup of the package is comprehensive, however I am crashing in tweaking the JS code to a dash friendly

The react js code is: available at https://www.npmjs.com/package/react-facebook-login
The appId number is generated by Facebook for developers website and it should be part of the input of the component, I called this below as “###############”

**The sample JS code to adopt is:**

import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from 'react-facebook-login';

const responseFacebook = (response) => {
console.log(response);
}
ReactDOM.render(
<FacebookLogin
    appId="###############"
    autoLoad={true}
    fields="name,email,picture"
    onClick={componentClicked}
    callback={responseFacebook} />,
document.getElementById('demo')

);

issue

The boilerplate methodology works with no issues, generating the dash package and runs, I get the pop up window and I include username and details, However I cannot extract the name and email in an output variable which is the main intent of this task.

Here the tweaked js code:

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import FacebookLogin from 'react-facebook-login';
const responseFacebook = (response) => {
  console.log(response);
}
export default class facebookauth extends React.Component {
    render() {
        const {id, label, appId, autoLoad,  n_clicks} = this.props;
        return (
            <div id={id}>
                testing the facebook auth: {label}&nbsp;
                <FacebookLogin
                  appId="###############"
                  autoLoad={false}
                  fields="name, picture, email"
                  callback={responseFacebook}
                  cssClass="my-facebook-button-class"
                  icon="fa-facebook"
                />,
                <div>State</div>
                    'name = '{responseFacebook}
                </div>
        );
    }
}
facebookauth.defaultProps = {};
facebookauth.propTypes = {
    id: PropTypes.string,
    label: PropTypes.string.isRequired,
    appId: PropTypes.string,
    fields: PropTypes.string,
    setProps: PropTypes.func,
    n_clicks: PropTypes.oneOf(['change'])
};

Question
Is there anyone in the community who can give some advice?, the logic around react code is way different than python.

Cheers!

2

Figured it out!, the variable to pick up was from callback like:

                    appId= {appId}
                    autoLoad={false}
                    fields="name, picture, email"
                    callback={responseFacebook => setProps({ resultFacebookLogin: responseFacebook }) }
3

now the issue is in testing in other environments,

the library is not found in base environment, works well at usage but not in others

4

Note to self!
Always keep the same version of python, same version for developing, same for other environments, and same for running scripts where I am importing a library. :upside_down_face: