useLogin
This hook returns a callback allowing to call authProvider.login()
, so it’s used in Login forms.
For instance, here is how to build a custom Login page based on email rather than login for authentication:
// 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>
);