Auth Component - Copy this React, Tailwind Component to your project
I want to create a Login and Signup flow similar to how ChatGPT handles its login and signup process. Here are the details: Minimalist UI/UX: I want a clean, modern design with a minimalist user interface like ChatGPT’s login and signup pages. The form should have two sections: one for login and one for signup, with smooth transitions between them (either tabs or switching views). Use simple text fields for email and password, with buttons for submission. Both forms should have a consistent and clear layout. Email based Authentication: For the Signup page, I want to use email and password registration, with email validation. For the Login page, the user should be able to log in using their email and password. Password Input: Password inputs should have an option to show or hide the password, using a toggle button. Responsive Design: The login/signup form should be fully responsive across all device sizes (desktop, tablet, and mobile). The form should be centered on the page, with simple, flat design elements. Social Sign in Options: Include Google and Facebook buttons for social login as additional options below the email/password form, just like in ChatGPT’s interface. Form Validation: Show real time validation errors for fields (e.g., if the email is invalid or the passwords don’t match). Display appropriate error messages for unsuccessful login/signup attempts. Transitions and Feedback: Provide feedback to the user with a loading spinner when submitting the form. After successful login/signup, redirect to a dashboard or home page.
