Search code examples
javascriptfirebasefirebase-authenticationlocalhost

Firebase authentication does not work on 127.0.0.1 but works on localhost

I am using Firebase Authentication in my project, and I've encountered an issue where authentication does not work when using 127.0.0.1 as the host, but it works fine with localhost. Is it the case with you? Any insights or suggestions would be appreciated.

<!DOCTYPE html>
<html>

<body>
    <button id="btn1">Log in/Sign up</button>
    <button id="btn2" disabled>Sign Out</button>

    <script type="module">

        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.9.0/firebase-app.js"
        import { getAuth, GoogleAuthProvider, signInWithPopup, signOut} from "https://www.gstatic.com/firebasejs/10.9.0/firebase-auth.js"
        const firebaseConfig = {
            // my config
        }

        const app = initializeApp(firebaseConfig)
        const auth = getAuth()
        const provider = new GoogleAuthProvider()

        async function SignIn() {
            await signInWithPopup(auth, provider)

            btn1.disabled = true
            btn2.disabled = false
        }

        async function SignOut() {
            await signOut(auth)

            btn1.disabled = false
            btn2.disabled = true
        }

        btn1.addEventListener('click', SignIn)
        btn2.addEventListener('click', SignOut)

    </script>
</body>

</html>
Solution

  • You'll need to add 127.0.0.1 to the list of authorized domains in the Firebase console.

    Also see: