I'm trying to get a very basic email/password sign-in working on my firebase website.
I must be importing firebaseui wrong. I'm attempting to import it as a CDN like so:
import * as firebaseui from '.1.0/firebase-ui-auth.js';
This is because I'm not using a bundler. I'm trying to mimic importing it as a namespace like all the tutorials show (import * as firebaseui from 'firebaseui';
). When importing as a cdn like above and then running this code:
// Firebase Config
const firebaseConfig = {
// ...
};
const app = initializeApp(firebaseConfig);
const authInstance = getAuth();
// FirebaseUI config
const uiConfig = {
credentialHelper: firebaseui.auth.CredentialHelper.NONE,
signInOptions: [
EmailAuthProvider.PROVIDER_ID,
],
callbacks: {
signInSuccessWithAuthResult: function (authResult, redirectUrl) {
return false;
},
},
};
// Initialize the FirebaseUI widget using Firebase:
const ui = new firebaseui.auth.AuthUI(authInstance);
I get this console error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'CredentialHelper')
Commenting out the credentialHelper line also results in a similar error, but with the firebaseui.auth.AuthUI(authInstance)
line.
However:
If I instead source the firebaseui script and run my script directly in the html file...
<!-- ...head... -->
<link type="text/css" rel="stylesheet" href=".1.0/firebase-ui-auth.css" />
<script src=".1.0/firebase-ui-auth.js"></script>
<script type="module">
import { initializeApp } from '.1.0/firebase-app.js';
import { collection, getDocs, getFirestore } from '.1.0/firebase-firestore.js';
import { EmailAuthProvider, getAuth, signOut, onAuthStateChanged } from '.1.0/firebase-auth.js';
// Initial variables
let db, auth;
// ...
async function main() {
// function that runs on page load
// Firebase Config
const firebaseConfig = {
// ...
};
// Firebase/Firestore variables
const app = initializeApp(firebaseConfig);
const authInstance = getAuth();
const db = getFirestore(app);
// 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;
},
},
};
// Initialize the FirebaseUI widget using Firebase:
const ui = new firebaseui.auth.AuthUI(authInstance);
//...
This works perfectly and I get the email login section.
What am I doing wrong in the first attempt? I'd prefer to keep the script as a separate js file.
Thanks and sorry if I misuse some terms, I'm very new to all of this.