I was trying to add login feature through prompt inside react. But I was asked twice the same details by browser. What should I do?

I was trying to implement login feature in the webpage such that when user give valid credentials then only render the content.
But Browser ask the same credentials twice. But why I have expected that it should ask only once?

Help me to fix this bug?

You can store your variables in a state and implement a simple login page like this:

import { useState } from "react";

export default function App() {
  const [userId, setUserId] = useState("");
  const [password, setPassword] = useState("");

  const handleLogin = () => {
    setUserId(prompt("Enter your user id:"));
    setPassword(prompt("Enter your password:"));
  };

  if (userId !== "abcd" || password !== "1234") {
    return (
      <>
        <h1>Unauthorized</h1>
        <button type="button" onClick={handleLogin}>
          Login
        </button>
      </>
    );
  }

  return (
    <div className="App">
      <h1>Login successful</h1>
    </div>
  );
}

Link to sandbox.

Using a useEffect will trigger the prompt twice during development unless you disable strict mode.

Link to sandbox with useEffect.