Meteor React Register Form

The minimal working example to sign up a user with meteor accounts-password and React.js. Written in Typescript.

---

The bare minimum to get started with meteor accounts-password in typescript/react (TSX).

This is the sign up form to register a new user with a password. See the sign in form for the complementary login snippet.

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

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

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    Accounts.createUser({ email, password });
  };

  return (
    <form onSubmit={submit} className="login-form">
      <label htmlFor="email">Email</label>

      <input
        type="text"
        placeholder="Email"
        name="email"
        required
        onChange={e => setEmail(e.target.value)}
      />

      <label htmlFor="password">Password</label>

      <input
        type="password"
        placeholder="Passwort"
        name="password"
        required
        onChange={e => setPassword(e.target.value)}
      />

      <button type="submit">Register</button>
    </form>
  );
};

If you also use Bootstrap and probably also react-bootstrap, this is a visually optimized version:

import { Accounts } from 'meteor/accounts-base';
import React, { useState } from 'react';
import { Form, Button } from 'react-bootstrap';

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

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    Accounts.createUser({ email, password });
  };

  return (
    <Form onSubmit={submit}>
      <Form.Group className="mb-3" controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email" required onChange={e => setEmail(e.target.value)} />
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

      <Form.Group className="mb-3" controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" required onChange={e => setPassword(e.target.value)} />
      </Form.Group>

      <Button variant="primary" type="submit">
        Register
      </Button>
    </Form>
  );
};