Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Reference error on Google's Firebase authentication tutorial project

Tags:

javascript

firebase

I have been working through the Google Firebase Authentication tutorial. Everything in the project worked up until this point and I have basically done a direct copy and paste from their github for the files. The two files related to my problem are:

  1. static.js
  2. index.html

For the static.js file the only changes I have made are to remove some comments for the purposes of brevity for this question. The is shown here (I do not believe this file is the problem):

//static.js
'use strict';

window.addEventListener('load', function () {
  document.getElementById('sign-out').onclick = function () {
    firebase.auth().signOut();
  };

  // FirebaseUI config.
  var uiConfig = {
    signInSuccessUrl: '/',
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
    // Terms of service url.
    tosUrl: '<your-tos-url>'
  };

  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      // User is signed in, so display the "sign out" button and login info.
      document.getElementById('sign-out').hidden = false;
      document.getElementById('login-info').hidden = false;
      console.log(`Signed in as ${user.displayName} (${user.email})`);
      user.getIdToken().then(function (token) {
        document.cookie = "token=" + token;
      });
    } else {
      // User is signed out.
      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // Show the Firebase login button.
      ui.start('#firebaseui-auth-container', uiConfig);
      // Update the login state indicators.
      document.getElementById('sign-out').hidden = true;
      document.getElementById('login-info').hidden = true;
      // Clear the token cookie.
      document.cookie = "token=";
    }
  }, function (error) {
    console.log(error);
    alert('Unable to log in: ' + error)
  });
});

In my index.html I have inserted the code coped from the firebase console with the "CDN" option selected. Note that I have left in the comments in the code copied from Google incase they are useful.

<!doctype html>
<html>
<head>
  <title>Datastore and Firebase Auth Example</title>

  <!-- See https://github.com/firebase/firebaseui-web. -->
  <!-- [START gae_python38_auth_init_firebase] -->
  <!-- [START gae_python3_auth_init_firebase] -->

  <!-- THIS IS WHAT I COPIED AND PASTED IN -->
  <script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-analytics.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
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
      apiKey: "A****************Q",
      authDomain: "c*******.firebaseapp.com",
      projectId: "c*******",
      storageBucket: "c*******.appspot.com",
      messagingSenderId: "1**********0",
      appId: "1:1**********10:web:0**********53",
      measurementId: "G-1********S"
    };
  
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
  </script>
  <!-- END OF WHAT I COPIED AND PASTED IN -->
  <!-- [END gae_python3_auth_init_firebase] -->
  <!-- [END gae_python38_auth_init_firebase] -->
  <script>
    if (typeof firebase === 'undefined') {
      const msg = "Please paste the Firebase initialization snippet into index.html. See https://console.firebase.google.com > Overview > Add Firebase to your web app.";
      console.log(msg);
      alert(msg);
    }
  </script>
  <script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-auth.js"></script>
  <!-- [START gae_python38_auth_include_firebaseui] -->
  <!-- [START gae_python3_auth_include_firebaseui] -->
  <script src="https://www.gstatic.com/firebasejs/ui/4.4.0/firebase-ui-auth.js"></script>
  <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.4.0/firebase-ui-auth.css" />
  <!-- [END gae_python3_auth_include_firebaseui] -->
  <!-- [END gae_python38_auth_include_firebaseui] -->
  <script src="{{ url_for('static', filename='script.js') }}"></script>
  <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

</head>
<body>

<h1>Datastore and Firebase Auth Example</h1>

<div id="firebaseui-auth-container"></div>

<button id="sign-out" hidden=true>Sign Out</button>

<div id="login-info" hidden=true>
  <h2>Login info:</h2>
  {% if user_data %}
    <dl>
      <dt>Name</dt><dd>{{ user_data['name'] }}</dd>
      <dt>Email</dt><dd>{{ user_data['email'] }}</dd>
      <dt>Last 10 visits</dt><dd>
    {% for time in times %}
          <p>{{ time['timestamp'] }}</p>
        {% endfor %} </dd>
    </dl>
  {% elif error_message %}
    <p>Error: {{ error_message }}</p>
  {% endif %}
</div>

</body>
</html>

When I run this either on local host or while deployed I trigger the console.log message that tells me I need to add Firebase. In the console I also receive the following errors:

exports_auth.js:801 TypeError: Cannot read properties of undefined (reading 'INTERNAL')
    at li (utils.js:681)
    at new Ri (utils.js:1225)
    at rpchandler.js:371
    at exports_auth.js:801
    at exports_auth.js:801
    at firebase-auth.js:1
    at firebase-auth.js:1
exports_auth.js:801 Uncaught Error: Cannot instantiate firebase-auth.js - be sure to load firebase-app.js first.
    at exports_auth.js:801
    at firebase-auth.js:1
    at firebase-auth.js:11
script.js:12 Uncaught ReferenceError: firebase is not defined
    at script.js:12

My assumptions are that I either copy/pasted into wrong spot or that I need to have a bunch of CDN src's imported but I have tried about every combination I can think of. Any help appreciated.

Note: If it makes any difference, backend is flask, exactly copied and pasted from tutorial as shown in main.py.

like image 970
user1563247 Avatar asked Aug 31 '26 15:08

user1563247

1 Answers

You're not doing anything wrong - the documentation is out of date (I think as a result of Firebase 9 changes). I doubt this is very helpful 14 months later, but leaving the fix here for anybody who stumbles on this via Google.

main.py and script.js are fine as at this commit, but index.html needs an update. A modern Firebase snippet is going to end like this:

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);

but you'll need to change it to this (or update a heap of refs in the tutorial):

firebase.initializeApp(firebaseConfig);

You also need to add this script:

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

and move the typeof firebase === 'undefined' block further down (or just delete it).

Putting it all together, this version of index.html will work with all the other tutorial files - I've also reorganized the imports and deleted a heap of boilerplate comments. You just need to sub in firebaseConfig from your project as shown in http://console.firebase.google.com.

<!doctype html>
<html>
<head>
  <title>Datastore and Firebase Auth Example</title>
  <script src="{{ url_for('static', filename='script.js') }}"></script>
  <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <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 src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
    <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />
    <script>
    const firebaseConfig = {
    apiKey: "--redacted--",
    authDomain: "--redacted--",
    projectId: "--redacted--",
    storageBucket: "--redacted--",
    messagingSenderId: "--redacted--",
    appId: "--redacted--"
    };
    firebase.initializeApp(firebaseConfig);
    </script>
</head>
<body>

<h1>Datastore and Firebase Auth Example</h1>

<div id="firebaseui-auth-container"></div>

<button id="sign-out" hidden=true>Sign Out</button>

<div id="login-info" hidden=true>
  <h2>Login info:</h2>
  {% if user_data %}
    <dl>
      <dt>Name</dt><dd>{{ user_data['name'] }}</dd>
      <dt>Email</dt><dd>{{ user_data['email'] }}</dd>
      <dt>Last 10 visits</dt><dd>
    {% for time in times %}
          <p>{{ time['timestamp'] }}</p>
        {% endfor %} </dd>
    </dl>
  {% elif error_message %}
    <p>Error: {{ error_message }}</p>
  {% endif %}
</div>
</body>
</html>
like image 80
penitent_tangent Avatar answered Sep 02 '26 05:09

penitent_tangent
Sign in to Comment

Related questions

Dynamic html Table from an array values using javascript in Code.gs
Forking core eslint rules
Sending a MSAL token to backend using Axios
Execution Order in Event Loop

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!