Next.js and Material UI: Building a Login Page
mui|

Ayush

Arya

|

Feb 13, 2024

React-Next JS and Material-UI Harmony: Designing a Secure and Stylish Sign-In Experience


Unlock the power of Next.js and Material-UI in a step-by-step guide. Elevate your sign-in experience with seamless design, web security, and form validation—creating a stylish, secure, and user-friendly authentication process.

Also Read : Crafting an Interactive Contact Form with Material-UI in React.

A Glimpse into the Code

Let's dissect the key elements of the Sign-In page code:

Form Validation with Formik and Yup

The useFormik hook from Formik and Yup are employed for form state management and validation.

Stylish UI with Material-UI

Material-UI components such as TextField, Button, Typography, and Alert are used to create an aesthetically pleasing and user-friendly sign-in form.

Handling Form Submission with Axios

The onSubmit function of the Formik hook is responsible for handling form submissions. In this case, Axios is utilized to make a POST request to a specified API endpoint (/api/Signin).

User Interface Split with Next.js Image Component

The Sign-In page is visually split into two sections, with the left side showcasing the service logo and a welcome message. The right side features the sign-in form.

Customizing the Sign-In Page

This Sign-In page is highly customizable for various projects. You can tweak the styling, add branding elements, or integrate it seamlessly into your existing Next.js application.

1// pages/index.js 2import Head from "next/head"; 3import NextLink from "next/link"; 4import { useRouter } from "next/router"; 5import { useFormik } from "formik"; 6import * as Yup from "yup"; 7import { 8 Alert, 9 Box, 10 Button, 11 Link, 12 Stack, 13 TextField, 14 Typography, 15 Grid, 16} from "@mui/material"; 17import axios from "axios"; 18import Image from "next/image"; 19 20const Index = () => { 21 const router = useRouter(); 22 23 const validationSchema = Yup.object({ 24 username: Yup.string().required("Username is required"), 25 password: Yup.string().required("Password is required"), 26 }); 27 28 const formik = useFormik({ 29 initialValues: { 30 username: "", 31 password: "", 32 }, 33 validationSchema: validationSchema, 34 onSubmit: async (values) => { 35 let payload = { 36 username: values.username, 37 password: values.password, 38 }; 39 try { 40 const response = await axios.post(`/api/Signin`, payload); 41 if (response.status === 200) { 42 router.push("/dashboard"); 43 formik.resetForm(); 44 } 45 } catch (error) { 46 console.log("Errors", error); 47 } 48 }, 49 }); 50 51 return ( 52 <> 53 <Head> 54 <title>Sign-in Page</title> 55 </Head> 56 <Box component="main"> 57 <Grid container> 58 <Grid 59 item 60 xs={12} 61 lg={6} 62 sx={{ 63 alignItems: "center", 64 background: "#000000", 65 color: "#ffffff", 66 display: "flex", 67 justifyContent: "center", 68 }} 69 > 70 <Box 71 sx={{ 72 p: 4, 73 }} 74 > 75 <Typography 76 align="center" 77 color="inherit" 78 sx={{ 79 fontSize: 30, 80 lineHeight: "32px", 81 mb: 2, 82 }} 83 variant="h1" 84 > 85 Welcome to{" "} 86 <Box component="a" sx={{ color: "#15B79E" }} target="_blank"> 87 service.com 88 </Box> 89 </Typography> 90 <Typography align="center" sx={{ mb: 3 }} variant="subtitle1"> 91 Create by <span style={{ color: "orange" }}>Techayu</span> 92 </Typography> 93 <Image alt="tech" src="/tech.png" width={300} height={300} /> 94 </Box> 95 </Grid> 96 <Grid item xs={12} lg={6}> 97 <Box 98 sx={{ 99 flex: "1 1 auto", 100 alignItems: "center", 101 display: "flex", 102 justifyContent: "center", 103 }} 104 > 105 <Box 106 sx={{ 107 maxWidth: 550, 108 px: 3, 109 py: 6, 110 width: "100%", 111 }} 112 > 113 <div> 114 <Stack spacing={1} sx={{ mb: 3 }}> 115 <Box 116 sx={{ 117 alignItems: "center", 118 py: 2, 119 }} 120 > 121 <Image 122 alt="logo" 123 src="/logo.png" 124 width={50} 125 height={50} 126 /> 127 </Box> 128 <Typography variant="h4">Login</Typography> 129 <Typography color="text.secondary" variant="body2"> 130 Don&apos;t have an account? &nbsp; 131 <Link 132 component={NextLink} 133 href="/" 134 underline="hover" 135 variant="subtitle2" 136 > 137 Register 138 </Link> 139 </Typography> 140 </Stack> 141 <form onSubmit={formik.handleSubmit}> 142 <Stack spacing={3}> 143 <TextField 144 fullWidth 145 label="Username" 146 name="username" 147 type="text" 148 value={formik.values.username} 149 onChange={formik.handleChange} 150 error={ 151 formik.touched.username && 152 Boolean(formik.errors.username) 153 } 154 helperText={ 155 formik.touched.username && formik.errors.username 156 } 157 /> 158 <TextField 159 fullWidth 160 label="Password" 161 name="password" 162 type="password" 163 value={formik.values.password} 164 onChange={formik.handleChange} 165 error={ 166 formik.touched.password && 167 Boolean(formik.errors.password) 168 } 169 helperText={ 170 formik.touched.password && formik.errors.password 171 } 172 /> 173 </Stack> 174 175 <Button 176 fullWidth 177 size="large" 178 sx={{ mt: 4 }} 179 type="submit" 180 variant="contained" 181 > 182 Continue 183 </Button> 184 185 <Alert color="primary" severity="info" sx={{ my: 4 }}> 186 <div> 187 You can use <b>techayu@demo.com</b> and password{" "} 188 <b>Password123!</b> 189 </div> 190 </Alert> 191 </form> 192 </div> 193 </Box> 194 </Box> 195 </Grid> 196 </Grid> 197 </Box> 198 </> 199 ); 200}; 201 202export default Index;

Conclusion

In conclusion, the Sign-In page serves as the first interaction point for users, making it a critical component in any web application. Understanding the intricacies of its implementation with Next.js, Material-UI, and Formik can significantly enhance user experience and security.


Popular Blog Categories


Contact Me

Phone

Discuss A Project Or Just Want To Say Hi?
My Inbox Is Open For All.

Mail : techayu001@gmail.com

Chatbot