With Meteor new separating their accounts logic from Blaze, you might be wondering how to get your React Meteor app wired up to log users in and register new users.

What I usually do, is completely throw out the Blaze Account UI template that is usually provided and instead role my own.

The Login Form

Let’s start by implementing a login component in React that will just login the user using Meteor’s authentication:

import React, { Component } from 'react';
import { Meteor } from 'meteor/meteor';

export default class Login extends Component {
  handleSubmit = (event) => {
    event.preventDefault();
    
    Meteor.loginWithPassword(this.email.value, this.password.value);
  }
 
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Email
          <input
            type="email"
            ref={(email) => this.email = email}
          />
        </label>
        <label>
          Password
          <input
            type="password"
            ref={(password) => this.password = password}
          />
        </label>
      </form>
    );
  }
}

This will log the user in with their password.

The Registration Form

For registering a user, you’ll need to accounts-base:

import React, { Component } from 'react';
import { Accounts } from 'meteor/accounts-base';

export default class Register extends Component {
  handleSubmit = (event) => {
    event.preventDefault();
    
    Accounts.createUser(this.email.value, this.password.value);
  }
 
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Email
          <input
            type="email"
            ref={(email) => this.email = email}
          />
        </label>
        <label>
          Password
          <input
            type="password"
            ref={(password) => this.password = password}
          />
        </label>
      </form>
    );
  }
}

Checking If Logged In

If you are using React Router, you’ll probably want to check that the user is logged in for certain routes. You can do that by adding a Route with an onEnter callback:

<Route onEnter={requireAuth}>
   {/* my auth routes */}
 </Route>

The requireAuth function will look something like:

const requireAuth = (nextState, replace) => {
  if (isLoggedOut()) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname },
    });
  }
};

isLoggedOut is a small helper function I wrote, along with isLoggedIn:

import { Meteor } from 'meteor/meteor';

export const isLoggedIn = () => {
  return Boolean(Meteor.userId());
};

export const isLoggedOut = () => {
  return !Meteor.userId();
};

 

Using these building blocks, you can role your own login and registration forms that use passwords. Similar methods are used to login the user using Facebook, Twitter, etc which you can find documentation for on the Meteor docs.

This method provides much greater flexibility in your forms and allows you to remove the Blaze dependency from your React Meteor apps!