feat(core,antd,mui,mantine,chakra-uş): add new prop to auth-page to p…

…ass extra params to auth-provider
refinedev · Oct 25, 2024 · b336066 · b336066
1 parent 6d224d0
commit b336066
Show file tree

Hide file tree

Showing 35 changed files with 636 additions and 20 deletions.
diff --git a/.changeset/breezy-wolves-nail.md b/.changeset/breezy-wolves-nail.md
@@ -0,0 +1,45 @@
+---
+"@refinedev/chakra-ui": minor
+"@refinedev/mantine": minor
+"@refinedev/antd": minor
+"@refinedev/core": minor
+"@refinedev/mui": minor
+---
+
+feat: added new prop called `mutationVariables` to `<AuthPage />`. #6431
+From now on, you can pass additional parameters to the `authProvider` methods using the `mutationVariables` prop of the `<AuthPage />` component.
+
+```tsx
+import { AuthPage } from "@refinedev/antd"; // or "@refinedev/chakra-ui", "@refinedev/mantine", "@refinedev/mui"
+
+const MyLoginPage = () => {
+  return (
+    <AuthPage
+      type="login" // all other types are also supported.
+      // highlight-start
+      mutationVariables={{
+        foo: "bar",
+        xyz: "abc",
+      }}
+      // highlight-end
+    />
+  );
+};
+
+// all mutation methods are supported.
+const authProvider = {
+  login: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  register: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  // ...
+};
+```
+
+[Resolves #6431](https://github.com/refinedev/refine/issues/6431)
diff --git a/documentation/docs/authentication/components/auth-page/index.md b/documentation/docs/authentication/components/auth-page/index.md
@@ -748,6 +748,41 @@ const MyLoginPage = () => {
 };
 ```
 
+### mutationVariables
+
+`mutationVariables` is used to pass additional variables to the `authProvider` methods.
+
+```tsx
+const MyLoginPage = () => {
+  return (
+    <AuthPage
+      type="login" // all other types are also supported.
+      // highlight-start
+      mutationVariables={{
+        foo: "bar",
+        xyz: "abc",
+      }}
+      // highlight-end
+    />
+  );
+};
+
+// all mutation methods are supported.
+const authProvider = {
+  login: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  register: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  // ...
+};
+```
+
 ## API Reference
 
 ### Properties

diff --git a/documentation/docs/ui-integrations/ant-design/components/auth-page/index.md b/documentation/docs/ui-integrations/ant-design/components/auth-page/index.md
@@ -892,6 +892,41 @@ const MyLoginPage = () => {
 };
 ```
 
+### mutationVariables
+
+`mutationVariables` is used to pass additional variables to the `authProvider` methods.
+
+```tsx
+const MyLoginPage = () => {
+  return (
+    <AuthPage
+      type="login" // all other types are also supported.
+      // highlight-start
+      mutationVariables={{
+        foo: "bar",
+        xyz: "abc",
+      }}
+      // highlight-end
+    />
+  );
+};
+
+// all mutation methods are supported.
+const authProvider = {
+  login: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  register: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  // ...
+};
+```
+
 ## FAQ
 
 ### How can I remove the default title and logo ?

diff --git a/documentation/docs/ui-integrations/chakra-ui/components/auth-page/index.md b/documentation/docs/ui-integrations/chakra-ui/components/auth-page/index.md
@@ -878,6 +878,41 @@ const MyLoginPage = () => {
 };
 ```
 
+### mutationVariables
+
+`mutationVariables` is used to pass additional variables to the `authProvider` methods.
+
+```tsx
+const MyLoginPage = () => {
+  return (
+    <AuthPage
+      type="login" // all other types are also supported.
+      // highlight-start
+      mutationVariables={{
+        foo: "bar",
+        xyz: "abc",
+      }}
+      // highlight-end
+    />
+  );
+};
+
+// all mutation methods are supported.
+const authProvider = {
+  login: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  register: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  // ...
+};
+```
+
 ## API Reference
 
 ### Properties

diff --git a/documentation/docs/ui-integrations/mantine/components/auth-page/index.md b/documentation/docs/ui-integrations/mantine/components/auth-page/index.md
@@ -911,6 +911,41 @@ const MyLoginPage = () => {
 };
 ```
 
+### mutationVariables
+
+`mutationVariables` is used to pass additional variables to the `authProvider` methods.
+
+```tsx
+const MyLoginPage = () => {
+  return (
+    <AuthPage
+      type="login" // all other types are also supported.
+      // highlight-start
+      mutationVariables={{
+        foo: "bar",
+        xyz: "abc",
+      }}
+      // highlight-end
+    />
+  );
+};
+
+// all mutation methods are supported.
+const authProvider = {
+  login: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  register: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  // ...
+};
+```
+
 ## API Reference
 
 ### Properties

diff --git a/documentation/docs/ui-integrations/material-ui/components/auth-page/index.md b/documentation/docs/ui-integrations/material-ui/components/auth-page/index.md
@@ -967,6 +967,43 @@ const MyLoginPage = () => {
 };
 ```
 
+### mutationVariables
+
+`mutationVariables` is used to pass additional variables to the `authProvider` methods.
+
+```tsx
+import { AuthPage } from "@refinedev/mui";
+
+const MyLoginPage = () => {
+  return (
+    <AuthPage
+      type="login" // all other types are also supported.
+      // highlight-start
+      mutationVariables={{
+        foo: "bar",
+        xyz: "abc",
+      }}
+      // highlight-end
+    />
+  );
+};
+
+// all mutation methods are supported.
+const authProvider = {
+  login: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  register: async ({ foo, xyz, ...otherProps }) => {
+    console.log(foo); // bar
+    console.log(xyz); // abc
+    // ...
+  },
+  // ...
+};
+```
+
 ## API Reference
 
 ### Properties

diff --git a/packages/antd/src/components/pages/auth/components/forgotPassword/index.tsx b/packages/antd/src/components/pages/auth/components/forgotPassword/index.tsx
@@ -52,6 +52,7 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
   renderContent,
   formProps,
   title,
+  mutationVariables,
 }) => {
   const { token } = theme.useToken();
   const [form] = Form.useForm<ForgotPasswordFormTypes>();
@@ -104,7 +105,9 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
       <Form<ForgotPasswordFormTypes>
         layout="vertical"
         form={form}
-        onFinish={(values) => forgotPassword(values)}
+        onFinish={(values) =>
+          forgotPassword({ ...values, ...mutationVariables })
+        }
         requiredMark={false}
         {...formProps}
       >

diff --git a/packages/antd/src/components/pages/auth/components/login/index.tsx b/packages/antd/src/components/pages/auth/components/login/index.tsx
@@ -50,6 +50,7 @@ export const LoginPage: React.FC<LoginProps> = ({
   formProps,
   title,
   hideForm,
+  mutationVariables,
 }) => {
   const { token } = theme.useToken();
   const [form] = Form.useForm<LoginFormTypes>();
@@ -111,6 +112,7 @@ export const LoginPage: React.FC<LoginProps> = ({
                 }}
                 onClick={() =>
                   login({
+                    ...mutationVariables,
                     providerName: provider.name,
                   })
                 }
@@ -152,7 +154,7 @@ export const LoginPage: React.FC<LoginProps> = ({
         <Form<LoginFormTypes>
           layout="vertical"
           form={form}
-          onFinish={(values) => login(values)}
+          onFinish={(values) => login({ ...values, ...mutationVariables })}
           requiredMark={false}
           initialValues={{
             remember: false,

diff --git a/packages/antd/src/components/pages/auth/components/register/index.tsx b/packages/antd/src/components/pages/auth/components/register/index.tsx
@@ -47,6 +47,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
   formProps,
   title,
   hideForm,
+  mutationVariables,
 }) => {
   const { token } = theme.useToken();
   const [form] = Form.useForm<RegisterFormTypes>();
@@ -108,6 +109,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                 }}
                 onClick={() =>
                   register({
+                    ...mutationVariables,
                     providerName: provider.name,
                   })
                 }
@@ -152,7 +154,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
         <Form<RegisterFormTypes>
           layout="vertical"
           form={form}
-          onFinish={(values) => register(values)}
+          onFinish={(values) => register({ ...mutationVariables, ...values })}
           requiredMark={false}
           {...formProps}
         >

diff --git a/packages/antd/src/components/pages/auth/components/updatePassword/index.tsx b/packages/antd/src/components/pages/auth/components/updatePassword/index.tsx
@@ -46,6 +46,7 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
   renderContent,
   formProps,
   title,
+  mutationVariables,
 }) => {
   const { token } = theme.useToken();
   const [form] = Form.useForm<UpdatePasswordFormTypes>();
@@ -96,7 +97,9 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
       <Form<UpdatePasswordFormTypes>
         layout="vertical"
         form={form}
-        onFinish={(values) => updatePassword(values)}
+        onFinish={(values) =>
+          updatePassword({ ...values, ...mutationVariables })
+        }
         requiredMark={false}
         {...formProps}
       >

diff --git a/packages/chakra-ui/src/components/pages/auth/components/forgotPassword/index.tsx b/packages/chakra-ui/src/components/pages/auth/components/forgotPassword/index.tsx
@@ -41,6 +41,7 @@ export const ForgotPasswordPage: React.FC<ForgotPasswordProps> = ({
   renderContent,
   formProps,
   title,
+  mutationVariables,
 }) => {
   const { onSubmit, ...useFormProps } = formProps || {};
   const { mutate } = useForgotPassword<ForgotPasswordFormTypes>();
@@ -99,7 +100,7 @@ export const ForgotPasswordPage: React.FC<ForgotPasswordProps> = ({
             return onSubmit(data);
           }
 
-          return mutate(data);
+          return mutate({ ...mutationVariables, ...data });
         })}
       >
         <FormControl mb="3" isInvalid={!!errors?.email}>

diff --git a/packages/chakra-ui/src/components/pages/auth/components/login/index.tsx b/packages/chakra-ui/src/components/pages/auth/components/login/index.tsx
@@ -51,6 +51,7 @@ export const LoginPage: React.FC<LoginProps> = ({
   formProps,
   title,
   hideForm,
+  mutationVariables,
 }) => {
   const { onSubmit, ...useFormProps } = formProps || {};
 
@@ -86,6 +87,7 @@ export const LoginPage: React.FC<LoginProps> = ({
                 fontSize="sm"
                 onClick={() =>
                   login({
+                    ...mutationVariables,
                     providerName: provider.name,
                   })
                 }
@@ -142,7 +144,7 @@ export const LoginPage: React.FC<LoginProps> = ({
               return onSubmit(data);
             }
 
-            return login(data);
+            return login({ ...mutationVariables, ...data });
           })}
         >
           <FormControl mt="6" isInvalid={!!errors?.email}>