I have a sign-up/sign-in page for my website, and I want to integrate Firebase authentication to manage user accounts securely. However, I'm having trouble integrating Firebase into my project. The main issue is that when I try to implement Firebase authentication (for both login and registration), the functionality doesn't work, and no error message is shown.

What I've tried:

• I have added the Firebase authentication SDK to my project.
• I implemented the sign-up and sign-in forms with JavaScript, attempting to integrate Firebase's createUserWithEmailAndPassword() and signInWithEmailAndPassword() methods.
• I expected that the user registration and login would happen securely via Firebase, and after signing in, the user would be redirected to the homepage.

Issue faced:

• When I press the "Sign Up" or "Sign In" button, the page does not behave as expected. No error message is shown.
• I believe the Firebase connection is not properly integrated.
• I also don’t get any red error messages that might help me debug.

Relevant code:

<!-- Sign Up Form -->
<form id="registerForm">
<input type="email" id="email" required>
<input type="password" id="newPassword" required>
<button type="submit">Register</button>
</form>
<script type="module">
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from ".1.2/firebase-auth.js";
const auth = getAuth();

document.getElementById("registerForm").addEventListener("submit", async (event) => {
  event.preventDefault();

  const email = document.getElementById("email").value;
  const password = document.getElementById("newPassword").value;

  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log('Registration successful:', userCredential.user);
  } catch (error) {
    console.error('Registration error:', error.message);
  }
});
</script>

What I expect:

• After entering a username, email, and password, I want the user to be registered securely using Firebase.
• If there’s an issue, I want to see a proper error message for debugging.

What actually happened:

• When the user tries to sign up, the form submits but nothing happens (no error or success).
• The Firebase authentication doesn’t seem to trigger correctly.

Things I’ve checked:

• I've confirmed that the Firebase SDK is imported correctly.
• No errors are shown in the browser’s console or UI.

•Note: I believe my question has been misunderstood. I have already initialized Firebase. If I hadn’t, my other functions wouldn’t work at all. However, my issue is not about simply initializing Firebase but rather integrating it properly without breaking my existing functions. The responses I’ve received so far only suggest initializing Firebase, which I have already done. My real question is: How can I integrate Firebase without disrupting my current code structure? Can someone help with this specific issue? Here is My Code's FireBase integrated version:

<script type="module">  
        
        import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from ".1.2/firebase-auth.js";  
      
        
        const auth = getAuth(app);  
     
        const registerUser = (email, password) => {  
            createUserWithEmailAndPassword(auth, email, password)  
                .then((userCredential) => {  
                    console.log('Kayıt başarılı!', userCredential.user);  
                })  
                .catch((error) => {  
                    console.error('Kayıt hatası:', error.message);  
                });  
        };  
      
        const loginUser = (email, password) => {  
            signInWithEmailAndPassword(auth, email, password)  
                .then((userCredential) => {  
                    console.log('Giriş başarılı!', userCredential.user);  
                })  
                .catch((error) => {  
                    console.error('Giriş hatası:', error.message);  
                });  
        };  
    </script>

I have a sign-up/sign-in page for my website, and I want to integrate Firebase authentication to manage user accounts securely. However, I'm having trouble integrating Firebase into my project. The main issue is that when I try to implement Firebase authentication (for both login and registration), the functionality doesn't work, and no error message is shown.

What I've tried:

• I have added the Firebase authentication SDK to my project.
• I implemented the sign-up and sign-in forms with JavaScript, attempting to integrate Firebase's createUserWithEmailAndPassword() and signInWithEmailAndPassword() methods.
• I expected that the user registration and login would happen securely via Firebase, and after signing in, the user would be redirected to the homepage.

Issue faced:

• When I press the "Sign Up" or "Sign In" button, the page does not behave as expected. No error message is shown.
• I believe the Firebase connection is not properly integrated.
• I also don’t get any red error messages that might help me debug.

Relevant code:

<!-- Sign Up Form -->
<form id="registerForm">
<input type="email" id="email" required>
<input type="password" id="newPassword" required>
<button type="submit">Register</button>
</form>
<script type="module">
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "https://www.gstatic/firebasejs/9.1.2/firebase-auth.js";
const auth = getAuth();

document.getElementById("registerForm").addEventListener("submit", async (event) => {
  event.preventDefault();

  const email = document.getElementById("email").value;
  const password = document.getElementById("newPassword").value;

  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log('Registration successful:', userCredential.user);
  } catch (error) {
    console.error('Registration error:', error.message);
  }
});
</script>

What I expect:

