React Login Component (need your feedback)

I’m getting ready to open source React login and signup components. I’m just wondering what everyone needs in a production grade component.

edit, here’s the repo in progress: https://github.com/AdamBrodzinski/meteor-react-accounts

The thought is to replace the stock Blaze dropdown as it’s really tough to use on a login ‘page’.

Some ideas:

  • useable for production apps (configurable)
  • css for ‘pages’ and for dropdowns
  • no css by default (includes basic css file for prototyping/base)
  • separate login/signup components
  • compossible so that it they can be included in a dropdown component
  • email, username, password auth
  • password reset link
  • great docs/guides for usage

I’ll prob. leave Oauth implementations open to PR’s as my use case doesn’t need them, but it will be designed to accept them.

7 Likes

One huge advantage a React login component can have over a Blaze one is ease of customization. You could structure it so that people can pass in their own custom components as props on your component, allowing them to configure the structure of the HTML, not just the CSS styling (for example, if someone wanted to use it with material-ui).

If this project goes well, I’d love to include it in the official React tutorial to avoid using Blaze just for accounts-ui.

Also, if you are looking for feature recommendations, I hear that useraccounts is really good, so it might be worth taking a look at what they have: https://atmospherejs.com/useraccounts/core

Really excited about this!

5 Likes

Cool. I think try to look at useracounts way to doing it. It’s used by many. But, don’t hook into routers :slight_smile:

2 Likes

That’s a really good idea! I didn’t even think of that :smiley: I was also thinking of letting them pass in a custom validator function for each input (email, user, password) as well as providing a sane default.

I’m just spitballing but perhaps have a polymorphic API that allows you to pass in elements or use the default ones… eg:

<LoginThing
  type={'username-password'}
  forgotPasswordText='Doh! reset password here'
  confirmPassword={false} />

// or pass in your own

<LoginThing>
  <input ref='email' ...  />
  <input ref='password' ...  />
</LoginThing>

[quote="sashko, post:2, topic:7755"] Also, if you are looking for feature recommendations, I hear that useraccounts is really good, so it might be worth taking a look at what they have [/quote] I can't believe I missed this package! I've searched on atmosphere several times for accounts, login, etc.. but never found this one (perhaps atmosphere needs tags too lol). It looks really good!

Haha, for sure!!

2 Likes

@SkinnyGeek1010, a React login component is really cool and appreciated, I’m very much looking forward to this!

1 Like

Just wanted to let everyone know who is interested, i’ve started a repo here in case you want to track it:

So far it’s super basic and only logs in email-password. Onward!