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:
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.