How does useLogin with custom authProvider?

I want use custom authProvider and login.

5 Replies

kapa.ai•11mo 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•11mo ago

<@767617717385429022> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orangeOP•11mo ago

Is there api reference documentation of refine v4? @kapa.ai

deep-jade•11mo ago

Hello @xiaoming here is the documentations of how to create authProvider from scratch https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider/ https://refine.dev/docs/guides-concepts/authentication/

genetic-orangeOP•11mo ago

Thanks, I messed up the code, it finally worked.