React-Admin custom login page and React Hook - reactjs

Question

I'm using React-Admin 3.14 and I would like to have a custom login page. When I use the one below with the useLogin hook, I have a hook related error which I can't figure out.
import React from 'react';
import { useLogin,useNotify } from 'react-admin';
import Button from '#material-ui/core/Button'
const LoginPage = () => {
const HandleClick = () => {
console.log('Clicked login ...');
const login = useLogin;
const notify = useNotify;
login({ username:'john', password:'doe' }).catch(() => notify("Invalid email or password"));
}
return(
<Button variant="contained" onClick={HandleClick}>Login</Button>
);
}
export default LoginPage;
UseLogin is a callback to the login method of the Reac-Admin 3.14 authProvider (https://marmelab.com/react-admin/doc/3.14/Authentication.html#uselogin-hook).
The error that I get is:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
I think I must be breacking Rules of Hooks somewhere ... but which one?
Thanks for your help.
C

Answer 1

Your useLogin and useNotify not executed
Change const login = useLogin to const login = useLogin()
Change const notify = useNotify to const notify = useNotify()
import React from 'react';
import { useLogin,useNotify } from 'react-admin';
import Button from '#material-ui/core/Button'
const LoginPage = () => {
const login = useLogin();
const notify = useNotify();
const HandleClick = () => {
console.log('Clicked login ...');
login({ username:'john', password:'doe' }).catch(() => notify("Invalid email or password"));
}
return(
<Button variant="contained" onClick={HandleClick}>Login</Button>
);
}
export default LoginPage;