A Login/Signup page is something you will find in every modern application whether it is an E-Commerce website or a Social Media application. In this beginner-friendly tutorial, we will build a simple Login/Signup page where you the user can toggle between Login and Signup with a single click.
Prerequisites:
- React Hooks (Basic)
- CSS (Basic)
App Setup
Follow this doc to setup React app with TailwindCSS. This will take around 1-2 minutes. Once done, create a 'pages' folder in the 'src' directory and create a 'Login.jsx' page in the folder. For now, we will simply return the Login component and render it from our App.jsx as such:
Later, you can implement routing in your App and render it as such:
Design Login Form
In our Login page, let's create state variables for our inputs and to toggle between Login & SignUp forms:
When isLogin is true, we will display the Login form and when it is false, we will display the SignUp form. Let's go ahead and style the Login form!
Let's go ahead and style them as such:
Our Login form can be divided into 4 parts:
- Top (consisting App name and Sign In text)
- Social Icons container
- Inputs & Submit button
- Bottom info paragraph with toggle
Let's add a custom style for our socialIcon in the 'index.css':
Let's finish up by styling our inputs and the bottom section where we will add an onClick handler so that we can switch from 'Login' to 'Signup' on clicking the 'Create Account' paragraph.
Let's put it all together and create our LoginForm component:
Similarly, we can go ahead and create our SignUp form component and customize it as per our need. For now, we will add an Username and an Avatar URL input field and change the background color for our SignUp Form:
To put it all together, we need to conditionally render the Login/Signup form based on the isLogin state as such:
And just like that, we have our Login page setup where the user can switch between Login & Signup with a single click!
Feel free to customize it as your own and add animations and your app logo!
Top comments (0)