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.
How could I add that?
7 Replies
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
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> </> )} />
);
};
jsx <Route path="/register" element={ <AuthPage type="register" formProps={{ defaultValues: { email: "demo@refine.dev", password: "demodemo", }, }} /> } />
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> </> )} />
);
};
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:
----------------------<@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 examplerare-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:
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