[RFR] [BC break] Reimplement auth logic using hooks

[fzaninotto]

• Reimplement auth logic using hooks (no Redux, no saga)
• Use new hooks in Login, Logout, Resource, and CoreAdminRouter
• In the Login page, redirect to home page if user is authenticated (refs Login Page should redirect to the app if the user is already logged #2953)
• Use new hooks in examples
• Update auth documentation
• Handle auto logout when dataProvider returns a 403 (by using useAuthProvider inside useDataProvider)
• Write upgrade guide
  • no more Redux action dispatched for auth calls
  • we systematically pass the location to the authProvider (rather than just the pathName for certain verbs)

import { useLogin } from 'react-admin';

const LoginButton = () => {
    const [loading, setLoading] = useState(false);
    const login = useLogin();
    const handleClick = {
        setLoading(true);
        login({ username: 'john', password: 'p@ssw0rd' }, '/posts')
            .then(() => setLoading(false));
    }
    return <button onClick={handleClick}>Login</button>;
}

import { useLogout } from 'react-admin';

const LogoutButton = () => {
    const logout = useLogout();
    const handleClick = () => logout();
    return <button onClick={handleClick}>Logout</button>;
}

import { useCheckAuth } from 'react-admin';

const MyProtectedPage = () => {
    const checkAuth = useCheckAuth();
    useEffect(() => {
        checkAuth().catch(() => {});
    }, []);
    return <p>Private content: EZAEZEZAET</p>
} // tip: use useAuthenticated() hook instead

import { useCheckAuth } from 'react-admin';

const MyPage = () => {
    const checkAuth = useCheckAuth();
    const [authenticated, setAuthenticated] = useState(true); // optimistic auth
    useEffect(() => {
        checkAuth(undefined, false)
             .then() => setAuthenticated(true))
             .catch(() => setAuthenticated(false));
    }, []);
    return authenticated ? <Bar /> : <BarNotAuthenticated />;
} // tip: use useAuthState() hook instead

[fzaninotto]

Switching to RFR!

[djhi]

🔥