Is there a way to edit the "Authenticated" Page / Login Page

I'm trying to edit the "Authenticated / Login" Page but can't find where

2 Replies

Hi @nico. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, there are ways to edit and customize the authentication and login pages in refine. Here are the main approaches based on the provided knowledge sources: 1. Using the <AuthPage /> component: Refine provides an <AuthPage /> component that can be customized for login, register, forgot password, and update password pages. You can use this component in your routes and customize its props. For example, you can customize the title, add initial form values, or change the type of authentication page:

   <Route
     path="/login"
     element={
       <AuthPage
         type="login"
         title={<h1>My Custom Title</h1>}
         formProps={{
           initialValues: {
             email: "demo@refine.dev",
             password: "demodemo",
           },
         }}
       />
     }
   />

   <Route
     path="/login"
     element={
       <AuthPage
         type="login"
         title={<h1>My Custom Title</h1>}
         formProps={{
           initialValues: {
             email: "demo@refine.dev",
             password: "demodemo",
           },
         }}
       />
     }
   />

Authentication Components Documentation (https://refine.dev/docs/authentication/components/auth-page/) 2. Creating a custom login page: You can create your own custom login page component and use it instead of the default <AuthPage />. This gives you full control over the layout and functionality.

   const CustomLoginPage = () => {
     // Your custom login page implementation
   };

   // In your routes
   <Route path="/login" element={<CustomLoginPage />} />

   const CustomLoginPage = () => {
     // Your custom login page implementation
   };

   // In your routes
   <Route path="/login" element={<CustomLoginPage />} />

Building a React Admin Dashboard (https://refine.dev/blog/building-react-admin-dashboard/#creating-the-authentication-page) 3. Customizing the <AuthPage /> component: You can wrap the <AuthPage /> component and add your own custom elements or styling:

   import { AuthPage as AntdAuthPage, AuthProps } from "@refinedev/antd";
export const AuthPage: React.FC<AuthProps> = ({ type, formProps }) => {
     return (
       <AntdAuthPage
         type={type}
         wrapperProps={authWrapperProps}
         renderContent={renderAuthContent}
         formProps={formProps}
       />
     );
   };

   import { AuthPage as AntdAuthPage, AuthProps } from "@refinedev/antd";
export const AuthPage: React.FC<AuthProps> = ({ type, formProps }) => {
     return (
       <AntdAuthPage
         type={type}
         wrapperProps={authWrapperProps}
         renderContent={renderAuthContent}
         formProps={formProps}
       />
     );
   };

Building a React Admin Dashboard (https://refine.dev/blog/building-react-admin-dashboard/#creating-the-authentication-page) 4. Swizzling the component: Refine allows you to swizzle (copy and customize) the <AuthPage /> component using the Refine CLI. This gives you access to the component's source code, which you can then modify as needed. Mantine UI Integration Documentation (https://refine.dev/docs/ui-integrations/mantine/components/auth-page/) Remember to implement the necessary logic in your authProvider to handle the authentication process after customizing the login page. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@529992799349899264> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Is there a way to edit the "Authenticated" Page / Login Page

Did you find this page helpful?