• After entering a username, email, and password, I want the user to be registered securely using Firebase.
• If there’s an issue, I want to see a proper error message for debugging.

What actually happened:

• When the user tries to sign up, the form submits but nothing happens (no error or success).
• The Firebase authentication doesn’t seem to trigger correctly.

Things I’ve checked:

• I've confirmed that the Firebase SDK is imported correctly.
• No errors are shown in the browser’s console or UI.

•Note: I believe my question has been misunderstood. I have already initialized Firebase. If I hadn’t, my other functions wouldn’t work at all. However, my issue is not about simply initializing Firebase but rather integrating it properly without breaking my existing functions. The responses I’ve received so far only suggest initializing Firebase, which I have already done. My real question is: How can I integrate Firebase without disrupting my current code structure? Can someone help with this specific issue? Here is My Code's FireBase integrated version:

<script type="module">  
        
        import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "https://www.gstatic/firebasejs/9.1.2/firebase-auth.js";  
      
        
        const auth = getAuth(app);  
     
        const registerUser = (email, password) => {  
            createUserWithEmailAndPassword(auth, email, password)  
                .then((userCredential) => {  
                    console.log('Kayıt başarılı!', userCredential.user);  
                })  
                .catch((error) => {  
                    console.error('Kayıt hatası:', error.message);  
                });  
        };  
      
        const loginUser = (email, password) => {  
            signInWithEmailAndPassword(auth, email, password)  
                .then((userCredential) => {  
                    console.log('Giriş başarılı!', userCredential.user);  
                })  
                .catch((error) => {  
                    console.error('Giriş hatası:', error.message);  
                });  
        };  
    </script>

• javascript
• html
• css
• firebase-authentication

• 1 I'm not too familiar with firebase integration TBH, but just with the exact code you've provided here, if I run it there's a console error immediately when the page loads saying "api.ts:192 Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)." . Are you not seeing that message? Is there some wider context to your code which prevents this? It's unclear if what you've shown is really a minimal reproducible example of your exact issue, or if you simply haven't noticed that error for some reason. Please edit your question to clarify, thanks. – ADyson Commented Mar 31 at 15:20
• Yes, I did notice that error and have already initialized Firebase using ‘initializeApp()’. However, the issue isn't just about that. Even after initialization, Firebase is still not working as expected. I didn’t share my entire code because I wanted to keep the question focused on the core issue. If there's anything specific I should isolate to create a better minimal example, I'd appreciate any suggestions on what part of the code might be most relevant. – Berke Doğan Commented Mar 31 at 16:58
• 1 Well I think you need to show at least that you've initialised the app properly then. At the moment the code you've shown leads to a different problem than the one you're asking about, so it isn't a minimal reproducible example of the actual issue. Hence why you've got a comment and an answer telling you that you need to initialise the app, which you now say you've already done. When posting code always check it to see if, when used independently, it recreates the behaviour you're describing. Otherwise you will get answers to the wrong problem, as we've seen here. – ADyson Commented Mar 31 at 17:29
• 1 If you're already initialized Firebase, then you should show us that code to see if it's correct. We should be able to copy everything you have and run it for ourselves to observe the same result. If we can't see a complete minimal reproducible example of the code you have that doesn't work the way you expect, are you aren't showing any logs that indicate specifically what the problem is, then we really can't tell you what you're doing wrong. – Doug Stevenson Commented Mar 31 at 20:33
• My real question is: How can I integrate Firebase without disrupting my current code structure? Can someone help with this specific issue?...that's actually not a specific issue, it's quite broad and vague. You still need to update your code to show a version that actually behaves the way you've described. Then we might be able to diagnose what's wrong with it - that would be a specific issue for us to fix – ADyson Commented Mar 31 at 20:44

1 Answer 1

You have to initialize the firebase app with your project's configurations first. Without this initialization, firebase would not work correctly. To do this, call initializeApp() with your firebase configs.

<script type="module">
import { initializeApp } from "https://www.gstatic/firebasejs/9.1.2/firebase-app.js";
import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic/firebasejs/9.1.2/firebase-auth.js";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

document.getElementById("registerForm").addEventListener("submit", async (event) => {
  event.preventDefault();

  const email = document.getElementById("email").value;
  const password = document.getElementById("newPassword").value;

  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log('Registration successful:', userCredential.user);
  } catch (error) {
    console.error('Registration error:', error.message);
  }
});

You can use following references for more information.

• https://firebase.google/docs/web/setup
• https://www.hackpost.guide/users/cometblazer/post-770081240-how-to-make-a-simple-login-using-firebase-html-and-css