eastern-cyan•2y ago

Customizing auth pages

Hi, Can someone tell me how to customize Auth pages? For example: In the login page, I don't want to have options for password reset and sign up. I am using NextJS and Headless UI provider.

7 Replies

kapa.ai•2y ago

Hi @crypticmedusa. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To customize the Auth pages in your refine project with Next.js and Headless UI, you can follow these steps: 1. Use refine-cli to swizzle the auth pages and customize them. Run the following command in your project directory:

npm run refine swizzle

npm run refine swizzle

2. Select the @refinedev/core package:

? Which package do you want to swizzle?  
UI Framework  
❯ @refinedev/core

? Which package do you want to swizzle?  
UI Framework  
❯ @refinedev/core

3. Select the AuthPage component:

? Which component do you want to swizzle?  
Pages  
ErrorPage  
❯ AuthPage

? Which component do you want to swizzle?  
Pages  
ErrorPage  
❯ AuthPage

After swizzling the auth pages, you should see a success message and a list of created files in the src/components/pages/auth folder. Now, you can customize the auth pages by editing the files in the src/components/pages/auth folder. For example, to remove the password reset and sign up options from the login page, you can edit the src/components/pages/auth/components/login.tsx file and remove the relevant elements. For more information on customizing Auth pages, refer to the source (https://refine.dev/docs/tutorial/understanding-authprovider/headless/auth-pages#customizing-auth-pages). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@1010461911227306054> kapa.ai is still learning and improving, please let us how it did by reacting below

eastern-cyanOP•2y ago

@kapa.ai How can I style the input and button of Login component using Tailwind?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: Sorry @crypticmedusa, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist: Perhaps try again in 15mins?

useful-bronze•2y ago

bot is right. you need to swizzle to customize Auth pages. after that you can customize like any normal react component

stormy-gold•2y ago

I tried remove input email but no change in my project

sensitive-blue•2y ago

@dhengghuring can you share a code snippet I might can try to help as well. Did you swizzle the Auth page?

Customizing auth pages

Did you find this page helpful?