Blog of Wei-Hsiung Huang: Getting start with Firebase - Part 2

This is the 2nd part of getting start with Firebase. This part mainly deals with user login.

Prepare the authentication settings in Firebase

1. Launch web browser, enter https://firebase.google.com/ in the URL field.

Click the "GO TO CONSOLE" on the upper right hand corner.

2. Click the project to work on. In my case, it's "firebase-project-01".

3. Select "Authentication" from the list of items under "DEVELOP" on the left.

4. Select "SIGN IN METHOD".

5. Select Google, click on the "Enable"slide button to enable it, click on "SAVE" to save the setting.

Google is now selected as the sign-in provider.

6. Prepare the code.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Firebase Hosting</title>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/5.0.2/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/5.0.2/firebase-auth.js"></script>
    <script defer src="/__/firebase/5.0.2/firebase-database.js"></script>
    <script defer src="/__/firebase/5.0.2/firebase-messaging.js"></script>
    <script defer src="/__/firebase/5.0.2/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>

  </head>
  <body>

    <h1 id="heading">Hello Firebase World</h1>

    <button id="btn" onclick="googleLogin()">

      Login with google

    </button>

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

app.js

document.addEventListener("DOMContentLoaded", event => {

    const app = firebase.app();

})

function googleLogin(){
    const provider = new firebase.auth.GoogleAuthProvider();

    firebase.auth().signInWithPopup(provider)

            .then(result => {
                const user = result.user;
                //document.write('Hello ${user.displayName}');

                document.getElementById("heading").innerHTML = "Hello " + firebase.auth().currentUser.displayName;
                
                var x = document.getElementById("btn");
                btn.parentNode.removeChild(btn);

                console.log(user)
            })
            .catch(console.log)

}

Note,

DO NOT use "document.write" as it's not supported by Chrome, Firefox anymore.
Ref.: https://blog.dareboost.com/en/2016/09/avoid-using-document-write-scripts-injection/

Execute the code

1. Enter firebase serve" in the terminal window to launch the app locally.

2. Launch browser, enter "localhost:5000" in the URL field.

Click on the "Login with Google" button to login.