rare-sapphire
rare-sapphire2y ago

Extending AuthPage

Anyone have any suggestions on how to extend the AuthPage's RegisterPage to include additional input fields?
14 Replies
rare-sapphire
rare-sapphire2y ago
I guess you have to create your own authpage with registration and login page.
rare-sapphire
rare-sapphire2y ago
| refine
component from refine is a authentication page that can be used to login, register, forgot password and update password.
rare-sapphire
rare-sapphire2y 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" }]}
/>
);
};
rare-sapphire
rare-sapphire2y ago
Womp womp Ya I tried to copy the core auth page but there were some errors (maybe some typing error)
Omer
Omer2y ago
Could you share error details?
rare-sapphire
rare-sapphire2y ago
No description
Omer
Omer2y ago
GitHub
refine/index.tsx at next · refinedev/refine
Build your React-based CRUD applications, without constraints. - refine/index.tsx at next · refinedev/refine
rare-sapphire
rare-sapphire2y ago
same as the register component:
import { useForm } from "@pankod/refine-react-hook-form";
import { useForm } from "@pankod/refine-react-hook-form";
Omer
Omer2y ago
Hmm. Could you share StackBlitz env?
rare-sapphire
rare-sapphire2y ago
Omer
Omer2y ago
Thanks ⚡️ We will look at it tomorrow
dependent-tan
dependent-tan2y 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,
}
});
rare-sapphire
rare-sapphire2y 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!
dependent-tan
dependent-tan2y ago
Nice to hear that! But you are right there is a little conflict. We’ll disscuss the case with team tomorrow. 🙏🏼