genetic-orange
genetic-orange11mo ago

How does useLogin with custom authProvider?

I want use custom authProvider and login.
5 Replies
kapa.ai
kapa.ai11mo ago
Hi @xiaoming. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use a custom authProvider with useLogin in Refine, you need to define the login method in your authProvider and then use the useLogin hook in your component. Here's how you can define the login method in your authProvider:
import { AuthBindings } from "@refinedev/core";

const authProvider: AuthBindings = {
login: async ({ email, password }) => {
// Suppose we actually send a request to the back end here.
const user = mockUsers.find((item) => item.email === email);

if (user) {
localStorage.setItem("auth", JSON.stringify(user));
return {
success: true,
redirectTo: "/",
};
}

return {
success: false,
error: {
message: "Login Error",
name: "Invalid email or password",
},
};
},
// ---
};
import { AuthBindings } from "@refinedev/core";

const authProvider: AuthBindings = {
login: async ({ email, password }) => {
// Suppose we actually send a request to the back end here.
const user = mockUsers.find((item) => item.email === email);

if (user) {
localStorage.setItem("auth", JSON.stringify(user));
return {
success: true,
redirectTo: "/",
};
}

return {
success: false,
error: {
message: "Login Error",
name: "Invalid email or password",
},
};
},
// ---
};
(Source: refine.dev (https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider#login)) Then, you can use the useLogin hook in your component like this:
import { useLogin } from "@refinedev/core";

const { mutate } = useLogin();

mutate({ email: "john@mail.com", password: "123456" });
import { useLogin } from "@refinedev/core";

const { mutate } = useLogin();

mutate({ email: "john@mail.com", password: "123456" });
(Source: refine.dev (https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider#login)) Remember to pass your authProvider to the <Refine/> component as a prop:
import { AuthBindings, Refine } from "@refinedev/core";

<Refine
// ---
authProvider={authProvider}
/>;
import { AuthBindings, Refine } from "@refinedev/core";

<Refine
// ---
authProvider={authProvider}
/>;
(Source: refine.dev (https://refine.dev/docs/tutorial/understanding-authprovider/index#using-auth-providers-in-refine)) This way, when you call mutate from useLogin, it will execute the login method from your authProvider with the provided parameters. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@767617717385429022> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange
genetic-orangeOP11mo ago
Is there api reference documentation of refine v4? @kapa.ai
deep-jade
deep-jade11mo ago
genetic-orange
genetic-orangeOP11mo ago
Thanks, I messed up the code, it finally worked.