Extending AuthPage

dual-salmon · 2022-11-19T00:37:06.152Z

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

S

spotty-amber•11/19/22, 3:13 AM

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

S

spotty-amber•11/19/22, 3:16 AM

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

| refine

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

S

spotty-amber•11/19/22, 3:20 AM

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()}</>;
};

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

RegisterPage

RegisterPage

RegisterPage as you desire. And use it in the Refine component

LoginPage

LoginPage

LoginPage

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" }]}
        />
    );
};

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" }]}
        />
    );
};

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

D

dual-salmonOP•11/19/22, 5:59 AM

Womp womp

Sspotty-amber ``` export const AuthPage: React.FC<AuthProps> = (props) => { const { type }...

D

dual-salmonOP•11/19/22, 5:59 AM

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

O

Omer•11/19/22, 12:11 PM

Could you share error details?

D

dual-salmonOP•11/19/22, 8:03 PM

O

Omer•11/19/22, 8:14 PM

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

Vverbal-lime https://github.com/refinedev/refine/blob/next/packages/mui/src/components/pages/...

D

dual-salmonOP•11/19/22, 9:29 PM

same as the register component:

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

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

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

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

O

Omer•11/19/22, 9:50 PM

Hmm. Could you share StackBlitz env?

D

dual-salmonOP•11/20/22, 4:55 AM

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

StackBlitzSteven

Refine Mui Example (forked) - StackBlitz

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

O

Omer•11/20/22, 6:48 AM

Thanks

We will look at it tomorrow

C

colossal-harlequin•11/20/22, 5:58 PM

Hey @geekdev,

useFormProps

useFormProps

useFormProps

useFormProps is compatible with

useForm

useForm

from the

@pankod/refine-core

@pankod/refine-core

@pankod/refine-core

@pankod/refine-core package so you have to pass the

useFormProps

useFormProps

useFormProps

useFormProps to

refineCoreProps

refineCoreProps

for

@pankod/refine-react-hook-form

@pankod/refine-react-hook-form

@pankod/refine-react-hook-form

@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,
    }
});

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

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

Ccolossal-harlequin Hey @geekdev, `useFormProps` is compatible with `useForm` from the `@pankod/refi...

D

dual-salmonOP•11/20/22, 6:43 PM

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";

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

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

thanks for catching that!

C

colossal-harlequin•11/20/22, 7:27 PM

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