estoy haciendo una pagina web en la que utilizo booststrap y firebase. Total que tengo el formulario para recoger los datos del usuario para posteriormente enviarselo a firebase para que lo agrege a la base de datos.

He buscado informacion de porque no funciona (no se suben los datos a la base de datos), pero no he encontrado nada el codigo del html es el siguiente:


        <html>
            <meta charset="UTF-8">
            <head>
                
                <title>Casco cines</title>
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
                <link rel="stylesheet" href="rectk_complicaciones.css" type="text/css" />
                <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
                <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
              
              
            
            </head>
            
        
            
            <body>
               
                 
                
               <nav class="navbar navbar-expand-lg navbar-light bg-light">
               <a class="navbar-brand" href="Index.html">Casco cines</a>
          
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
               
                  <span class="navbar-toggler-icon"></span>
               
               </button>
        
               <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                     
                    
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <li class="nav-item active">
                      
                      <a class="nav-link" href="Top.html">Top <span class="sr-only">(current)</span></a>
                    
                    </li>
                    <li class="nav-item active">
                    
                        <a class="nav-link" href="categoria.html">Categoria <span class="sr-only">(current)</span></a>
                    
                    </li>
                    <li class="nav-item active">
                    
                        <a class="nav-link" href="at_cliente.html">Atención al cliente <span class="sr-only">(current)</span></a>
                    
                    </li>
                      
                    </ul>
                    
                    
                    <form class="form-inline my-2 my-lg-0">
                
                     
                      <a class="navbar-brand" href="login.html">Log in</a>
                     
              
                      
                     
                    </form>
                    
                    
                </div>
            
        
            </nav>
            
            
        
            
            <div>  
               <!-- aca va un espacio -->
               </br>
               
               
               
        
            </div>
            	<div id="SignIn">
            	   
                    <div class="container">
                        <div id="SignIn-row" class="row justify-content-center align-items-center">
                            <div id="SignIn-column" class="col-md-6">
                                <div class="SignIn-box col-md-12">
                                    
                                    
                                    <form id="SignIn-form" class="form" action="" method="post">
                                        <h3 class="text-center text-info text-dark ">Sign In</h3>
                                        
                                        
                                        <div class="form-group">
                                            <label for="name" class="text-info text-dark">Name:</label><br>
                                            <input type="text" name="name" id="name" class="form-control">
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="surname" class="text-info text-dark">Surname:</label><br>
                                            <input type="text" name="surname" id="surname" class="form-control">
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="email" class="text-info text-dark">Email:</label><br>
                                            <input type="text" name="email" id="email" class="form-control">
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="inputPassword" class="text-info text-dark">Password:</label><br>
                                            <input type="password" class="form-control" id="inputPassword">
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="repeatpassword" class="text-info text-dark">Repeat Password:</label><br>
                                            <input type="password" class="form-control" id="repeatpassword">
                                        </div>
                                        
                                        <div class=" text-center form-group ">
                                           
                                
                                            <button type="button" id="end-pls" onClick="aux()" class="btn btn-danger">Registrate</button>
                                            
                                           <!-- <script src="https://www.gstatic.com/firebasejs/5.7.2/firebase.js"></script> -->
                                            <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
                                            <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-firestore.js"></script>
                                            <script>   // Initialize Firebase
                                            
                                             
                                              var config = {
                                                apiKey: "AIzaSyBrwLumts2gkeLjgvjer9_f7lhY3NwZUow",
                                                authDomain: "sipc-54c0f.firebaseapp.com",
                                                databaseURL: "https://sipc-54c0f.firebaseio.com",
                                                projectId: "sipc-54c0f",
                                                storageBucket: "sipc-54c0f.appspot.com",
                                                messagingSenderId: "49051567985"
                                              };
                                              firebase.initializeApp(config);
          
                                              var db= firebase.firestore();
                                              
                                              
                                              
                                             const btn = document.getElementById("end-pls");
                                             
                                             btn.addEventListener('click',e=>{
                                                 
                                             const name = document.getElementById("name").value;
                                             const surname = document.getElementById("surname").value;
                                             const pass=document.getElementById("pass");
                                             const email = document.getElementById("email");
                                             
                                           
                                            
                                              
                                              db.collection("Usuarios").add({
                                                    name: name,
                                                    surname:surname,
                                                    pass: pass,
                                                    email:email
                                                })
                                                .then(function(docRef) {
                                                    console.log("Document written with ID: ", docRef.id);
                                                })
                                                .catch(function(error) {
                                                    console.error("Error adding document: ", error);
                                                });
                                                 
                                                 });
                                             
                                             
                                                                                      
                                            
                                            </script>
                                        </div>
                                        
                                       
                                        
                                        
                               
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
            
        
                  
            </body>
            
        </html>


En firestone tengo las siguientes reglas: 

        service cloud.firestore {
          match /databases/{database}/documents {
            match /{document=**} {
              allow read, write;
            }
          }
        }


Y por ultimo, en los datos tengo en la coleccion "Usuarios", en documento "0" (pero mi idea es que se creen de forma automatica por eso intento usar collection(..).add) y la coleccion seria :email,name,pas,surname.

Muchas gracias por adelantado a toda la ayuda.