React accounts-ui / user / login components?


This seems to be a FAQ, but one for which so far I haven’t seen answered, so wondering what anyone else is using for user registration / login etc with React?

Wrapping the accounts-ui package as in the tutorial seems far from ideal.


I started doing the accounts-password ui here:

It is almost finished, but far from ideal and it’s not fun at all to do :frowning: . I pratically copied the source code from Meteor’s github and pasted as React. Also the .css is copied from Meteor and I think it should be replaced by inline styles:


Thanks for sharing. Here what I’ve found so far: - Semantic UI based, describes itself as a work-in-progress. I couldn’t get its import to work. - Material UI based.


Building out your own login components is not all that difficult. @ryanswapp has a youtube tutorial walking you through the basics. It’s very well done.


Very excited to try out the material-ui version. I’ve been wrapping useraccounts with this bit of code and a bunch of modified CSS from the bootstrap styled version:

SignIn = React.createClass({
  render() {
    return (
      <div className="row around-xs">
        <AccountsComponent state="signIn" />

AccountsComponent = React.createClass({
  componentDidMount() {
    $('#at-signUp').click((e) => {
    $('#at-forgotPwd').click((e) => {
  render() {
    return (
        <BlazeToReact {...this.props} blazeTemplate='atForm' />


Thanks for the link to the video. It does make it look simple, but only because it’s the absolute basics. At the end of the video, Ryan reference a more fully worked example in github, but it’s only a login component - no account creation / management.


Here’s a version of Meteor Chef base app with fairly comprehensive accounts components in React:

Not so great for reuse, but may be a useful starting point for a new project.


@energistic, I took a look at the material-ui version, and the code was pretty dense - partly because of the language support, so if you need that, they may not be such a bad thing - but also it’s not particularly modular.

So - I’ve taken the meteor chef react example, updated it to the latest base code, and converted the forms to Material-UI with formsy-react / formsy-material-ui.

I’ve also converted the alerts to use Material-UI Snackbars, but with colors similar to the meteorchef:bert alerts. (I actually quite like the Bert alerts, but it’s not Material-UI. :slight_smile: )

I haven’t converted the AppBar or table (yet), as I was focusing on user-accounts, but that shouldn’t take so long, and the forms layout could maybe use some work - I’m no designer!

I don’t think it would be so much work so extract the relevant parts into an existing project - you can see which files I touched in this commit.

You can try it out here:


FYI - just uploaded a react version of accounts ui

It extends alt:react-accounts-unstyled which is very customizable.


Does someone have a full example using alt:react-accounts-unstyled


Any updates on the best package for login components? @gilbertmizrahi Did you find an example?