Project 16: Login Screen

React Engineer

Builds on these lessons

Secure Auth Ui Xss In React Safe Rendering Dangerously Set Innerhtml

Step 1 of 3

Project

A Secure Auth Form Shell

Build the login form with autoComplete="current-password" on the password field and autoComplete="email" on the email field. Correct autocomplete hints let password managers work properly — a small detail that meaningfully affects real-world account security.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { useState } from "react";

export default function LoginScreen() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <form>
      <input type="email" autoComplete="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" autoComplete="current-password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">Log In</button>
    </form>
  );
}

← Previous Next →