I get to the last step of "Add user sign-in (RSVP)" of the "Get to know Firebase for web" codelab and nothing happens when I click the RSVP button, no errors appear on the console of stackblitz. When I load the page externally so I can use Developer Tools (Chrome) I see this error when I refresh the page. I'm not sure if this is the error that is the root cause or if it is a result of me running outside of the stackblitz environment.
Uncaught (in promise) TypeError: firebase.initializeApp(...).auth is not a function
at new Cn (npm.js:418)
at main (index.js:68)
at Object.eval (index.js:74)
at eval (index.js:76)
at eval (index.js:77)
at eval (<anonymous>)
at Qt (webcontainer.3e00eb9f21511f88f1bf57f5f6810512f74d871c.js:15)
at webcontainer.3e00eb9f21511f88f1bf57f5f6810512f74d871c.js:15
at U (webcontainer.3e00eb9f21511f88f1bf57f5f6810512f74d871c.js:15)
at webcontainer.3e00eb9f21511f88f1bf57f5f6810512f74d871c.js:15
In any case, when I click the RSVP button, nothing happens. No errors other than the one above upon loading the page. Any clue what I am doing wrong? Or is the codelab not ready for primetime?
Here is the index.js code:
// Import stylesheets
import './style.css';
// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';
// Add the Firebase products and methods that you want to use
import { getAuth, EmailAuthProvider } from 'firebase/auth';
import {} from 'firebase/firestore';
import * as firebaseui from 'firebaseui';
// Document elements
const startRsvpButton = document.getElementById('startRsvp');
const guestbookContainer = document.getElementById('guestbook-container');
const form = document.getElementById('leave-message');
const input = document.getElementById('message');
const guestbook = document.getElementById('guestbook');
const numberAttending = document.getElementById('number-attending');
const rsvpYes = document.getElementById('rsvp-yes');
const rsvpNo = document.getElementById('rsvp-no');
let rsvpListener = null;
let guestbookListener = null;
let db, auth;
async function main() {
// Add Firebase project configuration object here
const firebaseConfig = {
apiKey: "AIzaSyCxoBt3Lv6Bzds87vmjfOibrm-NQFLM-II",
authDomain: "fir-web-codelab-806fd.firebaseapp.com",
projectId: "fir-web-codelab-806fd",
storageBucket: "fir-web-codelab-806fd.appspot.com",
messagingSenderId: "423209299021",
appId: "1:423209299021:web:ea06da7e0e0efe22700004"
};
initializeApp(firebaseConfig);
auth = getAuth();
// FirebaseUI config
const uiConfig = {
credentialHelper: firebaseui.auth.CredentialHelper.NONE,
signInOptions: [
// Email / Password Provider.
EmailAuthProvider.PROVIDER_ID
],
callbacks: {
signInSuccessWithAuthResult: function(authResult, redirectUrl) {
// Handle sign-in.
// Return false to avoid redirect.
return false;
}
}
};
const ui = new firebaseui.auth.AuthUI(auth);
// Listen to RSVP button clicks
startRsvpButton.addEventListener("click",
() => {
ui.start("#firebaseui-auth-container", uiConfig);
});
}
main();
And here is the index.html:
<head>
<meta charset="utf-8">
<title>Firebase Meetup</title>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto:300,400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
<!-- <img src="https://firebasestorage.googleapis.com/v0/b/fir-images-a61c9.appspot.com/o/firestore.png?alt=media&token=56d039dc-4a6c-477b-a153-a4bb8234646f" /> -->
<!-- <img src="https://firebasestorage.googleapis.com/v0/b/fir-images-a61c9.appspot.com/o/hosting.png?alt=media&token=57c8adb6-08c4-43f7-9395-4c299896a36c" /> -->
<img src="https://firebasestorage.googleapis.com/v0/b/fir-images-a61c9.appspot.com/o/codelab.png?alt=media&token=f45f808c-ce40-4b34-944c-8d8fac00e13d" />
<section id="event-details-container">
<h1>Firebase Meetup</h1>
<p><i class="material-icons">calendar_today</i> October 30</p>
<p><i class="material-icons">location_city</i> San Francisco</p>
<!-- ADD THE RSVP BUTTON HERE -->
<button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>
<section id="description-container">
<h2>What we'll be doing</h2>
<p>Join us for a day full of Firebase Workshops and Pizza!</p>
</section>
<section id="guestbook-container">
</section>
</div>
</body>
Thanks for any help
