Building a Responsive Login Page in React

Introduction
Setting Up the Project Environment
Key Components of the Login Page
- Overview of Login.js
- Understanding AuthLogin.js
Step-by-Step Implementation
- Setting Up Material-UI
- Validating User Input
- Rendering the Login Page
Output and Application Behavior
Conclusion

Introduction

A login page serves as the gateway to an application, ensuring secure and user-friendly access.
In this article, we’ll explore how to build a responsive login page in React, leveraging Material-UI for sleek design and functionality.

Why React for Login Pages?

React simplifies state management and component-based UI development.
Libraries like Material-UI offer pre-designed components for rapid development.

Advantages of Material-UI:

Feature	Material-UI	Other Libraries
Pre-designed UI	Yes	Varies
Customizability	High	Moderate
React Integration	Seamless	Dependent on library

Setting Up the Project Environment

To follow along, ensure you have:

Node.js installed on your system.
A React project initialized using create-react-app.
Material-UI library installed using:

Java

npm install @mui/material @emotion/react @emotion/styled

1

npm install @mui/material @emotion/react @emotion/styled

Key Components of the Login Page

Overview of Login.js

The Login.js file acts as the wrapper for our login functionality, combining layout and authentication form components.


import { Grid, Stack } from '@mui/material';
import AuthLogin from './auth-forms/AuthLogin';
import AuthWrapper from './AuthWrapper';

const Login = () =&gt; (
  
    
      
        
          
        
      
    
  
);

export default Login;

import { Grid, Stack } from '@mui/material';

import AuthLogin from './auth-forms/AuthLogin';

import AuthWrapper from './AuthWrapper';

const Login = () => (

);

export default Login;

Understanding AuthLogin.js

The AuthLogin.js file manages form states, input validation, and submission handling.


import React, { useState } from 'react';
import { Button, TextField, Container } from '@mui/material';

const AuthLogin = () =&gt; {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const validateEmail = () =&gt; {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

  const handleSubmit = (event) =&gt; {
    event.preventDefault();
    if (validateEmail() &amp;&amp; password.length &gt;= 6) {
      alert('Login Successful!');
    } else {
      alert('Invalid credentials!');
    }
  };

  return (
    
      
         setEmail(e.target.value)}
          fullWidth
          required
        /&gt;
         setPassword(e.target.value)}
          fullWidth
          required
        /&gt;
        <Button type="submit">
          Login
        </Button>
      
    
  );
};

export default AuthLogin;

import React, { useState } from 'react';

import { Button, TextField, Container } from '@mui/material';

const AuthLogin = () => {

const [email, setEmail] = useState('');

const [password, setPassword] = useState('');

const validateEmail = () => {

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

return emailRegex.test(email);

};

const handleSubmit = (event) => {

event.preventDefault();

if (validateEmail() && password.length >= 6) {

alert('Login Successful!');

} else {

alert('Invalid credentials!');

}

};

return (

setEmail(e.target.value)}

fullWidth

required

setPassword(e.target.value)}

fullWidth

required

</Button>

);

};

export default AuthLogin;

Step-by-Step Implementation

Setting Up Material-UI

Material-UI’s TextField and Button components simplify form creation:



<Button type="submit">Login</Button>

<Button type="submit">Login</Button>

Validating User Input

Using regex for email validation:


const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

return emailRegex.test(email);

Rendering the Login Page

Combining Login.js and AuthLogin.js provides a fully functional login screen:

Output and Application Behavior

When the login page is rendered:

Input Validation: Users are prompted for valid credentials.
Responsive Design: Adapts to various screen sizes.
Feedback: Displays alerts for successful or failed login attempts.

Conclusion

By leveraging React and Material-UI, creating a responsive and user-friendly login page becomes straightforward.
The modularity of components like AuthLogin.js ensures maintainability and reusability.