Back ArrowExplore all kits

Login page with either username or email using react

share link

by vsasikalabe dot icon Updated: Feb 17, 2023

technology logo
technology logo

Solution Kit Solution Kit  

Most web applications are a combination of public and private pages. Public pages are processable to anyone, while a private page needs a user login. You can use authentication to manage which users have to use which pages. You can sign in to email accounts has its benefits. Your ID is always unique and easy to remember, making it very simple for a service to contact you when you forget your password. But in some situations, Passwords provide security to personal information.  


The stronger your password, it will be the more protected. There are two things your React application will need to do to sign on a user: Get access from a server. Send access to your backend server. Emails are good login credentials. When users need to remember their password (but rarely forget their email address), you can send them a new one. To verify email addresses, send a confirmation request to an entered email address. 

Our login page has two input fields and a button (i.e., 1. email address and 2. password). We can control the values of these two fields using React State Hook. We have to check whether the email and the password entered are correct when the user clicks the button. We use a regular expression that checks the format of the email.  

Our overall process looks like this: 

  • The front end sends the login details in a request to the back end. 
  • The trustworthy code at the back end checks the credentials. 
  • The back end sends the secured data to the front end if the information is correct. 


Here is an example of how to login the page with either username or email using Reactjs: 

Preview of the output that you will get on running this code from your IDE

Code:

In this solution we use the React library.

Login page with either username or email using react

JavaScriptdotLines of Code : 58dotLicense : Strong Copyleft (CC BY-SA 4.0)

Dependent Libraries : 

import { useState } from "react";

const Login = () => {
  const [UnameOrEmail, setUnameOrEmail] = useState("");
  const [password, setpassword] = useState("");

  const user = {
    email: "test@test.com",
    username: "test123",
    password: "123456"
  };
  const handlesubmit = (e) => {
    e.preventDefault();

    if (UnameOrEmail === user.email || UnameOrEmail === user.username) {
      if (password === user.password) {
        console.log("User Loged In");
      } else {
        console.log("wrong password");
      }
    } else {
      console.log("please check you username or Email");
    }
  };
  return (
    <div>
      <form onSubmit={handlesubmit}>
        <div className="form-group">
          <label htmlFor="Email or UserName">Email or username</label>
          <input
            type="text"
            placeholder="email or username"
            required
            value={UnameOrEmail}
            onChange={(e) => setUnameOrEmail(e.target.value)}
            className="Input"
          />
        </div>
        <div className="form-group">
          <label htmlFor="Password">Password</label>
          <input
            type="Password"
            placeholder="Password"
            required
            value={password}
            onChange={(e) => setpassword(e.target.value)}
            className="Input"
          />
        </div>
        <button type="submit">Log in</button>
      </form>
    </div>
  );
};
export default Login;

Instructions

Follow the steps carefully to get the output easily.

  1. Install the Node.js and React on your IDE(preferable Visual Studio Code).
  2. Create React Application using npx create-react-app foldername.
  3. cd foldername.
  4. Open the folder in IDE.
  5. Copy the code using "copy" button above and paste it in App.js file(remove the earlier code from App.js).
  6. Open the terminal from IDE.
  7. npm start to run the file.


I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.


I found this code snippet by searching for 'Login page with either username or email using react' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in VS Code 1.73.1 version.
  2. The solution is tested on Nodejs 16.14.2 version.
  3. react 18.2.0 version


Using this solution, we are able to do login page with either username or email using react with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to do login page with either username or email using react.

Dependent Libraries

create-react-appby facebook

JavaScript doticonstar image 100082 doticonVersion:v5.0.1doticon
License: Permissive (MIT)

Set up a modern web app by running one command.

Support
    Quality
      Security
        License
          Reuse

            create-react-appby facebook

            JavaScript doticon star image 100082 doticonVersion:v5.0.1doticon License: Permissive (MIT)

            Set up a modern web app by running one command.
            Support
              Quality
                Security
                  License
                    Reuse

                      You can search for any dependent library on kandi like 'react'.

                      Support

                      1. For any support on kandi solution kits, please use the chat
                      2. For further learning resources, visit the Open Weaver Community learning page.

                      See similar Kits and Libraries

                      Open Weaver – Develop Applications Faster with Open Source

                      kandi

                      Community and Support

                      Company

                      Follow

                      • © 2023 Open Weaver Inc.