How to Create a Feature-Rich Swipeable Login Page with React

In today’s web development landscape, creating an engaging and user-friendly login page is crucial for any application. This article will guide you through the process of building a feature-rich, swipeable login page using React. We’ll create a modern, responsive design that seamlessly transitions between login and signup modes, complete with animated transitions and social media login options.

Preview of Login Page

Preview of SignUp Page

Setting Up the Project

First, ensure you have React set up in your project. We’ll also be using a few additional libraries:

• Framer Motion for animations
• Lucide React for icons
• Tailwind CSS for styling

You can install these dependencies using npm or yarn:

npm install react framer-motion lucide-react
# or
yarn add react framer-motion lucide-react

Make sure you have Tailwind CSS configured in your project as well.

Creating the Login/Signup Component

Let’s start by creating our main component, LoginSignupPage. This component will handle the state and rendering of our login/signup form.

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Mail, Lock, User, ArrowRight, Github, Twitter } from 'lucide-react'; const LoginSignupPage = () => { const [isLogin, setIsLogin] = useState(true); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [name, setName] = useState(''); const toggleMode = () => setIsLogin(!isLogin); // ... (rest of the component)
}; export default LoginSignupPage;

Here, we’re importing the necessary dependencies and setting up our component with state variables for the form fields and a toggle for switching between login and signup modes.

Creating Reusable Input Fields

To keep our code DRY (Don’t Repeat Yourself), let’s create a reusable InputField component:

const InputField = ({ icon: Icon, placeholder, type, value, onChange }) => ( <div className="flex items-center bg-gray-100 p-3 rounded-lg"> <Icon className="text-gray-500 mr-3" size={20} /> <input type={type} placeholder={placeholder} value={value} onChange={onChange} className="bg-transparent outline-none flex-1 text-gray-800" /> </div>
);

This component takes an icon, placeholder text, input type, value, and onChange function as props. It renders a styled input field with an icon, making our form look sleek and consistent.

Building the Form

Now, let’s create the main structure of our login/signup form:

return ( <div className="flex flex-col md:flex-row h-screen bg-gray-100"> <div className="w-full md:w-1/2 bg-white flex items-center justify-center p-8 md:p-16"> <div className="w-full max-w-md"> <AnimatePresence mode="wait"> <motion.div key={isLogin ? 'login' : 'signup'} initial="hidden" animate="visible" exit="hidden" variants={formVariants} transition={{ duration: 0.3 }} > <h1 className="text-3xl md:text-4xl font-bold mb-8 text-gray-800"> {isLogin ? 'Welcome back' : 'Create account'} </h1> <div className="space-y-4"> {!isLogin && ( <InputField icon={User} placeholder="Full Name" type="text" value={name} onChange={(e) => setName(e.target.value)} /> )} <InputField icon={Mail} placeholder="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} /> <InputField icon={Lock} placeholder="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> </div> {/* ... (submit button and social login options) */} </motion.div> </AnimatePresence> </div> </div> {/* ... (right side panel) */} </div>
);

This code creates a responsive layout with the form on the left side. We use Framer Motion’s AnimatePresence and motion.div to add smooth transitions when switching between login and signup modes.

Adding the Submit Button and Social Login Options

Let’s add a submit button and social login options to our form:

<div className="mt-8"> <button className={`text-white px-6 py-3 rounded-lg w-full flex items-center justify-center ${isLogin ? 'bg-blue-600' : 'bg-green-600'}`} > {isLogin ? 'Sign In' : 'Sign Up'} <ArrowRight className="ml-2" size={20} /> </button>
</div>
{isLogin && ( <div className="mt-6 flex justify-center space-x-4"> <button className="p-2 bg-gray-200 rounded-full"> <Github className="text-gray-700 hover:text-white" size={24} /> </button> <button className="p-2 bg-gray-200 rounded-full"> <Twitter className="text-gray-700 hover:text-white" size={24} /> </button> </div>
)}

This code adds a submit button that changes color and text based on the current mode (login or signup). For the login mode, we also add social login options for GitHub and Twitter.

Creating the Swipeable Side Panel

To complete our swipeable login page, let’s add a side panel that allows users to switch between login and signup modes:

