flat-fuchsia
flat-fuchsia7mo ago

How does useLogin with custom authProvider?

I want use custom authProvider and login.
5 Replies
kapa.ai
kapa.ai7mo 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.ai7mo ago
<@767617717385429022> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia
flat-fuchsia7mo ago
Is there api reference documentation of refine v4? @kapa.ai
rival-black
rival-black7mo ago
flat-fuchsia
flat-fuchsia7mo ago
Thanks, I messed up the code, it finally worked.