React Coding Challenges: Building an Authentication App

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';

function Login({ onLogin }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = e => {
    e.preventDefault();
    if (username === 'user' && password === 'pass') {
      onLogin();
    } else {
      alert('Invalid credentials');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={username} onChange={e => setUsername(e.target.value)} placeholder="Username" />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  );
}

function Dashboard({ onLogout }) {
  return (
    <div>
      <h2>Dashboard</h2>
      <button onClick={onLogout}>Logout</button>
    </div>
  );
}

function ProtectedRoute({ isAuthenticated, children, ...rest }) {
  return (
    <Route
      {...rest}
      render={() =>
        isAuthenticated ? children : <Redirect to="/login" />
      }
    />
  );
}

export default function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <Router>
      <Switch>
        <Route path="/login">
          <Login onLogin={() => setIsAuthenticated(true)} />
        </Route>
        <ProtectedRoute path="/dashboard" isAuthenticated={isAuthenticated}>
          <Dashboard onLogout={() => setIsAuthenticated(false)} />
        </ProtectedRoute>
        <Route path="/">
          <Redirect to="/dashboard" />
        </Route>
      </Switch>
    </Router>
  );
}