javascript – Why my alert is not coming and my information not saving in firebox more info in body

Why is my alert not coming when click on button an also my email and password are not saving in firebox i have entered the code right and also how can i save my username to firebox too and this is the user info on firebox
I have written everything right I don’t think there NY problem with my sign up() function but I don’t know pls help
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet"  href="index.css"></link>
  <script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js"></script>
 <script src="index.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-auth.js"></script>

</head>
<body>
  <div class="pe" id="pe">
    <h1>🎏ORGANIC PE🎏</h1>  
    <h1>📝SIGN UP</h1>
  </div>
  <form class="form" id="form">
    <div class="user" id="user">
     
      <input type="text" id="username" placeholder="Username" required>< 
    </div>
    <div class="first">
     
      <input type="text" id="email" placeholder="ENTER EMAIL" required>
    </div>
      <div class="second" id="second">
        
        <input type="text"  id="password" placeholder="ENTER PASSWORD" required>
      </div>
      <div class="confirm" id="confirm">
     
        <input type="text" id="password" placeholder=" CONFIRM PASSWORD"  >
      </div>
      <div class="submit">
        <button onclick="signup()" class="button" id="signup">📫Sign Up</button>
      </div>
      <div class="cancel" id="cancel">
        <input onclick="signup()" type="button" value="Cancel"></input>
      </div>
      <div class="login" id="login">
        <p>Already have an account <a href="#">Login</a></p>  
      </div>
  </form>
    <h3><a href="#"><-Go back</a></h3>  
</body>
</html

CSS:

body {
  background-image: url("/back.jpg");
    opacity: 5;
    background-size: cover;
    height: 1000px;
    background-repeat: no-repeat;
    background-position: center;
}
.pe {
  text-align: center;
}
.form {
background-color: #d67915;
  text-align: center;
  width: 250px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  box-shaddow: inset 20px 20px grey;
  border-radius: 10px;
}
.button {
  padding: 20px;
background-color: black;
border: none;
color: white;
border-radius: 10px;
width: 200px;
}

Input(type="button") {
  padding: 20px;
background-color: black;
border: none;
color: white;
border-radius: 10px;
width: 200px;
}

Input(type="text") {
padding: 5px;
 placeholder-color: white;
 border-radius: 10px;
}
div {
  padding: 10px;
h3 {
  background-color: black; 
  width: 150px;
  color: white;
  margin-top: 200px;
}

Js:


  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "AIzaSyA5I9yq34ZG2tcOn5sF0liUl3AT-5IEo1I",
    authDomain: "organic-pe-form.firebaseapp.com",
    projectId: "organic-pe-form",
    storageBucket: "organic-pe-form.appspot.com",
    messagingSenderId: "110093275502",
    appId: "1:110093275502:web:7da956de064d38e171f17f",
    measurementId: "G-VSLN8C4FG9"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
const auth = firebase.auth();

function signup() {
  
  var email = document.getElementById("email");
  var password = document.getElementById("password");
  
  const promise = auth.CreateUserWithEmailAndPassword(email.value, password.value);
  promise.catch(e => alert(e.message));
  
  alert("signed in");
  
}