rare-sapphire•14mo ago

Add Custom Fields to AuthPage

Here is the AuthPage for the Register Route, and I would like to add password confirmation so the user has to confirm their password, and I would also like to put an additional field that has the organization Id, since my users will need that when signing up.

<Route
                    path="/register"
                    element={
                      <AuthPage
                        type="register"
                        formProps={{
                          defaultValues: {
                            email: "demo@refine.dev",
                            password: "demodemo",
                          },
                        }}
                        
                      />
                    }
                  />

<Route
                    path="/register"
                    element={
                      <AuthPage
                        type="register"
                        formProps={{
                          defaultValues: {
                            email: "demo@refine.dev",
                            password: "demodemo",
                          },
                        }}
                        
                      />
                    }
                  />

How could I add that?

7 Replies

kapa.ai•14mo ago

Hi @nickmontoya. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it's not directly mentioned how to add additional fields such as password confirmation and organization Id to the AuthPage component. However, you can customize the AuthPage component according to your needs. In the Building a React Admin Dashboard with refine (https://refine.dev/blog/building-react-admin-dashboard) blog post, it's shown how to create a custom AuthPage component. You can follow a similar approach to add additional fields to your form. Here's an example of how you might do it: ```jsx import { AuthPage as AntdAuthPage, AuthProps } from "@refinedev/antd";
import { Link } from "react-router-dom";
export const AuthPage: React.FC<AuthProps> = ({ type, formProps }) => {
return (
<AntdAuthPage
type={type}
formProps={{ ...formProps, defaultValues: { ...formProps.defaultValues, passwordConfirmation: "", organizationId: "", }, }} renderFormFields={({ form }) => ( <> <Form.Item name="passwordConfirmation" rules={[ { required: true, message: "Please confirm your password!", }, ({ getFieldValue }) => ({ validator(, value) { if (!value || getFieldValue("password") === value) { return Promise.resolve(); } return Promise.reject(new Error("The two passwords that you entered do not match!")); }, }), ]} > <Input.Password placeholder="Confirm Password" /> </Form.Item> <Form.Item name="organizationId" rules={[ { required: true, message: "Please input your organization Id!", }, ]} > <Input placeholder="Organization Id" /> </Form.Item> </> )} />
);
};

Then you can use your custom `AuthPage` component in your route:

Then you can use your custom `AuthPage` component in your route:

jsx <Route path="/register" element={ <AuthPage type="register" formProps={{ defaultValues: { email: "demo@refine.dev", password: "demodemo", }, }} /> } />

``

Please note that this is a hypothetical example and may need adjustments based on your actual requirements and the actual API of the

AuthPage component. For the most accurate information, please refer to the official documentation or source code of the AuthPage

 component.
----------------------

Note: you can ask me a follow up question by @ mentioning me again` :speech_balloon: ----------------------

kapa.ai•14mo ago

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

correct-apricot•14mo ago

Hello @nick_montoya, unfortunately fields customizations not available at the moment. However, you have the option to swizzle <AuthPage> and customize it to your requirements. https://refine.dev/docs/packages/documentation/cli/#swizzle

rare-sapphire•14mo ago

Thanks for the quick reply! If I can actually just use the AWS Amplify Authenticator component to handle all the auth, that would be great, but I am not sure how to go about doing that since the whole app is already setup to use this AuthPage

correct-apricot•14mo ago

actually <AuthPage> not strictly tighlty copuled to refine. you can see here <AuthPage> uses useLogin https://github.com/refinedev/refine/blob/next/packages/antd/src/components/pages/auth/components/login/index.tsx#L66 when you setup authProvider you can use useLogin. useLogin calls authProvider.login but unfortunately i don't have enough knowledge for AWS amplify. i cannot provide you example

rare-sapphire•14mo ago

Ok, i got rid of all the auth routes besides /login, since Amplify's Authenticator takes care of all of them in one Now I need to figure out how to inject AWS Amplify Auth's functionality into the Authenticated component, as shown here:

<Authenticated fallback={<CatchAllNavigate to="/login" />}>
  <ThemedLayoutV2 Header={Header} Title={Title} OffLayoutArea={OffLayoutArea}>
    <Outlet />
  </ThemedLayoutV2>
</Authenticated>

<Authenticated fallback={<CatchAllNavigate to="/login" />}>
  <ThemedLayoutV2 Header={Header} Title={Title} OffLayoutArea={OffLayoutArea}>
    <Outlet />
  </ThemedLayoutV2>
</Authenticated>

AWS provides functions like Auth.currentAuthenticatedUser() that throws an error if no use is signed in, ideally I can just use that to determine if the user is authenticated or not, but I am not sure how I can simulate <Authenticated fallback={<CatchAllNavigate to="/login" />}> with that.

correct-apricot•14mo ago

<Authenticated> is the component form of useIsAuthenticated. it means uses authProvider.check functiom under the hood https://refine.dev/docs/api-reference/core/components/auth/authenticated/ for example we have 3rd party auth provider examples https://github.com/refinedev/refine/blob/next/examples/data-provider-supabase/src/App.tsx#L216 we uses supabaseClient.auth.getSession(). I believe you can use Auth.currentAuthenticatedUser() from AWS