Extending AuthPage

Anyone have any suggestions on how to extend the AuthPage's RegisterPage to include additional input fields?

14 Replies

genetic-orange•2y ago

I guess you have to create your own authpage with registration and login page.

genetic-orange•2y ago

You can find more details on https://refine.dev/docs/api-reference/core/components/auth-page/

component from refine is a authentication page that can be used to login, register, forgot password and update password.

genetic-orange•2y ago

export const AuthPage: React.FC<AuthProps> = (props) => {
    const { type } = props;
    const renderView = () => {
        switch (type) {
            case "register":
                return <RegisterPage {...props} />;
            case "forgotPassword":
                return <ForgotPasswordPage {...props} />;
            case "updatePassword":
                return <UpdatePasswordPage {...props} />;
            default:
                return <LoginPage {...props} />;
        }
    };

    return <>{renderView()}</>;
};

export const AuthPage: React.FC<AuthProps> = (props) => {
    const { type } = props;
    const renderView = () => {
        switch (type) {
            case "register":
                return <RegisterPage {...props} />;
            case "forgotPassword":
                return <ForgotPasswordPage {...props} />;
            case "updatePassword":
                return <UpdatePasswordPage {...props} />;
            default:
                return <LoginPage {...props} />;
        }
    };

    return <>{renderView()}</>;
};

This is refines core AuthPage. You can create your own same as above and update only the RegisterPage as you desire. And use it in the Refine component LoginPage as

const App = () => {
    return (
        <Refine
            authProvider={authProvider}
            LoginPage={AuthPage}   # <<<======== Your custom AuthPage goes here
            resources={[{ name: "posts" }]}
        />
    );
};

const App = () => {
    return (
        <Refine
            authProvider={authProvider}
            LoginPage={AuthPage}   # <<<======== Your custom AuthPage goes here
            resources={[{ name: "posts" }]}
        />
    );
};

sensitive-blue•2y ago

Womp womp Ya I tried to copy the core auth page but there were some errors (maybe some typing error)

Omer•2y ago

Could you share error details?

sensitive-blue•2y ago

Omer•2y ago

https://github.com/refinedev/refine/blob/next/packages/mui/src/components/pages/auth/components/login/index.tsx#L47 Can you check the package you imported useForm?

GitHub

refine/index.tsx at next · refinedev/refine

Build your React-based CRUD applications, without constraints. - refine/index.tsx at next · refinedev/refine

sensitive-blue•2y ago

same as the register component:

import { useForm } from "@pankod/refine-react-hook-form";

import { useForm } from "@pankod/refine-react-hook-form";

Omer•2y ago

Hmm. Could you share StackBlitz env?

sensitive-blue•2y ago

https://stackblitz.com/edit/refinedev-refine-fjm8lx?file=src%2Fpages%2Fregister%2Findex.tsx

Steven

StackBlitz

Refine Mui Example (forked) - StackBlitz

Run official live example code for Refine Mui, created by Refinedev on StackBlitz

Omer•2y ago

Thanks ⚡️ We will look at it tomorrow

genetic-orange•2y ago

Hey @geekdev, useFormProps is compatible with useForm from the @pankod/refine-core package so you have to pass the useFormProps to refineCoreProps for @pankod/refine-react-hook-form package like below:

const {
     register,
     handleSubmit,  
     formState: { errors },
} = useForm<BaseRecord, HttpError, RegisterFormTypes>({
    refineCoreProps: {
       ...useFormProps,
    }
});

const {
     register,
     handleSubmit,  
     formState: { errors },
} = useForm<BaseRecord, HttpError, RegisterFormTypes>({
    refineCoreProps: {
       ...useFormProps,
    }
});

sensitive-blue•2y ago

Ahh thanks! I see what I did wrong now. I imported from the wrong package. I should done like https://github.com/refinedev/refine/blob/ef3122b79d008d7fe4b85d6a1e5a1441e3cdeb75/packages/mui/src/components/pages/auth/index.tsx#L4:

import { UseFormProps } from "@pankod/refine-react-hook-form";

import { UseFormProps } from "@pankod/refine-react-hook-form";

thanks for catching that!

genetic-orange•2y ago

Nice to hear that! But you are right there is a little conflict. We’ll disscuss the case with team tomorrow. 🙏🏼