useLogin is a hook that calls the login method from the authProvider under the hood. It returns a mutation result from @tanstack/react-query.
Usage
import { useLogin } from "@refinedev/core";
const { mutate: login } = useLogin();
login({
email: "[email protected]",
password: "123456",
});
Parameters
Options to configure the mutation from @tanstack/react-query.mutationOptions.onSuccess
Callback function to be called on successful login.
Callback function to be called on login error.
Additional metadata to pass to the mutation.
Return Values
Returns a mutation result from @tanstack/react-query.
A function to trigger the login mutation. Accepts login credentials as a parameter.
An async version of mutate that returns a Promise.
Indicates whether the login mutation is in progress.
Indicates whether the login mutation was successful.
Indicates whether the login mutation encountered an error.
The response data from the login mutation.Indicates whether the login was successful.
The URL to redirect to after successful login.
Error object if login failed.
data.successNotification
SuccessNotificationResponse
Notification message to display on successful login.
Error object if the mutation failed.
Type Parameters
Type of the variables object passed to the login mutation. This is the shape of the data you pass when calling the mutate function.
Examples
Basic Usage
import { useLogin } from "@refinedev/core";
import { Form, Input, Button } from "antd";
interface ILoginForm {
email: string;
password: string;
}
const LoginPage = () => {
const { mutate: login, isPending } = useLogin<ILoginForm>();
const onFinish = (values: ILoginForm) => {
login(values);
};
return (
<Form onFinish={onFinish}>
<Form.Item name="email" rules={[{ required: true }]}>
<Input placeholder="Email" />
</Form.Item>
<Form.Item name="password" rules={[{ required: true }]}>
<Input type="password" placeholder="Password" />
</Form.Item>
<Button type="primary" htmlType="submit" loading={isPending}>
Sign in
</Button>
</Form>
);
};
With Custom Callbacks
import { useLogin } from "@refinedev/core";
const { mutate: login } = useLogin({
mutationOptions: {
onSuccess: (data) => {
console.log("Login successful", data);
},
onError: (error) => {
console.error("Login failed", error);
},
},
});
login({
email: "[email protected]",
password: "123456",
});
With Google OAuth
import { useLogin } from "@refinedev/core";
import { CredentialResponse, GoogleLogin } from "@react-oauth/google";
const LoginPage = () => {
const { mutate: login } = useLogin<CredentialResponse>();
return (
<GoogleLogin
onSuccess={(response) => {
login(response);
}}
onError={() => {
console.log("Login Failed");
}}
/>
);
};