In this tutorial, we’ll create a React application using a token-based authentication system. we’ll make a Post Request to an API that will return a user token, build a Simple login page using MUI that will fetch the token, and check for authentication without rerouting a user. If a user is not authenticated, we’ll provide an opportunity for them to log in and then allow them to continue without navigating to a dedicated login page. This tutorial will focus on designing a Simple Login Page using MUI 5.

Pre Requisite

You must have an active React Js App running

Step 01:

The first step is to install Material UI as we’ll be using material UI for designing our login form. Copy the below npm command to install MUI or visit the MUI official website here.

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

If you want to use MUI Icons run the command below OR just skip this part.

npm install @mui/icons-material

After the successful installation of MUI now it’s time to start designing our login form using MUI

  • Open your project directory
  • inside the Src folder let’s create a new Folder Components
  • Inside the Components folder let’s create a new Component called Login.js
  • Inside the Login component let’s write some code.

Source Code

import {
	Container,
	Button,
	Grid,
	Paper,
	TextField,
	IconButton,
	InputAdornment,
} from "@mui/material";
import VisibilityIcon from "@mui/icons-material/Visibility";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import React, { useState } from "react";

const Login = () => {

const [values, setValues] = useState({
	email: "",
	pass: "",
	showPass: false,
});

const handlePassVisibilty = () => {
	setValues({
		...values,
		showPass: !values.showPass,
	});
};

	return (
		<div>
<Container maxWidth="sm">
<Grid
	container
	spacing={2}
	direction="column"
	justifyContent="center"
	style={{ minHeight: "100vh" }}
>
<Paper elelvation={2} sx={{ padding: 5 }}>
<form>
<Grid container direction="column" spacing={2}>
	<Grid item>
		<TextField
			type="email"
			fullWidth
			label="Enter your email"
			placeholder="Email Address"
			variant="outlined"
			required
		/>
	</Grid>

	<Grid item>
	<TextField
		type={values.showPass ? "text" : "password"}
		fullWidth
		label="Password"
		placeholder="Password"
		variant="outlined"
		required
		InputProps={{
			endAdornment: (
				<InputAdornment position="end">
					<IconButton
						onClick={handlePassVisibilty}
						aria-label="toggle password"
						edge="end"
					>
						{values.showPass ? <VisibilityOffIcon /> : <VisibilityIcon />}
					</IconButton>
				</InputAdornment>
			),
		}}
	/>
	</Grid>

	<Grid item>
	<Button type="submit" fullWidth variant="contained">
		Sign In
	</Button>
	</Grid>
</Grid>
</form>
</Paper>
</Grid>
</Container>
		</div>
	);
};

export default Login;

Explanation

  • First, we’re importing all the components from MUI that we need to design the login form
  • Secondly, we’ve created React hook values that are storing our email, pass, and showPass
  • then we have created a function handlePassVisibility and we are calling this function on Click from our Password input field Icon