Problems setting up custom FB Signup with Meteor and React

Question

So I have been trying to create a custom FB login with Meteor and React but I am stuck.

I got so far that I am able to signup with FB, create the user in my database but now my current user displays as undefined undefined instead of the first and last name.

I understand that I need to set the values somewhere but I am kinda lost on where or how I should do this.

If anyone has experience setting this up, please give me a push in the right direction.

This is my current code for the signup form:

 import React, { Component } from 'react'; import { Link } from 'react-router'; import { Row, Col, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap'; import { handleSignup } from '../../modules/signup'; export class Signup extends Component { componentDidMount() { handleSignup({ component: this }); } handleSubmit(event) { event.preventDefault(); } socialLogin(event) { event.preventDefault(); const service = event.target.getAttribute( 'data-social-login' ), options = { requestPermissions: [ 'email' ] }; if ( service === 'loginWithTwitter' ) { delete options.requestPermissions; } Meteor[ service ]( options, ( error ) => { if ( error ) { Bert.alert( error.message, 'danger' ); } }); } render() { return ( <div className="login-form"> <Col xs={12} md={4} sm={4} /> <Col xs={ 12 } md={ 4 } sm={ 4 } > <h4 className="page-header">Sign Up</h4> <form ref="signup" className="signup" onSubmit={ this.handleSubmit }> <Row> <Col xs={ 6 } sm={ 6 }> <FormGroup> <ControlLabel>First Name</ControlLabel> <FormControl type="text" ref="firstName" name="firstName" placeholder="First Name" /> </FormGroup> </Col> <Col xs={ 6 } sm={ 6 }> <FormGroup> <ControlLabel>Last Name</ControlLabel> <FormControl type="text" ref="lastName" name="lastName" placeholder="Last Name" /> </FormGroup> </Col> </Row> <FormGroup> <ControlLabel>Email Address</ControlLabel> <FormControl type="text" ref="emailAddress" name="emailAddress" placeholder="Email Address" /> </FormGroup> <FormGroup> <ControlLabel>Password</ControlLabel> <FormControl type="password" ref="password" name="password" placeholder="Password" /> </FormGroup> <Button type="submit" bsStyle="success">Sign Up</Button> </form> <hr/> <Button className= "fb-button" data-social-login="loginWithFacebook" type="button" onClick={ this.socialLogin }> <i className="fa fa-facebook"></i> Sign in with Facebook </Button> <p>Already have an account? <Link to="/login">Log In</Link>.</p> </Col> <Col xs={12} md={4} sm={4} /> </div> ) } } 

And this is my handleSignup file:

 import $ from 'jquery'; import 'jquery-validation'; import { browserHistory } from 'react-router'; import { Accounts } from 'meteor/accounts-base'; import { Bert } from 'meteor/themeteorchef:bert'; import { getInputValue } from './get-input-value'; let component; const getUserData = () => ({ email: getInputValue(component.refs.emailAddress), password: getInputValue(component.refs.password), profile: { name: { first: getInputValue(component.refs.firstName), last: getInputValue(component.refs.lastName), }, }, }); const signUp = () => { const user = getUserData(); Accounts.createUser(user, (error) => { if (error) { Bert.alert(error.reason, 'danger'); } else { browserHistory.push('/'); Bert.alert('Welcome!', 'success'); } }); }; const validate = () => { $(component.refs.signup).validate({ rules: { firstName: { required: true, }, lastName: { required: true, }, emailAddress: { required: true, email: true, }, password: { required: true, minlength: 6, }, }, messages: { firstName: { required: 'First name?', }, lastName: { required: 'Last name?', }, emailAddress: { required: 'Need an email address here.', email: 'Is this email address legit?', }, password: { required: 'Need a password here.', minlength: 'Use at least six characters, please.', }, }, submitHandler() { signUp(); }, }); }; export const handleSignup = (options) => { component = options.component; validate(); }; 

When I run console.log(Accounts) in the console of Chrome I get this returned, is that correct? :

 ccountsClient LOGIN_TOKEN_EXPIRES_KEY : "Meteor.loginTokenExpires" LOGIN_TOKEN_KEY : "Meteor.loginToken" USER_ID_KEY : "Meteor.userId" _accountsCallbacks : Object _autoLoginEnabled : true _hashPassword : (password) _lastLoginTokenWhenPolled : null _loggingIn : false _loggingInDeps : Tracker.Dependency _loginServicesHandle : Object _onLoginFailureHook : Hook _onLoginHook : Hook _onLogoutHook : Hook _options : Object _pageLoadLoginAttemptInfo : null _pageLoadLoginCallbacks : Array[0] _pollIntervalTimer : 3 changePassword : (oldPassword, newPassword, callback) connection : Connection createUser : (options, callback) forgotPassword : (options, callback) oauth : Object resetPassword : (token, newPassword, callback) users : Mongo.Collection verifyEmail : (token, callback) __proto__ : AccountsCommon 

Answer 1

As I can see you already managed to to create an user account for FB login. What you need to do now is to set up this hook on server Meteor.onCreateUser , inside this hook you could set profile object of the newly created user:

Accounts.onCreateUser(function(options, user) {

  user.profile = {};

  if (user.services.facebook) {
    const faceProfile = user.services.facebook;

    // merge default profile with facebook profile
    options.profile = {
      ...options.profile,
      firstName: faceProfile.first_name,
      lastName: faceProfile.last_name,
      avatar: `//graph.facebook.com/${faceProfile.id}/picture/?type=large`,
    };

    // if you want to set emails too
    options.emails = [
      {
        address: faceProfile.email,
      }
    ];
  }

  if (options.profile) {
    user.profile = options.profile;
  }

  if (options.emails) {
    user.emails = options.emails;
  }

  return user;
});