Firebase Phone Authentication: FirebaseError: An internal AuthError has occurred (auth/internal-error)

use https://firebase.google.com/docs/auth/web/phone-auth
I’m trying to implement phone number authentication using Firebase in my web application. When I call the signInWithPhoneNumber method, I receive the following error:

FirebaseError: Firebase: An internal AuthError has occurred. (auth/internal-error)

I have correctly set up the reCAPTCHA verification, and I’ve added the authorized domains to my Firebase console. I am testing on localhost and also have the following domain added for my Chrome extension: chrome-extension://
Despite these steps, I continue to receive the internal error. Any help or suggestions on how to resolve this issue would be greatly appreciated!

Here is the relevant code snippet:

popup html and popup.js

document.addEventListener('DOMContentLoaded', function () {
  const siteList = document.getElementById('siteList');

  // Firebase config
  const firebaseConfig = {
    apiKey: "********",
    authDomain: "*******m",
    projectId: "*********-1",
    storageBucket: "******om",
    messagingSenderId: "************",
    appId: "1*************c*7",
    measurementId: "***************ZG"
  };

  // Firebase başlat
  firebase.initializeApp(firebaseConfig);
  const auth = firebase.auth();

  // Cashback fırsatları objesi
  const sites = {
    'tren.com': {
      name: 'tren',
      cashbackRate: '5%',
      logo: 'images/tren.png'
    },
    'burada.com': {
      name: 'burada',
      cashbackRate: '4%',
      logo: 'images/burada.png'
    }
  };

  // Cashback fırsatlarını listele
  function listCashbackSites() {
    siteList.innerHTML = '';
    for (const [domain, site] of Object.entries(sites)) {
      const siteElement = document.createElement('div');
      siteElement.className="site-item";
      siteElement.innerHTML = `
        <img src="${site.logo}" alt="${site.name}" class="site-logo">
        <div class="site-info">
          <div class="site-name">${site.name}</div>
          <div class="cashback-rate">${site.cashbackRate} Cashback</div>
        </div>
      `;
      siteList.appendChild(siteElement);
    }
  }

  // Giriş formunu göster
  function showLoginForm() {
    document.body.innerHTML = `
      <div class="login-container">
        <h3>Lütfen Telefon Numaranızı Girin</h3>
        <form id="phoneForm">
          <input type="tel" id="phoneNumber" placeholder="Telefon Numarası" required>
          <div id="recaptcha-container"></div>
          <button type="submit">Onay Kodunu Gönder</button>
        </form>
        <div id="verificationContainer" style="display: none;">
          <h3>Onay Kodunu Girin</h3>
          <form id="verificationForm">
            <input type="text" id="verificationCode" placeholder="Onay Kodu" required>
            <button type="submit">Doğrula</button>
          </form>
        </div>
    
      </div>
      <div class="register-container" style="display: none;">
        <h3>Kayıt Olun</h3>
        <form id="registerForm">
          <input type="tel" id="registerPhone" placeholder="Telefon Numarası" required>
          <input type="text" id="registerVerificationCode" placeholder="Onay Kodu" required>
          <button type="submit">Kayıt Ol</button>
        </form>
        <p>Zaten hesabınız var mı? <a href="#" id="showLogin">Giriş Yapın</a></p>
      </div>
    `;
  





  
    // Giriş formu işlemleri
    document.getElementById('phoneForm').addEventListener('submit', (e) => {
      e.preventDefault();


      let verify1 = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
        'size': 'normal', // 'compact' ya da 'invisible' da kullanabilirsiniz
        'callback': function(response) {
          alert("hata123: "+response)
          // ReCaptcha çözüldü
        }
      });
      verify1.render().then(function(widgetId) {
        window.recaptchaWidgetId = widgetId;
      });
      

      const phoneNumber = document.getElementById('phoneNumber').value;
      //setupRecaptcha();
    
     
      debugger;
      let verify = new firebase.auth.RecaptchaVerifier('recaptcha-container');
      auth.signInWithPhoneNumber(phoneNumber,verify1)
        .then((confirmationResult) => {
          // Onay kodu gönderildi
          debugger;
          window.confirmationResult = confirmationResult;
          document.getElementById('verificationContainer').style.display = 'block';
          console.log('Onay kodu gönderildi');
        })
        .catch((error) => {
          debugger;
          alert('Hata: ' + error.message);
        });
    });
    
    // Onay kodunu doğrula
    document.getElementById('verificationForm').addEventListener('submit', (e) => {
      e.preventDefault();
      const verificationCode = document.getElementById('verificationCode').value;
      debugger;
      window.confirmationResult.confirm(verificationCode)
        .then((result) => {
          // Kullanıcı başarıyla giriş yaptı
          const user = result.user;
          console.log('Giriş başarılı:', user);
        })
        .catch((error) => {
          console.error('Doğrulama hatası:', error);
          alert('Hata: ' + error.message);
        });
    
    });

    

    // Form geçişleri
    document.getElementById('showRegister')?.addEventListener('click', (e) => {
      e.preventDefault();
      document.querySelector('.login-container').style.display = 'none';
      document.querySelector('.register-container').style.display = 'block';
    });

    document.getElementById('showLogin')?.addEventListener('click', (e) => {
      e.preventDefault();
      document.querySelector('.register-container').style.display = 'none';
      document.querySelector('.login-container').style.display = 'block';
    });
  }

  // Kullanıcı oturum açma durumunu kontrol et
  firebase.auth().onAuthStateChanged(user => {
    if (user) {
      // Kullanıcı oturum açtıysa cashback fırsatlarını göster
      document.body.innerHTML = `
        <div class="main-container">
          <h2>Cashback Fırsatları</h2>
          <div id="siteList"></div>
          <button id="logoutButton">Çıkış Yap</button>
        </div>
      `;
      listCashbackSites();

      // Çıkış yapma işlemi
      document.getElementById('logoutButton').addEventListener('click', () => {
        auth.signOut().then(() => {
          console.log('Çıkış yapıldı');
          location.reload();
        });
      });
    } else {
      // Kullanıcı oturum açmadıysa login formunu göster
      showLoginForm();
    }
  });
});

