In this post, we are going to make an authentication form in react that can toggle between login and register tabs.
This is what we are going to build today :
We will not use any libraries or external tools for creating form and make authentication forms really easy.
Step 1 : Create a react project and run it by using following commands.
npx create-react-app auth
Then open up the newly created project folder in your favorite editor, it should look like this.
npm start
Step 2 : Now create a file and that component to App.js file.
Your New File should look like this. (I named this file Auth.js)
import React from 'react'
const Auth = () => {
return (
<div>Auth</div>
)
}
export default Auth
Add this component to App.js
import './App.css';
import Auth from './Auth';
function App() {
return (
<div className="App">
<Auth />
</div>
);
}
export default App;
Step 3 : Add React-Bootstrap to your project using following command
npm install react-bootstrap bootstrap@5.1.3
and now include following line in your src/index.js or App.js file.
import 'bootstrap/dist/css/bootstrap.min.css';
Step 4 : Create form.
Let us now begin creating form.
- Import following to your Auth.js file. We are going to wrap our form inside a card and to center the card we are going to put the card inside row and column using grid system.
import { Card, Col, Row, Form } from "react-bootstrap";
Now add Row, Col and Card in following way :
<Row className="justify-content-center">
<Col xs={10} md={4}>
<Card className="my-5 px-5 py-3">
<h1 className="m-3 text-center">Sign up</h1>
</Card>
</Col>
</Row>
Now you can see this in you browser.
(p.s. I added background-color: #7c8baa; and min-height: 100vh; in App.css to App)
- Now let us add formData state.
const [formData, setFormData] = useState({
email: "",
name: "",
password: "",
password2 : ""
});
const { email, name, password, password2 } = formData;
(We are destructuring each field so that we can use these inside our input fields)
- Now, we can create a basic form that show all the fields.
<Form.Group controlId="email" className="my-2">
<Form.Label>Username</Form.Label>
<Form.Control
type="text"
placeholder="enter name"
name="name"
value={name}
/>
</Form.Group>
<Form.Group className="my-2">
<Form.Label>Email Address</Form.Label>
<Form.Control
type="email"
placeholder="enter email"
value={email}
name="email"
/>
</Form.Group>
<Form.Group className="my-2">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="enter password"
value={password}
name="password"
/>
</Form.Group>
<Form.Group className="my-2">
<Form.Label>Confirm Password</Form.Label>
<Form.Control
type="password"
placeholder="enter password again"
value={password2}
name="password"
/>
</Form.Group>
This should display something like this :
- Add toggle logic
Since in login form, we need to display only email and password fields and for register, we are displaying all the fields, so we can use following logic to dynamically toggle between login and register form.
const [isLogin, setIsLogin] = useState(true);
We change username and confirm password fields as follows :
{!isLogin && (
<Form.Group className="my-2">
<Form.Label>Username</Form.Label>
<Form.Control
type="text"
placeholder="enter name"
name="name"
value={name}
/>
</Form.Group>
)}
<Form.Group className="my-2">
<Form.Label>Email Address</Form.Label>
<Form.Control
type="email"
placeholder="enter email"
value={email}
name="email"
/>
</Form.Group>
<Form.Group className="my-2">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="enter password"
value={password}
name="password"
/>
</Form.Group>
{!isLogin && (
<Form.Group className="my-2">
<Form.Label>Confirm Password</Form.Label>
<Form.Control
type="password"
placeholder="enter password again"
value={password2}
name="password2"
/>
</Form.Group>
)}
Also, we need to add onChange function in each input fields. We define a function named handleChange and trigger this function whenever input field is changed
const handleChange = (e) => {
setFormData({...formData, [e.target.name] : e.target.value})
}
- Now to toggle between login and register tabs, we make a function and name it handleToggle and this function is called whenever we click on toggle button. Also, when we toggle, we want clear the input fields.
const handleToggle = () => {
setIsLogin(prev => !prev)
setFormData({ email: "", name: "", password: "", password2: "" });
}
Buttons :
<div className="mt-3 text-center">
<p>
{isLogin ? "Don't" : "Already"} have an account ?{" "}
<Button size="sm" variant="outline-primary" onClick={handleToggle}>
Sign {isLogin ? "Up" : "In"}
</Button>
</p>
<Button className="btn btn-block">Sign {isLogin ? "In" : "Up"}</Button>
</div>
Final Code :
import React, { useState } from "react";
import { Button, Card, Col, Form, Row } from "react-bootstrap";
const Auth = () => {
const [formData, setFormData] = useState({
email: "",
name: "",
password: "",
password2: "",
});
const { email, name, password, password2 } = formData;
const [isLogin, setIsLogin] = useState(true);
const handleToggle = () => {
setIsLogin((prev) => !prev);
};
return (
<Row className="justify-content-center">
<Col xs={10} md={4}>
<Card className="my-5 px-5 py-3">
<h1 className="m-3 text-center">Sign {isLogin ? "In" : "Up"}</h1>
{!isLogin && (
<Form.Group className="my-2">
<Form.Label>Username</Form.Label>
<Form.Control
type="text"
placeholder="enter name"
name="name"
value={name}
onChange = {handleChange}
/>
</Form.Group>
)}
<Form.Group className="my-2">
<Form.Label>Email Address</Form.Label>
<Form.Control
type="email"
placeholder="enter email"
value={email}
name="email"
onChange = {handleChange}
/>
</Form.Group>
<Form.Group className="my-2">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="enter password"
value={password}
name="password"
onChange = {handleChange}
/>
</Form.Group>
{!isLogin && (
<Form.Group className="my-2">
<Form.Label>Confirm Password</Form.Label>
<Form.Control
type="password"
placeholder="enter password again"
value={password2}
name="password2"
onChange = {handleChange}
/>
</Form.Group>
)}
<div className="mt-3 text-center">
<p>
{isLogin ? "Don't" : "Already"} have an account ? {" "}
<Button
size="sm"
variant="outline-primary"
onClick={handleToggle}
>
Sign {isLogin ? "Up" : "In"}
</Button>
</p>
<Button className="btn btn-block">
Sign {isLogin ? "In" : "Up"}
</Button>
</div>
</Card>
</Col>
</Row>
);
};
export default Auth;
Final Result
Thank you for reading this article and happy coding 🚀
Top comments (0)