I am working on Meteor 1.3.3 with React and using the package https://github.com/studiointeract/accounts-ui
It works fine with username and password.
When I try to add extra fields such as firstname and lastname it renders the fields as expected, but when filling the form it shows the following error:
underscore.js:102 Uncaught (in promise) RangeError: Maximum call stack size exceeded(…)
Removing the extra fields it works fine.
Any idea was this is happening.
Can someone show a working example adding extra fields (maybe I am missing something)
On the client I have:
import React, { Component, PropTypes } from 'react';
import { Accounts, STATES } from 'meteor/std:accounts-ui';
Accounts.ui.config({
passwordSignupFields: 'USERNAME_AND_EMAIL',
loginPath: '/login',
signUpPath: '/register',
resetPasswordPath: '/reset-password',
changePasswordPath: '/forgot-password',
profilePath: '/profile',
onSignedInHook: () => FlowRouter.go('/polls'),
onSignedOutHook: () => FlowRouter.go('/'),
onPostSignUpHook: () => FlowRouter.go('/newPoll'),
minimumPasswordLength: 6
});
class NewLogin extends Accounts.ui.LoginForm {
fields() {
const { formState } = this.state;
if (formState == STATES.SIGN_UP) {
return {
firstname: {
id: 'firstname',
hint: 'Enter first name if you dare',
label: 'First Name',
onChange: this.handleChange.bind(this, 'firstname')
},
lastname: {
id: 'lastname',
hint: 'Enter last name',
label: 'Last Name',
onChange: this.handleChange.bind(this, 'lastname')
},
...super.fields()
};
}
return super.fields();
}
signUp(options = {}) {
const { firstname = null } = this.state;
if (firstname !== null && lastname !== null) {
console.log("firstname "+firstname);
options.profile = Object.assign(options.profile || {}, {
firstname: firstname,
lastname: lastname
});
}
super.signUp(options);
}
}
Accounts.ui.LoginForm = NewLogin;
export default class NewUser extends Component {
render() {
return (
<div className="signin">
<h2>Register</h2>
<Accounts.ui.LoginForm formState={ STATES.SIGN_UP }/>
</div>
);
}
}
And on the server i have:
import { Meteor } from 'meteor/meteor';
import { Accounts } from 'meteor/accounts-base';
Accounts.config({
sendVerificationEmail: true,
forbidClientAccountCreation: false,
loginExpirationInDays: null
});
Accounts.onCreateUser(function (options, user) {
console.log(options);
console.log(user);
user.profile = options.profile || {};
user.roles = {};
return user;
});
I think the problem is with Accounts.onCreateUser, but I don’t know why.