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!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Authentication Firebase - issue with the code #120729

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

Select a reply

GitHub Community

Authentication Firebase - issue with the code #120729

JackBowa Apr 22, 2024

Select Topic Area

Body

Replies: 2 comments · 1 reply

ebndev Apr 22, 2024 Maintainer

JackBowa Apr 23, 2024 Author

ebndev Apr 23, 2024 Maintainer

JackBowa
Apr 22, 2024

Replies: 2 comments 1 reply

ebndev
Apr 22, 2024
Maintainer

JackBowa
Apr 23, 2024
Author

ebndev Apr 23, 2024
Maintainer