Simple Login Form for Meteor written in React/Typescript
The minimal working example to sign in a user with meteor accounts-password and react.js
The bare minimum to get started with meteor accounts-password in typescript/react (TSX).
This is the sign in form to login an already registered user with a password. See the sign up form for the complementary registration snippet.
import { Meteor } from 'meteor/meteor';
import React, { useState } from 'react';
export const LoginForm = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const submit = (e: React.FormEvent) => {
e.preventDefault();
Meteor.loginWithPassword({ 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="Password"
name="password"
required
onChange={e => setPassword(e.target.value)}
/>
<button type="submit">Login</button>
</form>
);
};
If you also use Bootstrap and probably also react-bootstrap, this is a visually optimized version:
import { Meteor } from 'meteor/meteor';
import React, { useState } from 'react';
import { Form, Button } from 'react-bootstrap';
export const LoginForm = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const submit = (e: React.FormEvent) => {
e.preventDefault();
Meteor.loginWithPassword({ 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.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">
Login
</Button>
</Form>
);
};