`useLogin`

This hook returns a callback allowing to call authProvider.login(). It’s used in Login forms.

Usage

Here is how to build a custom Login page based on email rather than username:

// in src/MyLoginPage.js
import * as React from 'react';
import { useState } from 'react';
import { useLogin, useNotify, Notification } from 'react-admin';
const MyLoginPage = ({ theme }) => {
 const [email, setEmail] = useState('');
 const [password, setPassword] = useState('');
 const login = useLogin();
 const notify = useNotify();
 const handleSubmit = e => {
 e.preventDefault();
 // will call authProvider.login({ email, password })
 login({ email, password }).catch(() =>
 notify('Invalid email or password')
 );
 };
 return (
 <form onSubmit={handleSubmit}>
 <input
 name="email"
 type="email"
 value={email}
 onChange={e => setEmail(e.target.value)}
 />
 <input
 name="password"
 type="password"
 value={password}
 onChange={e => setPassword(e.target.value)}
 />
 </form>
 );
};
export default MyLoginPage;

Then pass the custom Login form to <Admin>, as follows:

// in src/App.js
import * as React from "react";
import { Admin } from 'react-admin';
import MyLoginPage from './MyLoginPage';
const App = () => (
 <Admin loginPage={MyLoginPage} authProvider={authProvider}>
 ...
 </Admin>
);