DEV Community

Cover image for Make a React-Auth form using Bootstrap in few simple steps!
Ansh Narula
Ansh Narula

Posted on

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 :
Image description

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


Enter fullscreen mode Exit fullscreen mode

Then open up the newly created project folder in your favorite editor, it should look like this.
Image description



npm start


Enter fullscreen mode Exit fullscreen mode

Image description

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


Enter fullscreen mode Exit fullscreen mode

Add this component to App.js



import './App.css';
import Auth from './Auth';

function App() {
  return (
    <div className="App">
      <Auth />
   </div>
  );
}

export default App;


Enter fullscreen mode Exit fullscreen mode

Step 3 : Add React-Bootstrap to your project using following command



npm install react-bootstrap bootstrap@5.1.3


Enter fullscreen mode Exit fullscreen mode

and now include following line in your src/index.js or App.js file.



import 'bootstrap/dist/css/bootstrap.min.css';


Enter fullscreen mode Exit fullscreen mode

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";


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

Now you can see this in you browser.
Image description
(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>


Enter fullscreen mode Exit fullscreen mode

This should display something like this :
Image description

  • 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);


Enter fullscreen mode Exit fullscreen mode

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>
)}


Enter fullscreen mode Exit fullscreen mode

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})
}


Enter fullscreen mode Exit fullscreen mode
  • 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: "" });
 }


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

Final Result
Image description

Thank you for reading this article and happy coding 🚀

Top comments (0)