✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Building a customised dash component - Authentication via Facebook

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!

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 }) }

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

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: