React components?

[jhartma]

Are there any opinions on doing react components for useraccounts?

[makstr]

In a limited fashion you can try using a wrapper, like this:

AccountsUIWrapper = React.createClass({
  componentDidMount() {
    // Use Meteor Blaze to render login buttons
    this.view = Blaze.render(Template.loginButtons,
      React.findDOMNode(this.refs.container));
  },
  componentWillUnmount() {
    // Clean up Blaze view
    Blaze.remove(this.view);
  },
  render() {
    // Just render a placeholder container that will be filled in
    return <span ref="container" />;
  }
});

Alternatively, you can design a component, this article explains the logic with blaze - so obviously this would need to be reworked into React, nonetheless it's a good starting point:

http://blog.benmcmahen.com/post/41741539120/building-a-customized-accounts-ui-for-meteor

[hellogerard]

Working on my first React + Meteor project and I am very much missing meteor-useraccounts. I am building everything from scratch.

I would of course love a React version, but I understand the significant time and cost. Also, why stop there? Once you build a React version of useraccount, why not an Angular version?

This topic came up on the Meteor Podcast recently. Now that Meteor has embraced Blaze/React/Angular as 1st-class, it puts package authors in a very tough position. Not sure what the answer, if any, is.

[makstr]

Here is a workaround at least until there is an official implementation:

@IncludeTemplate = React.createClass

  componentDidMount: () ->
    componentRoot = React.findDOMNode(@)
    parentNode = componentRoot.parentNode
    parentNode.removeChild(componentRoot);
    options = @props.options ? {}
    @blazeElement = Blaze.renderWithData @props.template, options , parentNode

  render: (template) ->
    <div />    

@UserAccountsFormComponent_signIn = React.createClass({

  render: function () {
    options = {state : 'signIn'}
    return (
      <div>        
        <IncludeTemplate template={Template.atForm} options={options} />
      </div>
    )
  }
});

@UserAccountsFormComponent_signUp = React.createClass({
  render: function () {
    options = {state : 'signUp'}
    return (
      <div>        
        <IncludeTemplate template={Template.atForm} options={options} />
      </div>
    )
  }
});

@UserAccountsFormComponent_forgotPwd = React.createClass({
  render: function () {
    options = {state : 'forgotPwd'}
    return (
      <div>        
        <IncludeTemplate template={Template.atForm} options={options} />
      </div>
    )
  }
});

[splendido]

Hi all, I'd love to understand how much effort it would require to get also React components and how could it work... different packages like we've just done for usreaccounts:iron-routing and useraccounts:flow-routing?

Btw, I agree with @hellogerard: it's not gonna be possible for package authors to develop/maintain n to the power of n packages to support all current directions... UserAccounts has been (IMHO) a breakthrough in supporting many different front-end UI frameworks and now it's doing great also with different routers... It's going to become a full-time work! :-(

[gwendall]

I did a package to easily use the Blaze version in React until we get full-fledged components for that.

https://github.com/gwendall/meteor-useraccounts-react

Note: it just handles the rendering of {{> atForm }} in React for now, we should work on useraccounts:flow-routing and useraccounts:iron-routing to allow them rendering React components instead of Blaze templates.

[splendido]

:+1:

[splendido]

@gwendall please consider the possibility to publish under the useraccounts namespace ;-)

[hpx7]

Note that simply wrapping blaze templates won't work for SSR (at least until/if Blaze supports SSR), which is one of the major selling points of React for me.

[stubailo]

So I just realized that while the useraccounts:core package has a dependency on Blaze, it doesn't actually seem to have any templates - just a bunch of exported JavaScript functions to be used as helpers. Does this mean someone could re-use all of the logic inside a bunch of React components?

[gerwinbrunner]

Im just porting over the useraccounts:ionic package to a ionic-react package. Would someone be interested in these? Then I could share it.

I'm currently trying to figure out how to use the ReactRouter and create the package for this also... but I'm not sure how this could fit...

[splendido]

@stubalio you are right, no templates shipped with core. And yes, the idea is exactly to provide all the logics and helpers to be used by external templates! :-)

[stubailo]

Right, should we remove the blaze dependency?

[splendido]

yeah, obviously! ...might be something left from old times ;-)

[splendido]

mmm, actually there's one: ensure_signed_in was recently added probably to be used by useraccounts:flow-rounting

@jshimko can you confirm this? Should we move it over to useraccounts:flow-rounting?

[splendido]

@gerwinbrunner it would be great if we could find a way to get v2.0 out with support for both Blaze and React.

When I started work on it React wasn't among the options yet so I started to create different packages each one bringing its own templates (for Blaze...) but this won't work if we want to get support for React.

Do you guys think something like this could work as a developer experience?

• meteor add useraccounts:react-templates (or meteor add useraccounts:blaze-templates)
• meteor add useraccounts:flow-routing (or meteor add useraccounts:iron-routing or ...)
• meteor add useraccounts:title
• meteor add useraccounts:oauth
• meteor add useraccounts:separator
• meteor add useraccounts:password
• meteor add useraccounts:meld
• meteor add useraccounts:...

or would it be too cumbersome?

[stubailo]

Hmm would it be possible to start just by having a version of useraccounts unstyled with react?

[splendido]

yeah, would be much easier :-)

The thing is I'm trying to get v2.0 out but without spare time continue to work on version 1.0 means no progress for version 2.0 :-(

I'll try to have a look at it...

[jshimko]

Yeah @splendido, we added that ensureSignedIn template when we started supporting Flow Router. Should we just rewrite that logic with React? Or maybe just add instructions to each router package readme on how to do the same thing with both Blaze and React? It'd be great to have an easy helper for all scenarios, but that may be difficult to do without adding the dependencies.

Or do we make ensure-signedin-blaze and ensure-signedin-react packages? :)

I personally never use the template helper because I prefer separating authenticated content by route and then using a login redirect. For example, I pass in AccountsTemplates.ensureSignedIn to a route group (Flow Router) and then add any private routes to that group. So something like:

// define route group for authenticated routes
const privateRoutes = FlowRouter.group({
  name: "private",
  triggersEnter: [AccountsTemplates.ensureSignedIn]
});

// an example route that forces login
privateRoutes.route("/dashboard", {
  name: "dashboard",
  action() {
    BlazeLayout.render("dashboard_layout", { content: "dashboard" });
    // or
    ReactLayout.render(DashboardLayout, { content: <Dashboard /> });
  }
});

(Note that the above needs to be in a .jsx file if using React)

You could obviously do something similar with an Iron Router controller too. That obviously doesn't satisfy the in-place template level login with no redirect, so there's another scenario. So it sounds like we need an option for Flow/Iron Router redirects, and Blaze/React component-level auth.

I'm not sure what makes the most people happy. It feels like adding examples for each scenario to the readme may be a reasonable option. It is a major version change, so if there was any time the breaking change could happen, it'd be now.

Thoughts?

EDIT: As I looked at my original example, I realized that it broke the redirect a little. If you get redirected to the login by a private route, you wouldn't get directed back to the original route by useraccounts (which was the whole point of AccountsTemplates.ensureSignedIn). Updated to use routing package helper.

[splendido]

@stubailo I gave a try to get proper React templates using existing template helpres but unfortunately this is not possible since many function (like this one) uses Template to get the current context.

I'd say working on React for v2.0 should be much easier at this point... :-(

[splendido]

@jshimko I hope to get some time on Thursday to have a look at the ensureSignedIn issue...

[stubailo]

@splendido couldn't that helper just as easily take an argument rather than accessing the context?

[PolGuixe]

Is anyone working on a new version of useraccounts for React?

[splendido]

@PolGuixe I'd like to start worging again on v2.0 considering the upcoming Meteor 1.3 release: this could be the right time to design it to work also with React.

@stubailo are there any resources you'd suggest to get started with Meteor 1.3? I'm thinking about best practices or official guidelines for essential stuff like:

• module's structure
• packages' s structure
• linters and their official configuration
• tests

But also about:

• React componens, state management (flux, redux, etc.) and minimongo
• Blaze?
• etc.

I'm not having that much spare time at the moment and besides I got to a good point with v.2.0 I'm now a little on hold, there are too many news on the table and I'm not that comfortable about wasting time doing and redoing things many different times...

[stubailo]

@splendido here's the best we have at the moment: http://guide.meteor.com/v1.3/

This includes some info about React, module structure, etc. We've decided not to focus on package development in the guide at the moment because it's a much smaller audience. I'd be happy to personally answer any questions you may have about these issues.

I'm not that comfortable about wasting time doing and redoing things many different times...

If you build it as an NPM package, you'll be 100% bulletproof. Especially for React, I think that is the way to go. And it's trivial to use NPM packages in Meteor Atmosphere packages, so I'd say it makes a lot of sense to build NPM-first, and then make a simple wrapper if you think it's useful.

IMO the architecture I would follow is, make a plain JavaScript module (no React or Blaze dependencies) that is useraccounts-core on NPM. You can use whatever you want for state management, but I'd say Minimongo and Tracker still make sense.

Then it should be easy to insert this logic into React/Angular/Blaze wrappers, and you can rely on the community for some of that. Personally, I'm fine writing all of my own React components, but I don't want to worry about routing, error handling, etc.

[PolGuixe]

+1 on @stubailo approach. If required I am happy to help.

[splendido]

thanks for the pointers @stubailo!

I'll try to get back to this soon. In the meanwhile if @PolGuixe would like to have a look at what is already on the table for v2.0 I'll be happy to have a chat on this in the next days. Just let me know!

[johnslemmer]

+1 to all of this. And also support for react-router.

[hmontes]

+1 for the react-router support

[vishnumenon]

+1 for react-router

[discdiver]

+1 for react-router. Anyone work on that?

[Siyfion]

@splendido & @stubailo What happened to this package?

It seems to have sort of died... v2 branch not worked on for over a year, no native react support, no react-router support, etc.

You've ditched Blaze as an officially supported front-end, without giving us a decent option in React. 👎 Yeah, sure I can add meteor add gadicc:blaze-react-component which means I then have to add templating rather than static-html, etc. and bloat and slow down my code, but it's not exactly an ideal solution.

[anarchist912]

@Siyfion @gwendall @discdiver @splendido @stubailo

I've been searching the web thoroughly to figure out the best way of using meteor-useraccounts in React. I found an atmosphere package by @royGil that looks quite promising.

I'm giving it a try at the moment. I got a login form rendered easily in Meteor 1.8. Next I'll try styling it with Bootstrap 4. There is already a styling package for semantics ui, next to an unstyled package. Maybe someone wants to give it a try, too or even build a new styling package. PS: It works with React Router.

https://github.com/royGil/accounts-react