Useraccounts with react?

help
1

I’ve got an app I’m trying to migrate to React, but I’m not sure what to do when it comes to the useraccounts packages I’ve been using. Any suggestions?

3 Likes
2

I am using the Accounts package with React and have no issues. You can use the regular template {{> loginButtons}} as well. You just need to wrap it with a react component. See [RESOLVED] Passing variables to a template nested in a react component for more info on that.

You can also just create your own login/signup pages. I found this video very helpful for that: https://www.youtube.com/watch?v=sdJDzfHvHPI

3

To clarify, it’s not the Accounts package I’m asking about but useraccounts:bootstrap.

I’m also using flow router, so as far as I can tell I need to use react-layout or blaze-layout but not both, and useraccounts:core seems to use blaze-layout.

I’ve considered using accounts-ui but it doesn’t seem very flexible.

I really don’t want to have to reinvent this.

3 Likes
4

I’m also looking for a solution to this, I’m just getting started with using React in the context of Meteor.

3 Likes
5

I just asked if they can start material-ui repo https://github.com/meteor-useraccounts/core/issues/511

6

I’m making an alternative that’s fully React but I haven’t had a lot of time to work on it lately. I’ve been busy getting Redux to work with React and Blaze but that’s coming to and end.

These work but are not exactly the most feature complete. If you’re rolling your own then at the least it might be a decent base.

Eventually you’ll be able to use the default inputs or pass in your own as children.

/*global React, ReactAccounts:true */
/* jshint maxlen: false */

ReactAccounts = {};
var noop = function() {};

ReactAccounts.LoginForm = React.createClass({
  getDefaultProps: function() {
    return {
      debug: true,
      type: "email-password",
      noValidate: true,
      formClassName: "ReactAccounts__form",
      onLoginError: noop,
    };
  },

  getInitialState: function() {
    return {
      loginErrMsg: ""
    };
  },

  dbug: function() {
    if (this.props.debug) {
      console.debug.apply(console, arguments);
    }
  },

  handleSubmit: function(e) {
    e.preventDefault();
    if (this.props.type === "email-password") {
      var email = this.refs.email.getDOMNode().value;
      var pass = this.refs.password.getDOMNode().value;
      this.loginWithPassword(email, pass);
      this.dbug("Form submit", email, pass, e);
    }
  },

  loginWithPassword: function(email, pass) {
    var self = this;
    Meteor.loginWithPassword(email, pass, function(err) {
      if (err) {
        self.setState({loginErrMsg: err.reason});
        self.props.onLoginError(err);
        self.dbug("ERROR", err.reason);
      } else {
        console.log("Success", Meteor.user());
      }
    });
  },

  render: function() {
    var formProps = {
      className: this.props.formClassName,
      noValidate: this.props.noValidate,
      onSubmit: this.handleSubmit
    };

    return (
      React.createElement("form",  formProps,
        React.createElement("input", {ref: "email", type: "email"}),
        React.createElement("input", {ref: "password", type: "password"}),
        React.createElement("input", {ref: "submit", type: "submit"}),
        React.createElement("div", {ref: "errMsg"}, this.state.loginErrMsg)
      )
    );
  }
});
1 Like
7

I just published a package to render {{> atForm }} in React.

We should now work on useraccounts:flow-routing and useraccounts:iron-routing to allow them rendering React components instead of Blaze templates.

4 Likes
8

@gwendall, not able to get this package working with latest Meteor release. Have you tried using it with the 1.3 beta?

1 Like
9

@gwendall If im not mistake, the package is using Meteor’s React as well as blaze-to-react, which is depending on a different version of Meteor react.

In 1.3 (what im currently using) I see any need to include Meteor’s React as a hindrance, is there any way we can make this package work using npm React?

2 Likes
10

Same problem. Trying to use the useraccounts:bootstrap templates without having to convert them all to .jsx files

1 Like
11

https://www.meteor.com/tutorials/react/adding-user-accounts

This was a lifesaver. This seems to work great

12

My only qualm with this example is that I would still need to include the Blaze library, which might not be a big deal (not sure if will make any kind of noticeable difference).