Login & Registration Form Using React Js | SignIn & SignUp Form In React Js

U-GINE MEDIA September 20, 2025


Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials. 

Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.

You can also visit my GitHub where I upload all the code I have.

In this tutorial topic "Login & Registration Form Using React JS | Sigin & Signup Form In React JS", we will learn how to create it following these simple easy steps.

Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments. 

Get Source Code.

If interested in watching the video before running the code below, you can click the play button to get started.



Setting Up the Project

Before building the "Login & Registration Form Using React JS" with React.js and CSS, ensure Node.js is installed on your computer. If not, download and install it from the official Node.js website.

Create a Project Folder:

  1. Make a new folder, for instance, “react-form”.
  2. Open this folder in your VS Code editor.

Initialize the Project:

Open your terminal by pressing Ctrl + J and then use Vite to create a new React app with this command:

  npm create vite@latest ./ -- --template react


Install necessary dependencies and start the development server:

npm install
npm run dev

If your project is running in your browser, congratulations! You’ve successfully set up your app. Now, let’s move on to modifying folders and files.

Modify folder and CSS Files:

  1. Remove the default assets folder and App.css file.
  2. Replace the content of index.css with the provided CSS code.


@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@300;400;500&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: url("./assets/bg-2.jpg") no-repeat center center/cover;
}

.auth-page {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-container {
  background: rgba(255, 255, 255, 0.01);
  border-radius: 0.5rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 40px;
  width: 500px;
  max-width: 90%;
  text-align: center;
  z-index: 10;
  color: #fff;
  animation: fadeInDown 0.7s ease-out;
}

.auth-container h2 {
  font-size: 2em;
  margin-bottom: 30px;
  color: #fff;
  font-weight: 500;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.input-group {
  position: relative;
  margin-bottom: 35px;
}

.input-group ion-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2em;
}

.input-group input {
  width: 100%;
  padding: 12px 15px 12px 30px;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  font-size: 1em;
  outline: none;
}

.input-group label {
  position: absolute;
  top: 10px;
  left: 30px;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  transition: all 0.3s ease;
}

.input-group input:focus + label,
.input-group input:valid + label {
  top: -10px;
  font-size: 0.8em;
  color: #ffab2d;
}

.options-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  font-size: 0.9em;
}

.options-group label {
  cursor: pointer;
}

.options-group a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.auth-button {
  width: 100%;
  padding: 15px;
  background: #ffab2d;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.auth-button:hover {
  background: #957546;
}

.toggle-link {
  margin-top: 30px;
  font-size: 0.9em;
}

.toggle-link span {
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

/* --- Animation --- */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  animation: infinite ease-in-out;
}

/* Fade Down Animation */
@keyframes translateY {
  0% {
    transform: translateY(0px);
  }50% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0px);
  }
}

.shape-1 {
  width: 200px;
  height: 200px;
  top: 30%;
  left: 30%;
  z-index: 1;
  animation-name: translateY;
  animation-duration: 10s;
}

.shape-2 {
  width: 100px;
  height: 100px;
  top: 15%;
  right: 32%;
  z-index: 1; 
  animation-name: translateY;
  animation-duration: 12s;
  animation-delay: 3s;
}

.shape-3 {
  width: 50px;
  height: 50px;
  top: 10%;
  right: 50%;
  border-radius: 10px;
  z-index: 11; 
  animation-name: translateY;
  animation-duration: 10s;
  animation-delay: 1s;
}

@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateX(150px) rotate(180deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}


.shape-4 {
  width: 80px;
  height: 80px;
  bottom: 20%;
  right: 35%;
  z-index: 11; 
  animation-name: float;
  animation-duration: 14s;
  animation-delay: 3s;
}


Creating additional file

Within the src directory of your project, create the file below:
  1. AuthPage.jsx

Adding the Codes

Add the respective code to each newly created file to define the layout.

In src/AuthPage.jsx, add the code.

import { useState } from "react";

// --- Login Form Component ---
const LoginForm = ({ onToggle }) => {
  return (
    <div className="auth-container">
      <h2>Welcome Back! 😊</h2>
      <form>
        <div className="input-group">
          <ion-icon name="person-outline"></ion-icon>
          <input type="text" id="username" autoComplete="off" required />
          <label htmlFor="username">Username</label>
        </div>
        <div className="input-group">
          <ion-icon name="lock-closed-outline"></ion-icon>
          <input type="password" id="password" required />
          <label htmlFor="password">Password</label>
        </div>
        <div className="options-group">
          <label>
            <input type="checkbox" /> Remember me
          </label>
          <a href="#">Forgot Password?</a>
        </div>
        <button type="submit" className="auth-button">
          Login
        </button>
        <div className="toggle-link">
          Don't have an account? <span onClick={onToggle}>Register</span>
        </div>
      </form>
    </div>
  );
};

// --- Registration Form Component ---
const RegistrationForm = ({ onToggle }) => {
  return (
    <div className="auth-container">
      <h2>Register Today!</h2>
      <form>
        <div className="input-group">
          <ion-icon name="person-outline"></ion-icon>
          <input type="text" id="username" autoComplete="off" required />
          <label htmlFor="username">Username</label>
        </div>
        <div className="input-group">
          <ion-icon name="mail-outline"></ion-icon>
          <input type="email" id="Email" autoComplete="new-email" required />
          <label htmlFor="email">Email</label>
        </div>
        <div className="input-group">
          <ion-icon name="lock-closed-outline"></ion-icon>
          <input type="password" id="password" required />
          <label htmlFor="password">Password</label>
        </div>
        <button type="submit" className="auth-button">
          Register
        </button>
        <div className="toggle-link">
          Already have an account? <span onClick={onToggle}>Login</span>
        </div>
      </form>
    </div>
  );
};

// --- Main Auth Page Component ---
function AuthPage() {
  const [isLoginView, setIsLoginView] = useState(true);

  const toggleView = () => {
    setIsLoginView(!isLoginView);
  };

  return (
    <div className="auth-page">
      <div className="shape shape-1"></div>
      <div className="shape shape-2"></div>
      <div className="shape shape-3"></div>
      <div className="shape shape-4"></div>

      {isLoginView ? (
        <LoginForm onToggle={toggleView} />
      ) : (
        <RegistrationForm onToggle={toggleView} />
      )}
    </div>
  );
}

export default AuthPage;


In App.jsx, add the code.


import React from "react";
import AuthPage from "./AuthPage";

const App = () => {
  return <AuthPage />;
};

export default App;

Conclusion and Final word

Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can create "Login & Registration Form Using React JS". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS, JavaScript React Js & Tailwind Projects, its gonna be fun, trust me 😃.

Keep experimenting! You can add other cool features. Try improving error handling and adding other cool updates to make your chatbot even better.

If you run into any issues, you can download the source code for this AI chatbot project by clicking the “Download” button. Don’t forget to check the README.md file for setup and usage instructions. If you need help, you’ll also find support information there.

Happy Coding Journey 🚀








U-GINE MEDIA

Posted by U-GINE MEDIA

Post a Comment

0 Comments

We are happy to hear from you.

Close Menu