<div className={`w-full md:w-1/2 flex items-center justify-center p-8 md:p-16 ${isLogin ? 'bg-blue-600' : 'bg-green-600'}`}
> <div className="text-center"> <h2 className="text-3xl md:text-4xl font-bold mb-6 text-white"> {isLogin ? 'New here?' : 'Already have an account?'} </h2> <p className="text-gray-200 mb-8"> {isLogin ? 'Sign up and discover a great amount of new opportunities!' : 'Sign in to access your account and continue your journey!'} </p> <button className="bg-white px-6 py-3 rounded-lg" style={{ color: isLogin ? '#2563EB' : '#059669' }} onClick={toggleMode} > {isLogin ? 'Sign Up' : 'Sign In'} </button> </div>
</div>

This side panel changes its content and color based on the current mode. The button allows users to switch between login and signup modes, triggering the toggleMode function we defined earlier.

Adding Animations

To make our login page more engaging, we’ve used Framer Motion for animations. Here’s how we defined the animation variants:

const formVariants = { hidden: { opacity: 0, x: -30 }, visible: { opacity: 1, x: 0 },
};

These variants are applied to the motion.div wrapping our form, creating a smooth transition effect when switching between login and signup modes.

Conclusion

By following this guide, you’ve created a feature-rich, swipeable login page using React. This login page includes:

1. Responsive design that works on both mobile and desktop
2. Smooth animations when switching between login and signup modes
3. Reusable input components with icons
4. Social login options
5. A swipeable side panel for easy mode switching

This modern and engaging login page will provide a great user experience for your application. Remember to add proper form validation and connect the form submission to your backend authentication system to complete the functionality.

Feel free to customize the colors, add more fields, or incorporate additional features to make this login page perfect for your specific project needs!

Frequently Asked Questions (FAQs)

After reading this article, both beginners and senior developers might have some questions. Here are some common FAQs:

For Beginners:

1. Q: Do I need to know Tailwind CSS to implement this login page?
   A: While the example uses Tailwind CSS for styling, you don’t necessarily need to use it. You can replace the Tailwind classes with your own CSS styles. However, learning Tailwind CSS can speed up your development process.

2. Q: What is Framer Motion, and is it necessary for this project?
   A: Framer Motion is a popular animation library for React. It’s used in this project to create smooth transitions between login and signup modes. While not strictly necessary, it greatly enhances the user experience. You can implement the login page without animations if you prefer.

3. Q: How do I handle form submission and validation?
   A: This example doesn’t include form submission or validation. You’ll need to add an onSubmit handler to the form and implement validation logic. Consider using libraries like Formik or react-hook-form for more complex form handling.

4. Q: Can I use this login page with any backend?
   A: Yes, this login page is frontend-only and can be integrated with any backend. You’ll need to modify the form submission logic to send requests to your specific backend API.

5. Q: How can I add more social login options?
   A: To add more social login options, you can create additional buttons similar to the GitHub and Twitter buttons. You’ll need to implement the actual authentication logic for each provider separately.

For Senior Developers:

1. Q: How can this component be optimized for performance?
   A: Some optimization strategies include:

   • Memoizing the InputField component with React.memo
   • Using the useCallback hook for event handlers
   • Implementing code-splitting to load social login components on demand

2. Q: What considerations should be made for accessibility?
   A: To improve accessibility:

   • Add proper aria labels to inputs and buttons
   • Ensure correct heading hierarchy
   • Implement keyboard navigation for the swipeable interface
   • Provide text alternatives for icon-only buttons

3. Q: How can this component be made more reusable across different projects?
   A: To increase reusability:

   • Extract the color scheme and styling into a theme configuration
   • Create a higher-order component or custom hook to handle authentication logic
   • Use environment variables for API endpoints and client IDs

4. Q: What testing strategies would you recommend for this component?
   A: Consider implementing:

   • Unit tests for individual components using Jest and React Testing Library
   • Integration tests for form submission and mode switching
   • End-to-end tests using Cypress or Playwright to test the full user flow

5. Q: How would you handle state management for a larger application incorporating this login page?
   A: For larger applications, consider:

   • Using Context API for local state management
   • Implementing Redux or MobX for global state management
   • Utilizing React Query or SWR for server state management

6. Q: What security considerations should be taken into account?
   A: Important security considerations include:

   • Implementing HTTPS for all communications
   • Using secure HTTP-only cookies for storing authentication tokens
   • Implementing CSRF protection
   • Rate limiting login attempts to prevent brute force attacks
   • Considering two-factor authentication options

This article will really helpful for beginners !! Happy Coding❣️.