User Login and Register Form in React JS

In our previous React tutorial, we have explained how to create React Calendar with Events. In this tutorial, we will explain how to how to make Login and Registration Form in React JS.

While developing user section, we need to create user regiter and login form to handle user login and registration functionality. We can easily create login and register form in react js with react and its useState hook.

So let’s proceed with tutorial to create login and registration form in React JS.

Prerequisites

• Need Node.js development environment installed.
• This tutorial is tested with Node v20.5.1 and NPM 8.19.1 Version.
• Knowledge to setup React App environment.
• Basic Knowledge of HTML, CSS, Javascript.

Create React Application

First we will create React application using the create-react-app command. Here we will create react-login-register to create login and register form.

npx create-react-app react-login-register

Now we will go inside project folder.

cd react-login-register

Install Required Packages

There are no other react modules except Bootstrap framework that we will use for handling HTML design. We will install this module using below command:

npm install bootstrap --save

##### or #####

yarn add bootstrap

Building Login Form Page

After application setup, we will create create a login page. For this, we will create a component src/Login.jsx file. We will design login form with input and button using Bootstrap. We will also handle login form submit functionality by creating function handleSubmit() and calling on form submit event.

Login.jsx:

import React, { useState } from "react";

export const Login = (props) => {
    const [email, setEmail] = useState('');
    const [pass, setPass] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(email);
    }

    return (
        <div className="row">		
			<div className="col-sm-4">
				<h2>Login</h2>
				<form onSubmit={handleSubmit}>
					<div className="form-group">
						<label htmlFor="email">email</label>
						<input value={email} className="form-control" onChange={(e) => setEmail(e.target.value)}type="email" placeholder="youremail@gmail.com" id="email" name="email" />
					</div>
					<br />	
					<div className="form-group">
						<label htmlFor="password">password</label>
						<input value={pass} className="form-control" onChange={(e) => setPass(e.target.value)} type="password" placeholder="********" id="password" name="password" />
					</div>	
					<br />					
					<button type="submit" className="btn btn-primary">Log In</button>				
				</form>	
				<br />			
				<button className="btn btn-primary" onClick={() => props.onFormSwitch('register')}>Don't have an account? Register here.</button>
			</div>
		</div>	
    )
}

Building Register Form Page

We will create register page by creating component src/register.jsx file. We will design register form with Bootstrap HTML. We will also handle register form submit by creating handleSubmit() function and calling on form submit.

Register.jsx:

import React, { useState } from "react";

export const Register = (props) => {
    const [email, setEmail] = useState('');
    const [pass, setPass] = useState('');
    const [name, setName] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(email);
    }

    return (
		<div className="row">
			<div className="col-sm-4">
			<h2>User Register<h2>
			<form className="register-form" onSubmit={handleSubmit}>
				<div className="form-group">
					<label htmlFor="name">Full name<label>
					<input className="form-control" value={name} name="name" onChange={(e) => setName(e.target.value)} id="name" placeholder="full Name" />
				<div>
				<div className="form-group">
					<label htmlFor="email">email<label>
					<input className="form-control" value={email} onChange={(e) => setEmail(e.target.value)}type="email" placeholder="youremail@gmail.com" id="email" name="email" />
				<div>
				<div className="form-group">
					<label htmlFor="password">password<label>
					<input className="form-control" value={pass} onChange={(e) => setPass(e.target.value)} type="password" placeholder="********" id="password" name="password" />
					<br />		
					<button type="submit" className="btn btn-primary">Register<button>
				<div>				
			<form>
			<br />		
			<button className="btn btn-primary" onClick={() => props.onFormSwitch('login')}>Already have an account? Login here.<button>
			<div>
		<div>
    )
}

Using Login and Register Page in App

After creating component for login and register page, we will use these into src/App.js to show pages. We will import Login and Register components. The use useState hook to get page state and show the pages. We will also handle form page toggle to login or register page.

App.js

import React, { useState } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import { Login } from "./Login";
import { Register } from "./Register";

function App() {
  const [currentForm, setCurrentForm] = useState('login');

  const toggleForm = (formName) => {
    setCurrentForm(formName);
  }

  return (
    <div className="container">
	<br />	<br />	
      {
        currentForm === "login" ? <Login onFormSwitch={toggleForm} /> : <Register onFormSwitch={toggleForm} />
      }
    </div>
  );
}

export default App;

Conclusion

In this tutorial, we have explained how to create login and register form in React. We have also handled form submit events to get submitted form values. You can enhance this to make complete user section to handle dynamic login and register functionality with React JS.