// Background script
chrome.runtime.onInstalled.addListener(() => {
  console.log('Cashback extension installed');
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'TRACK_CASHBACK') {
    console.log('Cashback link clicked:', request.data);
  }
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Login  </title>

    <link
      type="text/css"
      rel="stylesheet"
      href="css/normalize.css"
    />
    <link
      type="text/css"
      rel="stylesheet"
      href="css/firebase-ui-auth.css"
    />

    <script src="js/firebase-app-compat.js"></script>
    <script src="js/firebase-auth-compat.js"></script>
    <script src="js/firebase-ui-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js"></script>


    <script src="js/firebase.js"></script>
    <script src="js/firebase-ui-setup.js"></script> 

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="robots" name="robots" content="noindex, nofollow" />
    <style>
      .login-container, .register-container {
  max-width: 300px;
  margin: 20px auto;
  padding: 20px;
}

input {
  width: 100%;
  padding: 8px;
  margin: 8px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #45a049;
}

.main-container {
  padding: 20px;
}
    </style>
  </head>

  <body>
    <header>
      <div class="navigation-bar section">
        <a href="/" class="logo">
          <img
            src="/assets/img/lunar-industries-logo.png"
            alt="Lunar Industries"
          />
        </a>
      </div>
    </header>

    <div class="container">
      <div class="hero-banner"></div>
      <div class="login-explainer"></div>

      <div class="login-container">
        <h3>Lütfen Telefon Numaranızı Girin</h3>
        <form id="phoneForm">
          <input type="tel" id="phoneNumber" placeholder="5XX XXX XX XX" required />
          <div id="error-message" class="error-message"></div>
          
          <div id="recaptcha-container"></div>
          <button type="submit">Onay Kodunu Gönder</button>
      </form>
        <div id="verificationContainer" style="display: none;">
          <h3>Onay Kodunu Girin</h3>
          <form id="verificationForm">
            <input type="text" id="verificationCode" placeholder="Onay Kodu" required />
            <button type="submit">Doğrula</button>
          </form>
        </div>
       
      </div>
      

      <div id="firebaseui-auth-container"></div>
    </div>

    <script src="popup.js"></script>
  </body>
</html>

You need to sign in to view this answers

Related Post