Make a React-Auth form using Bootstrap in few simple steps!
Tags: javascript, react, bootstrap, webdev
Published: 2022-02-16 17:11:04

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 : 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67jujirbwpbtbyoz2dox.jpg) 

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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jho8w74so4qm5qj9o9n.jpg)
 
```
npm start
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmili0km9ofq77piym44.png)

**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)
```javascript
import React from 'react'

const Auth = () => {
  return (
    <div>Auth</div>
  )
}

export default Auth
```

Add this component to App.js
```javascript
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.
```javascript
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.

```javascript
import { Card, Col, Row, Form } from "react-bootstrap";
```
Now add Row, Col and Card in following way : 

```javascript
 <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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2csx2onaj8g8t2mwj888.png)
(*p.s. I added `background-color: #7c8baa;` and `min-height: 100vh;` in App.css to App*)

* Now let us add formData state.
```javascript
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.
```javascript
<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 : 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1nytr13fn8elde3e4vl.png)

* 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.

```javascript
const [isLogin, setIsLogin] = useState(true);
```
We change username and confirm password fields as follows : 

```javascript
 {!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
```javascript
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.

```javascript
 const handleToggle = () => {
    setIsLogin(prev => !prev)
    setFormData({ email: "", name: "", password: "", password2: "" });
 }
```
Buttons : 
```javascript
<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 :** 

```javascript
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**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2n5q8df3nf2ia4qiagmm.gif)
 
Thank you for reading this article and happy coding 🚀