Authentication Firebase - issue with the code #120729

JackBowa · 2024-04-22T13:15:59Z

JackBowa
Apr 22, 2024

Select Topic Area

Question

Body

Dear all,

I'm a new member on GitHub, and I'm trying to create a website to share my personal reviews of manga and manhwas with other people. The site I'm working on is called mangainsight.com. My biggest challenge is that I'm developing this website without knowledge or experience in web development. Although I've learned a lot about coding while creating the website, I'm still a noob.

On this site, I'd like to enable users to write comments below my reviews so that they can share their thoughts about the manga. However, to make this possible, I need to allow users to create personal accounts. I'm planning to use Firebase Authentication, so I created an application on the Firebase console and added some code to a new HTML page. Unfortunately, nothing happens when I click the button. Could someone please help me figure out what might be wrong?

Here's a link to the test page where I'm experiencing the issue: mangainsight.com/test.html.

I tried to have a look on the previous discussion but I did not find anything, It’s possible that I don’t fully understand how the community / discussion in Github works.

I apologize for any mistakes in my English, and I thank you in advance for your help and advice!

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Add CDN links for Picocss, Font Awesome, and Firebase -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!-- Firebase Configuration -->
    <script>
        const firebaseConfig = {
            apiKey: [redacted by moderator],
            authDomain: "manga-insight.firebaseapp.com",
            projectId: "manga-insight",
            storageBucket: "manga-insight.appspot.com",
            messagingSenderId: "609301849221",
            appId: [redacted by moderator],
            measurementId: "G-Z09L6X4Z0W"
        };
    </script>
    <!-- Load Firebase SDK synchronously -->
    <script src="https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.11.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.11.0/firebase.js"></script>
</head>
<body>
    <!-- Page Content -->
    <button onclick="signIn()">Se Connecter</button>
    <button onclick="signOut()">Se Déconnecter</button>
    <script>
        function signIn() {
            const provider = new firebase.auth.GoogleAuthProvider();
            firebase.auth().signInWithPopup(provider).then((result) => {
                console.log("User signed in:", result.user);
            }).catch((error) => {
                console.error("Sign-in error:", error);
            });
        }
        function signOut() {
            firebase.auth().signOut().then(() => {
                console.log("User signed out");
            }).catch((error) => {
                console.error("Sign-out error:", error);
            });
        }
    </script>
</body>
</html>

ebndev · 2024-04-22T14:55:29Z

ebndev
Apr 22, 2024
Maintainer

Hi @JackBowa,

Thank you for being a part of the GitHub community! You can use GitHub Discussions any time your have a programming related question, like this one or explore our other categories to learn more about GitHub.

I highly recommend that you deactivate your current API key and create a new one as soon as possible, as you have exposed it in your code above.

Firebase is a backend service so you will have to set up your website / project to handle backend functionality, which you can't do with HTML scripts. I found this in their documentation that might be useful to you: Get Started with Firebase Authentication on Websites.

May I ask why you decided to use Firebase? If you are just beginning with learning backend - looking into how to use the MERN Stack to store data and authenticate users may be more beginner friendly!

0 replies

JackBowa · 2024-04-23T11:04:22Z

JackBowa
Apr 23, 2024
Author

Hi @ebndev,

Many thanks for your message, I have deleted the Firebase application (due to the API Key).

I took Firebase following the comments find on internet to be honest, so I will have a look for MERN Stack !

Thanks again for your time.

1 reply

ebndev Apr 23, 2024
Maintainer

No problem!

Here's a video tutorial I've used to build an app using MongoDB, Express, Node, EJS (instead of React), and Passport for user authentication. It's long but I definitely think worth it, at least for getting started and perhaps Firebase can be introduced if you need to scale your website later on.

Easily Add Authentication To Your Node Apps! Email Logins with Passport

Feel free to continue posting in this Programming Help category if you have questions while you're working on your project as well. Excited to see what comes of it!

calculerenligne · 2026-02-07T17:40:26Z

calculerenligne
Feb 7, 2026

Hi and welcome 👋—first of all, respect for jumping into web development from scratch. Everyone starts as a “noob,” so you’re on the right path already.

Regarding your issue: the main problem is that you’re mixing Firebase v9+ (modular SDK) with the old v8 namespaced syntax. In Firebase 10, objects like firebase.auth() no longer work the way they used to, which is why clicking the button does nothing—no error, no action.

You have two clear options:

Option 1 (Easiest for beginners):
Downgrade to Firebase v8 and keep your existing code. Replace your script imports with v8 URLs and keep using firebase.auth() as you are now.

Option 2 (Recommended long-term):
Switch fully to the modular syntax (v9+), using initializeApp, getAuth, and signInWithPopup. This requires rewriting the auth logic but is more future-proof.

Also, make sure:

Google sign-in is enabled in Firebase Authentication

Your domain is added under Authorized domains

You are serving the page over https (required for auth popups)

Once authentication works, you can easily link user accounts to comments on your manga reviews—whether it’s for general content or popular series people read like Jjk manga online, user interaction will add a lot of value to your site.

Keep going—you’re asking the right questions, and that’s how real progress happens 💪

0 replies

PythonPlumber · 2026-02-07T19:43:13Z

PythonPlumber
Feb 7, 2026

The main reason your buttons aren't doing anything is just a version mixup. Firebase recently changed how their code works in Versions 9 and 10, but the code you wrote is in the older Version 8 style.

The quickest fix, without making you rewrite everything, is to use the compatibility versions of the scripts. Also, you're currently missing the line that actually tells the app to start up using your settings.

Try swapping out your script tags and the initialization part with this:

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

<script>
    firebase.initializeApp(firebaseConfig);
</script>

A couple of quick tips for you:

First, the Console is your best friend. On your test page, right click and hit Inspect, then click the Console tab. If a button doesn't work, it'll usually spit out a red error message there telling you exactly what's broken.

Second, double check that you enabled Google Login. Go into your Firebase Dashboard, click on Authentication, then Sign in method, and make sure Google is actually toggled on. If it's not enabled there, the code won't have permission to log anyone in.

Don't sweat the noob status. Every single one of us has spent hours wondering why a button wasn't working only to realize we missed one tiny line of code.

Give that a shot and see if it gets that popup moving! If you see any red errors in the console, just paste them here and I can help you figure out what to do next.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Authentication Firebase - issue with the code #120729

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 4 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

GitHub Community

Authentication Firebase - issue with the code #120729

Uh oh!

Uh oh!

JackBowa Apr 22, 2024

Select Topic Area

Body

Replies: 4 comments · 1 reply

Uh oh!

ebndev Apr 22, 2024 Maintainer

Uh oh!

JackBowa Apr 23, 2024 Author

Uh oh!

ebndev Apr 23, 2024 Maintainer

Uh oh!

calculerenligne Feb 7, 2026

Uh oh!

PythonPlumber Feb 7, 2026

JackBowa
Apr 22, 2024

Replies: 4 comments 1 reply

ebndev
Apr 22, 2024
Maintainer

JackBowa
Apr 23, 2024
Author

ebndev Apr 23, 2024
Maintainer

calculerenligne
Feb 7, 2026

PythonPlumber
Feb 7, 2026