firebaseui-web Correcting the example to make it work

The example was not working, as one needs to move the code to the body, and is not clear to newbies where the initialisation of firebase should go.

Jan 08 '23 14:01 manuelsh

Hi @NhienLam, could you please review? Thanks

Jan 15 '23 23:01 manuelsh

Thanks @manuelsh for the PR! In the code snippet, we have a comment telling developers to initialize the firebase app in the <head> tag.

  * TODO(DEVELOPER): Paste the initialization snippet from this dialog box:
  * Firebase Console > Project Settings > Add App > Web.

The initialization snippet includes firebaseConfig and firebase.initializeApp(firebaseConfig), so pasting the snippet in the <head> tag will work. Also, developers can always refer to our demo application for a more in-depth example. I hope this helps. Thank you!

@prameshj @jamesdaniels

Jan 17 '23 19:01 NhienLam

Thanks for looking to the PR!

If I follow the code in the readme file, and add the firebaseConfig and the firebase.initializeApp(firebaseConfig) where it says it should go, I get the error:

Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).

That's why I suggested the changes in the PR.

This is the code that didn't work. Maybe there is something else I did wrong, but couldn't spot it.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Sample FirebaseUI App</title>
    <script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
    <script type="module">
      // Import the functions you need from the SDKs you need
      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
      // TODO: Add SDKs for Firebase products that you want to use
      // https://firebase.google.com/docs/web/setup#available-libraries

      // Your web app's Firebase configuration
      const firebaseConfig = {
        apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
      };

      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
    </script>
    <script src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.js"></script>
    <link
      type="text/css"
      rel="stylesheet"
      href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css"
    />
    <script type="text/javascript">
      // FirebaseUI config.
      var uiConfig = {
        signInSuccessUrl: "<url-to-redirect-to-on-success>",
        signInOptions: [
          // Leave the lines as is for the providers you want to offer your users.
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.FacebookAuthProvider.PROVIDER_ID,
          firebase.auth.TwitterAuthProvider.PROVIDER_ID,
          firebase.auth.GithubAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID,
          firebase.auth.PhoneAuthProvider.PROVIDER_ID,
          firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID,
        ],
        // tosUrl and privacyPolicyUrl accept either url string or a callback
        // function.
        // Terms of service url/callback.
        tosUrl: "<your-tos-url>",
        // Privacy policy url/callback.
        privacyPolicyUrl: function () {
          window.location.assign("<your-privacy-policy-url>");
        },
      };

      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // The start method will wait until the DOM is loaded.
      ui.start("#firebaseui-auth-container", uiConfig);
    </script>
  </head>
  <body>
    <!-- The surrounding HTML is left untouched by FirebaseUI.
         Your app may use that space for branding, controls and other customizations.-->
    <h1>Welcome to My Awesome App</h1>
    <div id="firebaseui-auth-container"></div>
  </body>
</html>

Jan 18 '23 20:01 manuelsh

Hi Manuel! If you load Firebase JS SDK libraries from the CDN, then yes, it’s correct to paste the initialization scripts into the bottom of your <body> tag and before you use any Firebase services (which was what you did in this PR). I believe there is an instruction to do this in Firebase Console where we get these scripts. Pasting the CDN initialization script into the <head> will give us the error that you mentioned in the previous comment.

If I understand correctly, the README file is written to be consistent with our demo application which uses NPM instead of CDN. https://github.com/firebase/firebaseui-web/blob/master/demo/public/index.html#L9 https://github.com/firebase/firebaseui-web/blob/master/demo/public/sample-config.js

Jan 18 '23 23:01 NhienLam

Oh what you mean is when in the readme file it says:

       * TODO(DEVELOPER): Paste the initialization snippet from this dialog box:
       * Firebase Console > Project Settings > Add App > Web.

we should add the NPm version and not the CDN... that makes sense.

How about making it more explicit, to avoid these issues? For example:

       * TODO(DEVELOPER): Paste the initialization snippet from this dialog box:
       * Firebase Console > Project Settings > Add App > Web.
       * Use the npm configuration.

Jan 20 '23 22:01 manuelsh

closed it by mistake, apologies

Jan 20 '23 22:01 manuelsh