Make a React-Auth form using Bootstrap in few simple steps!

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. ```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 :

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 🚀

Blog

Make a React-Auth form using Bootstrap in few simple steps!

Ansh Narula

Join Our Newsletter. No Spam, Only the good stuff.

Related