Mohan pd.
Mohan pd. Author of The Coders Blog. Also a professional fullstack javascript developer working with various tech company and client around world.

Integrating login form interface in Meteor's app with React JS.

Sep 03, 2019 · 4 minutes
Integrating login form interface in Meteor's app with React JS.

As we know, Meteor JS is famous for its real-time architecture and it has a elegant implementation. Meteor's officially use Blaze as frontend rendering system. But in recent year, community has started supporting different view engine under the hood. As we talk about the view engines, ReactJS will be come first in the list and it has a very good support for it although there are couple of thing that are still in development. One of them is meteor add accounts-ui command, which will generate blaze code and it's customization is little tricky for the beginner.

Let's jump into process of implementing Users and Account feature while using React JS as a view with custom user login form written as pure react component. There are lots of tutorial in the internet which will teach you how to use auto generated form with react, but in this article we are implementing it using react and some method provided by Meteor framework.

Here is simple react form

import React from "react";

export const Register = () => {
  return (
    <form>
      <div className="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input
          type="email"
          className="form-control"
          id="exampleInputEmail1"
          aria-describedby="emailHelp"
          placeholder="Enter email"
        />
      </div>
      <div className="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input
          type="password"
          className="form-control"
          id="exampleInputPassword1"
          placeholder="Password"
        />
      </div>
      <button type="submit" className="btn btn-primary">
        Submit
      </button>
    </form>
  );
};

Above code must be straight forward if you know basics about ReactJS. We have simple stateless component with two input field and some bootstrap class in it.

Using React Hooks to store user input values.

import React, { useState } from "react";

export const Register = () => {
  const [email, setEmail] = useState(0);
  const [password, setPassword] = useState(0);

  function handleValueChange(e) {
    const {
      target: { value, name }
    } = e;
    if (name === email) {
      setEmail(value);
    } else if (name === "password") {
      setPassword(value);
    } else {
      // other code.
    }
  }

  function handleRegister() {
    console.log(email, password)

  }

  return (
    <form>
      <div className="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input
          type="email"
          value={email}
          onChange={handleValueChange}
          className="form-control"
          id="exampleInputEmail1"
          aria-describedby="emailHelp"
          placeholder="Enter email"
        />
      </div>
      <div className="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input
          type="password"
          value={password}
          className="form-control"
          onChange={handleValueChange}
          id="exampleInputPassword1"
          placeholder="Password"
        />
      </div>
      <button type="submit" onClick={handleRegister} className="btn btn-primary">
        Register
      </button>
    </form>
  );
};

Here we have added two state using react useState api & a simple function which will set the state if user change input value on the input fields. Also we have declare handleRegister function which will be trigger if user submit a form.

Code above is simple enough to build a concept. But in production, there are optimized and rapid way to handle forms in React Meteor app. One of the form handling library is uniform which is available in npm registry and is quite efficient in handle simple to complex forms.

Registering using Meteor's Accounts methods

Enter following command in terminal from the root of the project to install required package for authorization.

# from project root
meteor add accounts-ui accounts-password

After completion of installation we have excess to Accounts object in meteor app. So lets update our function handleRegister from above snippet to perform registration.

function handleRegister() {
  Accounts.createUser(
    { email: email, password: password },
    error => {
      console.log(error);
      // if not error
      // After register code goes here
    }
  );
}

Here is the another function say handleLogin which will login the user.

// Meteor is accessible from anywhere react-meteor-app 
function handleLogin(user, password) {
  Meteor.loginWithPassword(user, password, error => {
    if (error) {
      console.log(error);
    } else {
      props.setLoggingIn(Meteor.loggingIn());
      window.location.replace("/member-area");
    }
  });
}

Meteor object inside the framework has method loginWithPassword which takes two argument and a callback function. Using same from above we can implementation login as well by replacing handleRegister function with handle login function.

Now, you have to implement React Router to navigate between routes and to block some routes for non-login or unauthorized user. We will not cover implement of react router in this article but we will look into way to check if user is authorized or not at any point in the app.

Similar to above method, Meteors have its method loggingIn() which will return boolean flag to check user authorization status.

Meteor.loggingIn()

Further Reading

Here are the list of other login provider packages Meteor’s provide out of the box which simply takes two or more argument and a callback function for authorization.

meteor add accounts-password
meteor add accounts-facebook
meteor add accounts-google
meteor add accounts-github
meteor add accounts-twitter
meteor add accounts-meetup
meteor add accounts-meteor-developer

Some of them might need API token and SDK account to implement depending on the provider user want to use. See details in meteor official documentation here.