I'm sorry, the system can't locate the authentication property because it is undefined

I'm currently facing an issue while incorporating firebase-ui into a VueJS project.

My API credentials are stored in a file named config.js

export default {
apiKey: "*****",
authDomain: "*****.firebaseapp.com",
databaseURL: "https://my-project.firebaseio.com",
projectId: "*****",
storageBucket: "*****",
messagingSenderId: "73482979",
appId: "1:685818581200:web:1f5ebjnfsdjnj",
measurementId: "G-BHJK6N67PZ"
};

The config.js file is imported into my init.js where the entire firebase setup is completed:

import config from "./config";
import firebase from "firebase";
import firebaseui from "firebaseui";
import "firebase/auth";
import "firebase/firestore";

const app = firebase.initializeApp(config);
const auth = firebase.auth();
const firestore = app.firestore();

const authUi = new firebaseui.auth.AuthUI(auth); //An error occurs at this point

export default app;
export { auth, authUi, firestore };

Unfortunately, I've been stuck for several days now with the error message -> Cannot read property 'auth' of undefined'. I have followed the documentation (https://firebase.google.com/docs/auth/web/firebaseui#before_you_begin) meticulously, and have even upgraded to the latest firebaseui version

"firebaseui": "4.7.0"
as specified in the package.json file.

Any assistance on how to resolve this issue would be greatly appreciated.

Answer №1

With the release of Firebase 9.0.0 on August 25, 2021, the recommended approach has been updated.

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

This code snippet allows you to utilize the backward compatible interface effectively.

For a detailed guide on upgrading to the latest modular version, visit https://firebase.google.com/docs/web/modular-upgrade

Answer №2

I encountered the same issue and after several hours of troubleshooting, I managed to resolve it by modifying my configuration as follows:

import firebase from 'firebase/app';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';

If you are using a firebase version higher than 7, make sure to import from 'firebase/app' instead of 'firebase'.

Additionally, ensure that you import * from 'firebaseui' rather than importing only firebaseui.

Here is an excerpt from my packages.json:

"dependencies": {
  "firebase": "^8.8.0-202162022140",
  "firebaseui": "^4.8.1",
},

Just a heads up, my project is built using Vue3.js.

Answer №3

The Firebase client JS library is being imported incorrectly. Make sure to follow the module bundlers documentation for proper instructions:

// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

Remember not to import from "firebase", but instead import from "firebase/app", following the SDK version conventions.

It's possible that the documentation for firebaseui is outdated. You can provide feedback by using the "send feedback" button located at the top of the documentation page.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the best practices for utilizing createHash('sha1') effectively in node.js?

Exploring the intricacies of a login system using React, MySQL, and Node.JS has been an interesting journey. Here's a glimpse of what I've accomplished so far: Presenting my router setup: const express = require('express') const app = ...

How can we showcase values from a selected item using Laravel and Vue.js?

Looking for assistance with Vuejs, as I am still learning the ropes. I have a form selector and depending on the selected item, I need to display information from that item below the form and send its id to my form's request. To visually explain: h ...

What causes the exception in JavaScript to be an empty object?

try { let temporary = null; temporary.split(','); } catch (error) { Logger().info('caught error: ', error, error.constructor); } output: caught error: {} undefined I attempted to use JSON.stringify and encountered the sa ...

Transforming a vertical table into a horizontal layout

I'm facing an issue with transforming the database object for table display. My database contains a table structured like this. name total date Awoc1 100 9/14/2022 Awoc1 200 9/15/2022 Awoc1 300 9/16/2022 Awoc2 100 9/14/2022 Awoc2 ...

Obtaining the jqXHR object from a script request loaded within the <head> tag using the <script> tag

Is it possible to retrieve the jqXHR object when a script loaded from a script tag within the head tag? function loadScript(url){ const script = document.createElement("script"); script.src = url; // This line will load the script in the ...

A step-by-step guide to creating a clipboard stream using guacamole-common.js

When utilizing Guacamole.client.createClipboardStream to generate a clipboard stream and sending the stream on paste event, I noticed that the remote clipboard remains empty. const customStream = client.createClipboardStream("text/plain"); cust ...

What is the reason behind Istanbul's code coverage reporting a switch statement as uncovered even though all conditional paths are covered?

Within my node.js application, there is a class that includes a getter method with a significant switch statement. Rather than the simple example provided below, this switch statement contains numerous unreleased product-specific values replacing 'a&a ...

Issue with Bootstrap Carousel: all elements displayed at once

I'm in the process of building a carousel. I have set up the structure, but I only want five blocks to be visible initially, with the sixth block appearing after clicking an arrow. How can I achieve this? My strategy: (adopted from here) img{ b ...

Ensure that the textbox remains valid when the reset button is clicked in Bootstrap

After implementing the code for bootstrap textbox and textarea, I encountered an issue when using the reset button. When entering an invalid shop name followed by a valid address and clicking on the Reset button, it resets the form. However, if I then only ...

Allowing HTML attributes in reusable components with Vue TSX: A guide on informing Typescript

Imagine I have a custom input component: import { defineComponent } from "@vue/runtime-core" export default defineComponent({ inheritAttrs: false, setup(props, { attrs }) { return () => ( <div> ...

Add a JavaScript library to the header directly from the body of a webpage, ensuring it is exclusive to a single

I am using the Google Charts JS library on a single page within my project, with external and global headers and footers. The head tags are located in a head.php file, where all required JS libraries are included. The structure of my pages is as follows: ...

Error with JavaScript callback functions

After creating a POST route, I encountered unexpected behavior in the code below. The message variable does not display the expected output. app.post("/", function (req, res, error) { var message = ""; tableSvc.createTable("tableName", function (error ...

JSON input in react.js sadly ended abruptly

I am encountering a problem when I attempt to submit the form. Unhandled Rejection (SyntaxError): Unexpected end of JSON input Whenever I press the submit button, this error occurs, here is the code snippet: onButtonSubmit = () => { this.setState({ ...

Enable search functionality for jQuery Select2 values that have been formatted by a formatter function

Trying to use a formatter with select2 for better alignment of code and description elements, but the plugin seems to be searching based only on the description rather than the entire text. This may be because it's only looking at the original <opt ...

Utilizing AngularJS 1.X to implement filters on transformed information

When using the combination of ng-repeat and a filter, it creates a highly effective search function. However, once the data is converted, the use of a filter for searching becomes limited. For Instance JavaScript $scope.ints = [0,1,2,4,5,6,7,8,9, ..., 9 ...

React Typescript: exploring the power of dynamic types

Can dynamic typing be implemented? The JSON structure I am working with looks like this: { "fieldName": "Some text", "type": String, "inputType": "text" }, { "fieldName": "Some bool&q ...

Utilize the v-for key attribute to refresh a specific row within a list || Opt for composite values as the unique key instead of using an index

Recently, I encountered a challenging situation where I needed to assign a unique value to the :key in my v-for. Despite not having a distinct value available, using the index as the :key did not resolve the issue. My array for the v-for consists of object ...

Select a random object from a document and dispatch it. A Discord bot

I'm looking to enhance my bot by adding a command that retrieves a random quote from a JSON file and displays it in chat. I've already figured out how to do this using an array, but I'm not sure how to pull the quotes from a file. EDIT: ...

Manipulate an image by hiding it, altering its contents, and then displaying it

I am seeking the most effective method to accomplish the following task: $("#some-image").fadeOut(); $("#some-image").attr("src", "new-src.png"); $("#some-image").fadeIn(); For timing purposes, the code below is a step closer, but it still needs improvem ...

Oops! An error occurred: fs.readFileSync is not a valid function to perform the Basic

I'm facing a dilemma - I have a relatively simple app (I'm still new to Node): App.js import * as RNFS from 'react-native-fs'; var config_full; // readFile(filepath: string, encoding?: string) RNFS.readFile('./config.toml', ...