{ "componentChunkName": "component---src-pages-blog-markdown-remark-fields-slug-js", "path": "/blog/building-a-login-screen-with-react-and-bootstrap", "result": {"data":{"markdownRemark":{"html":"

Table of Contents

\n\n

Introduction

\n

In this comprehensive guide, we’ll walk you through the process of building a login page using React and Bootstrap. Whether you’re a seasoned developer or just starting out, this tutorial will help you create a professional-looking login component that’s both responsive and user-friendly.

\n

Prerequisites

\n

Before we dive in, make sure you have the following:

\n\n

Step 1: Setting Up the Project

\n

Let’s start by creating a new React project and setting up Bootstrap.

\n

1. Open your terminal and run the following command to create a new React project:

\n\n \n \n \n \n
npx create-react-app react-login-page\ncd react-login-page
\n

2. Install Bootstrap and its dependencies:

\n\n \n \n \n \n
npm install bootstrap react-bootstrap
\n

3. Open src/index.js and import Bootstrap CSS:

\n\n \n \n \n \n
import 'bootstrap/dist/css/bootstrap.min.css';
\n

4. Create a new file src/components/Login.js for our login component.

\n

Step 2: Creating the Login Component

\n

Now we’ll dive into the heart of our login page – the Login component. This React component will contain all the necessary elements for user authentication. We’ll use React’s useState hook to manage the form’s state, allowing us to capture and control user input efficiently. The component will include input fields for email and password, along with a submit button, all styled using Bootstrap classes for a clean, professional look.

\n

In src/components/Login.js, add the following code:

\n {\n event.preventDefault();\n console.log('Login attempted with:', { email, password });\n // Here you would typically send a request to your server\n };\n\n return (\n \n \n \n

Login

\n
\n \n Email address\n setEmail(e.target.value)}\n />\n \n\n \n Password\n setPassword(e.target.value)}\n />\n \n\n \n
\n \n \n \n );\n}\n\nexport default Login;`, `98972053566463790000`)\"\n >\n \n \n \n \n
// Login.js:\nimport React, { useState } from 'react';\nimport { Form, Button, Container, Row, Col } from 'react-bootstrap';\n\nfunction Login() {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    console.log('Login attempted with:', { email, password });\n    // Here you would typically send a request to your server\n  };\n\n  return (\n    <Container>\n      <Row className=\"justify-content-md-center mt-5\">\n        <Col xs={12} md={6}>\n          <h2 className=\"text-center mb-4\">Login</h2>\n          <Form onSubmit={handleSubmit}>\n            <Form.Group className=\"mb-3\" controlId=\"formBasicEmail\">\n              <Form.Label>Email address</Form.Label>\n              <Form.Control\n                type=\"email\"\n                placeholder=\"Enter email\"\n                value={email}\n                onChange={(e) => setEmail(e.target.value)}\n              />\n            </Form.Group>\n\n            <Form.Group className=\"mb-3\" controlId=\"formBasicPassword\">\n              <Form.Label>Password</Form.Label>\n              <Form.Control\n                type=\"password\"\n                placeholder=\"Password\"\n                value={password}\n                onChange={(e) => setPassword(e.target.value)}\n              />\n            </Form.Group>\n\n            <Button variant=\"primary\" type=\"submit\" className=\"w-100\">\n              Login\n            </Button>\n          </Form>\n        </Col>\n      </Row>\n    </Container>\n  );\n}\n\nexport default Login;
\n

This creates a basic login form with email and password fields using React Bootstrap components.

\n

\n \n \n

\n

Login

\n
\n {/* ... */}\n\n \n
\n
\n \n );\n}\n\nexport default Login;`, `94712039324010090000`)\"\n >\n \n \n \n \n
import React, { useState } from 'react';\nimport { Form, Button, Container } from 'react-bootstrap';\nimport './Login.css';\n\nfunction Login() {\n  // ... (previous state and handleSubmit code)\n\n  return (\n    <div className=\"login-wrapper\">\n      <div className=\"login-form-container\">\n        <h2 className=\"login-title\">Login</h2>\n        <Form onSubmit={handleSubmit}>\n          {/* ... */}\n\n          <Button variant=\"primary\" type=\"submit\" className=\"login-button\">\n            Login\n          </Button>\n        </Form>\n      </div>\n    </div>\n  );\n}\n\nexport default Login;
\n

\n \n \n \n \n

\n

Step 4: Handling User Input

\n

We’ve already set up state variables for email and password, and we’re updating them on input change. Let’s add some basic validation to improve user experience.\nUpdate your Login.js with the following changes:

\n {\n event.preventDefault();\n setError('');\n if (!email || !password) {\n setError('Please enter both email and password.');\n return;\n }\n console.log('Login attempted with:', { email, password });\n // Here you would typically send a request to your server\n };\n\n\n return (\n
\n
\n

Login

\n {error && {error}}\n
\n {...}\n\n\n \n
\n
\n
\n\n\n );\n}\n\n\nexport default Login;\n`, `38204195057999260000`)\"\n >\n \n \n \n \n
import React, { useState } from 'react';\nimport { Form, Button, Container, Alert } from 'react-bootstrap';\nimport './Login.css';\n\n\nfunction Login() {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [error, setError] = useState('');\n\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    setError('');\n    if (!email || !password) {\n      setError('Please enter both email and password.');\n      return;\n    }\n    console.log('Login attempted with:', { email, password });\n    // Here you would typically send a request to your server\n  };\n\n\n  return (\n<div className=\"login-wrapper\">\n    <div className=\"login-form-container\">\n      <h2 className=\"login-title\">Login</h2>\n  {error && <Alert variant=\"danger\">{error}</Alert>}\n          <Form onSubmit={handleSubmit} className=\"login-form”>\n          {...}\n\n\n            <Button variant=\"primary\" type=\"submit\" className=\"login-button\">\n          Login\n        </Button>\n      </Form>\n      </div>\n      </div>\n\n\n  );\n}\n\n\nexport default Login;\n
\n

This adds basic validation for empty fields and a simple email format check.

\n

\n \n {\n const newErrors = {};\n if (!email) newErrors.email = 'Email is required';\n else if (!/\\S+@\\S+\\.\\S+/.test(email)) newErrors.email = 'Email is invalid';\n if (!password) newErrors.password = 'Password is required';\n else if (password.length < 6) newErrors.password = 'Password must be at least 6 characters';\n return newErrors;\n };\n\n\n const handleSubmit = (event) => {\n event.preventDefault();\n const formErrors = validateForm();\n if (Object.keys(formErrors).length > 0) {\n setErrors(formErrors);\n } else {\n setErrors({});\n console.log('Login attempted with:', { email, password });\n // Here you would typically send a request to your server\n }\n };\n\n\n return (\n

\n
\n

Login

\n
\n \n Email address\n setEmail(e.target.value)}\n isInvalid={!!errors.email}\n />\n \n {errors.email}\n \n \n\n\n \n Password\n setPassword(e.target.value)}\n isInvalid={!!errors.password}\n />\n \n {errors.password}\n \n \n\n\n \n
\n
\n
\n );\n}\n\n\nexport default Login;`, `3778703235704328000`)\"\n >\n \n \n \n \n
import React, { useState } from 'react';\nimport { Form, Button, Alert } from 'react-bootstrap';\nimport './Login.css';\n\n\nfunction Login() {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [errors, setErrors] = useState({});\n\n\n  const validateForm = () => {\n    const newErrors = {};\n    if (!email) newErrors.email = 'Email is required';\n    else if (!/\\S+@\\S+\\.\\S+/.test(email)) newErrors.email = 'Email is invalid';\n    if (!password) newErrors.password = 'Password is required';\n    else if (password.length < 6) newErrors.password = 'Password must be at least 6 characters';\n    return newErrors;\n  };\n\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    const formErrors = validateForm();\n    if (Object.keys(formErrors).length > 0) {\n      setErrors(formErrors);\n    } else {\n      setErrors({});\n      console.log('Login attempted with:', { email, password });\n      // Here you would typically send a request to your server\n    }\n  };\n\n\n  return (\n    <div className=\"login-wrapper\">\n      <div className=\"login-form-container\">\n        <h2 className=\"login-title\">Login</h2>\n        <Form onSubmit={handleSubmit} className=\"login-form\">\n          <Form.Group className=\"mb-3\" controlId=\"formBasicEmail\">\n            <Form.Label>Email address</Form.Label>\n            <Form.Control\n              type=\"email\"\n              placeholder=\"Enter email\"\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n              isInvalid={!!errors.email}\n            />\n            <Form.Control.Feedback type=\"invalid\">\n              {errors.email}\n            </Form.Control.Feedback>\n          </Form.Group>\n\n\n          <Form.Group className=\"mb-3\" controlId=\"formBasicPassword\">\n            <Form.Label>Password</Form.Label>\n            <Form.Control\n              type=\"password\"\n              placeholder=\"Password\"\n              value={password}\n              onChange={(e) => setPassword(e.target.value)}\n              isInvalid={!!errors.password}\n            />\n            <Form.Control.Feedback type=\"invalid\">\n              {errors.password}\n            </Form.Control.Feedback>\n          </Form.Group>\n\n\n          <Button variant=\"primary\" type=\"submit\" className=\"login-button\">\n            Login\n          </Button>\n        </Form>\n      </div>\n    </div>\n  );\n}\n\n\nexport default Login;
\n

\n \n {\n try {\n const response = await axios.post(\\`\\${API_URL}/users\\`, { email, password });\n return response.data;\n } catch (error) {\n throw error;\n }\n};\nUpdate src/components/Login.js:\n\n\nimport React, { useState } from 'react';\nimport { Form, Button, Container, Alert } from 'react-bootstrap';\nimport { login } from '../services/api';\nimport './Login.css';\n\n\nfunction Login() {\n // ... (previous state and validation code)\n\n\n const handleSubmit = async (event) => {\n event.preventDefault();\n const formErrors = validateForm();\n if (Object.keys(formErrors).length > 0) {\n setErrors(formErrors);\n } else {\n setErrors({});\n try {\n const userData = await login(email, password);\n console.log('Login successful:', userData);\n // Here you would typically store the user data and redirect\n } catch (error) {\n setErrors({ form: 'Login failed. Please try again.' });\n }\n }\n };\n\n\n // ... (rest of the component)\n}\n\n\nexport default Login;`, `31214000635683512000`)\"\n >\n \n \n \n \n

import axios from 'axios';\n\n\nconst API_URL = 'https://jsonplaceholder.typicode.com'; // Mock API\n\n\nexport const login = async (email, password) => {\n  try {\n    const response = await axios.post(`${API_URL}/users`, { email, password });\n    return response.data;\n  } catch (error) {\n    throw error;\n  }\n};\nUpdate src/components/Login.js:\n\n\nimport React, { useState } from 'react';\nimport { Form, Button, Container, Alert } from 'react-bootstrap';\nimport { login } from '../services/api';\nimport './Login.css';\n\n\nfunction Login() {\n  // ... (previous state and validation code)\n\n\n  const handleSubmit = async (event) => {\n    event.preventDefault();\n    const formErrors = validateForm();\n    if (Object.keys(formErrors).length > 0) {\n      setErrors(formErrors);\n    } else {\n      setErrors({});\n      try {\n        const userData = await login(email, password);\n        console.log('Login successful:', userData);\n        // Here you would typically store the user data and redirect\n      } catch (error) {\n        setErrors({ form: 'Login failed. Please try again.' });\n      }\n    }\n  };\n\n\n  // ... (rest of the component)\n}\n\n\nexport default Login;
\n

\n \n \n \n \n

\n

Step 7: Implementing Authentication

\n

In a real application, you’d want to manage authentication state across your app. Here’s a simple example using React Context:

\n

Create a new file src/context/AuthContext.js:

\n {\n const [user, setUser] = useState(null);\n\n\n const login = (userData) => {\n setUser(userData);\n localStorage.setItem('user', JSON.stringify(userData));\n };\n\n\n const logout = () => {\n setUser(null);\n localStorage.removeItem('user');\n };\n\n\n return (\n \n {children}\n \n );\n};\n\n\nexport const useAuth = () => useContext(AuthContext);`, `82848090786763900000`)\"\n >\n \n \n \n \n
import React, { createContext, useState, useContext } from 'react';\n\n\nconst AuthContext = createContext(null);\n\n\nexport const AuthProvider = ({ children }) => {\n  const [user, setUser] = useState(null);\n\n\n  const login = (userData) => {\n    setUser(userData);\n    localStorage.setItem('user', JSON.stringify(userData));\n  };\n\n\n  const logout = () => {\n    setUser(null);\n    localStorage.removeItem('user');\n  };\n\n\n  return (\n    <AuthContext.Provider value={{ user, login, logout }}>\n      {children}\n    </AuthContext.Provider>\n  );\n};\n\n\nexport const useAuth = () => useContext(AuthContext);
\n

Update src/App.js to use the AuthProvider:

\n\n
\n \n
\n \n );\n}\n\n\nexport default App;\nStep 8: Adding Navigation\nInstall React Router:\nnpm install react-router-dom\nCreate a new file src/components/Navigation.js:\nimport React from 'react';\nimport { Navbar, Nav, Container } from 'react-bootstrap';\nimport { Link } from 'react-router-dom';\nimport { useAuth } from '../context/AuthContext';\n\n\nfunction Navigation() {\n const { user, logout } = useAuth();\n\n\n return (\n \n \n My App\n \n \n \n \n \n \n \n );\n}\n\n\nexport default Navigation;`, `88301759676328350000`)\"\n >\n \n \n \n \n
Update src/App.js to use the AuthProvider:\n\n\nimport React from 'react';\nimport { AuthProvider } from './context/AuthContext';\nimport Login from './components/Login';\n\n\nfunction App() {\n  return (\n    <AuthProvider>\n      <div className=\"App\">\n        <Login />\n      </div>\n    </AuthProvider>\n  );\n}\n\n\nexport default App;\nStep 8: Adding Navigation\nInstall React Router:\nnpm install react-router-dom\nCreate a new file src/components/Navigation.js:\nimport React from 'react';\nimport { Navbar, Nav, Container } from 'react-bootstrap';\nimport { Link } from 'react-router-dom';\nimport { useAuth } from '../context/AuthContext';\n\n\nfunction Navigation() {\n  const { user, logout } = useAuth();\n\n\n  return (\n    <Navbar bg=\"light\" expand=\"lg\">\n      <Container>\n        <Navbar.Brand as={Link} to=\"/\">My App</Navbar.Brand>\n        <Navbar.Toggle aria-controls=\"basic-navbar-nav\" />\n        <Navbar.Collapse id=\"basic-navbar-nav\">\n          <Nav className=\"me-auto\">\n            <Nav.Link as={Link} to=\"/\">Home</Nav.Link>\n            {user && <Nav.Link as={Link} to=\"/profile\">Profile</Nav.Link>}\n          </Nav>\n          <Nav>\n            {user ? (\n              <Nav.Link onClick={logout}>Logout</Nav.Link>\n            ) : (\n              <Nav.Link as={Link} to=\"/login\">Login</Nav.Link>\n            )}\n          </Nav>\n        </Navbar.Collapse>\n      </Container>\n    </Navbar>\n  );\n}\n\n\nexport default Navigation;
\n

Create placeholder components for Home and Profile:

\n\n

Welcome to My App

\n \n );\n}\n\n\nexport default Home;\n\n\n\n\nsrc/components/Profile.js:\n\n\nimport React from 'react';\nimport { Container } from 'react-bootstrap';\nimport { useAuth } from '../context/AuthContext';\n\n\nfunction Profile() {\n const { user } = useAuth();\n\n\n return (\n \n

Profile

\n

Welcome, {user.email}!

\n \n );\n}\n\n\nexport default Profile;`, `55367812312011870000`)\"\n >\n \n \n \n \n
src/components/Home.js:\n\n\nimport React from 'react';\nimport { Container } from 'react-bootstrap';\n\n\nfunction Home() {\n  return (\n    <Container>\n      <h1>Welcome to My App</h1>\n    </Container>\n  );\n}\n\n\nexport default Home;\n\n\n\n\nsrc/components/Profile.js:\n\n\nimport React from 'react';\nimport { Container } from 'react-bootstrap';\nimport { useAuth } from '../context/AuthContext';\n\n\nfunction Profile() {\n  const { user } = useAuth();\n\n\n  return (\n    <Container>\n      <h1>Profile</h1>\n      <p>Welcome, {user.email}!</p>\n    </Container>\n  );\n}\n\n\nexport default Profile;
\n

Now user shall navigate to /profile on successful login.

\n {\n const newErrors = {};\n if (!email) newErrors.email = 'Email is required';\n else if (!/\\S+@\\S+\\.\\S+/.test(email)) newErrors.email = 'Email is invalid';\n if (!password) newErrors.password = 'Password is required';\n else if (password.length < 6) newErrors.password = 'Password must be at least 6 characters';\n return newErrors;\n };\n\n\n const handleSubmit = async (event) => {\n event.preventDefault();\n const formErrors = validateForm();\n if (Object.keys(formErrors).length > 0) {\n setErrors(formErrors);\n } else {\n setErrors({});\n try {\n const userData = await login(email, password);\n\n\n navigate('/profile');\n console.log('Login successful:', userData);\n // Here you would typically store the user data and redirect\n } catch (error) {\n setErrors({ form: 'Login failed. Please try again.' });\n }\n }\n };`, `83520301920227540000`)\"\n >\n \n \n \n \n
function Login() {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [errors, setErrors] = useState({});\n  const { login } = useAuth();\n  const navigate = useNavigate();\n\n\n  const validateForm = () => {\n    const newErrors = {};\n    if (!email) newErrors.email = 'Email is required';\n    else if (!/\\S+@\\S+\\.\\S+/.test(email)) newErrors.email = 'Email is invalid';\n    if (!password) newErrors.password = 'Password is required';\n    else if (password.length < 6) newErrors.password = 'Password must be at least 6 characters';\n    return newErrors;\n  };\n\n\n  const handleSubmit = async (event) => {\n    event.preventDefault();\n    const formErrors = validateForm();\n    if (Object.keys(formErrors).length > 0) {\n      setErrors(formErrors);\n    } else {\n      setErrors({});\n      try {\n        const userData = await login(email, password);\n\n\n        navigate('/profile');\n        console.log('Login successful:', userData);\n        // Here you would typically store the user data and redirect\n      } catch (error) {\n        setErrors({ form: 'Login failed. Please try again.' });\n      }\n    }\n  };
\n

Conclusion

\n

You’ve successfully built a login page using React and Bootstrap. This login component includes:

\n
    \n
  • \n

    A responsive design using Bootstrap

    \n
    • \n
  • \n

    Form validation

    \n
    • \n
  • \n

    Simulated API interaction

    \n
    • \n
  • \n

    Basic authentication state management

    \n
    • \n
\n

Remember, this is just the beginning. In a production application, you’d want to add more features like:

\n
    \n
  • Proper error handling and user feedback
    • \n
  • Password strength requirements
    • \n
  • Remember me functionality
    • \n
  • Password reset option
    • \n
  • Multi-factor authentication
    • \n
\n

Building secure login pages is crucial for protecting user data and ensuring a smooth user experience. With React and Bootstrap, you have powerful tools at your disposal to create professional, responsive, and secure login interfaces.

","frontmatter":{"date":"July 15, 2024","title":"Building a login screen with React and Bootstrap","cover":"building-a-login-screen-with-react-and-bootstrap.png","author":"Mostafa Ibrahim","description":"Build an elegant login screen super fast using React and Bootstrap"},"fields":{"slug":"/building-a-login-screen-with-react-and-bootstrap/"}},"site":{"siteMetadata":{"title":"SuperTokens Blog"}}},"pageContext":{"id":"d9d951ea-4635-5f58-bfb4-fbdacd869a27","fields__slug":"/building-a-login-screen-with-react-and-bootstrap/","__params":{"fields__slug":"building-a-login-screen-with-react-and-bootstrap"}}}, "staticQueryHashes": []}