The function onAuthStateChanged is unable to process multiple arguments simultaneously

// Verify if the user is currently logged in
  onAuthStateChanged(async (user: any, _next: any) => {
    if (user) {
      console.log(user);
    } else {
      const result = await signInWithPopup(auth, provider);
      console.log(result);
    }
  });

Upon running this code snippet, an error message stating

An argument for 'nextOrObserver' was not provided.
The function expected 2-4 arguments but only received 1.
. Despite appearing to have two declared arguments.

This issue with the code leads to a refusal from the TypeScript compiler to successfully compile it.

Answer №1

It seems that the function requires two arguments based on my observation.

The important detail to note is that onAuthStateChange actually needs 2 arguments, contrary to mistakenly thinking that your custom function should have 2 arguments as well. Your function should only accept one argument. What you might be overlooking is that you must pass the auth instance into onAuthStateChanged. Based on how you are invoking signInWithPopup, I assume that the variable auth holds this information. If not, you can utilize getAuth like so:

import { getAuth, onAuthStateChanged, User } from "firebase/auth"
// ...
onAuthStateChanged(
  auth, // or getAuth()
  async (user: User | null) => {
   // ...
  }
);

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

When defining a component decorator in Angular 2, mixing tabs and spaces can lead to an unhandled exception

After refactoring my Angular 2 component code and adding some tabulations, the code suddenly stopped working. Surprisingly, when I removed the tabs (spaces), it started working again. @Component({ templateUrl : './app.component.html', styl ...

The compatibility issues between Karma and Jasmine testing configurations cause errors during the Ionic packaging process

I've recently added testing to my ionic app using karma + jasmine, along with a typescript pre-processor. Below are the dependencies I have, most of which were added specifically for testing: "devDependencies": { "@ionic/app-scripts": "1.0.0", ...

Ways to create a method that can be overridden

Is there a way to declare a virtual method in TypeScript? I'm attempting to achieve something similar to the following: export abstract class SuperClass { public virtual enable(enableComponents: boolean): void { } } ...

Verify that the password is entered correctly in Angular2

My Angular2 form looks like this: this.registerForm = formBuilder.group({ 'name': ['', Validators.required], 'email': ['', Validators.compose([Validators.pattern("[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+&bso ...

Utilizing Angular Typescript for seamless HTML 5 drag and drop functionality

I am currently experimenting with HTML5 drag and drop functionality on an Angular application. I'm facing an issue and seeking some guidance. Below is the code snippet from my app.component.html file: <div> <p draggable="true" ondragstart= ...

How to Retrieve an Array from a Promise Using Angular 4 and Typescript

I am encountering difficulties when trying to store data from a returned promise. To verify that the desired value has been returned, I log it in this manner: private fetchData() { this._movieFranchiseService.getHighestGrossingFilmFranchises() ...

Utilizing getter and setter functions within a setter with a type guard

I need to implement a getter and setter in my class. The setter should accept a querySelector, while the getter is expected to return a new type called pageSections. The challenge I'm facing is that both the getter and setter must have the same argum ...

Tips for troubleshooting a React Native project built with Expo and utilizing TypeScript

I started a new Expo project with TypeScript integration. After launching the app using expo start, I noticed that the Chrome debugger only displays .js files at http://localhost:19001/debugger-ui/: https://i.stack.imgur.com/cmyy9.png How can I make sur ...

Troubleshooting npm install failure for firebase packages in Angular

Attempting to replicate the Angular project on my local machine: 1) Clone the project from Version Control 2) Run npm install 3) Installation fails Suspecting an issue with npm itself, I attempt to clear the cache using npm cache clear --force, but it ...

TypeScript anonymous class-type Higher Order Component (HOC)

Struggling with creating a generic Higher Order Component (HOC) due to type issues. Let's start with a simple example: class Abc extends React.Component<{}> { hello() { } render() { return <View /> } } Referenc ...

Find the identifier that does not currently exist in the collection of objects

There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...

Angular: Stop additional input from being processed in Child Component and disable Change Detection

Is there a way to limit the number of inputs a child input in Angular receives before stopping further changes? For example, I want the child input to accept only 3 updates from ngOnChanges and then ignore any subsequent ones. I am currently using an inpu ...

Angular Observable returning null results

After spending some time on this issue, I am still puzzled as to why I am consistently receiving an empty observable. Service: import { Injectable } from '@angular/core'; import { WebApiService } from './web-api-service'; import { Beha ...

Leveraging React Hooks to display a dynamic pie chart by fetching and mapping data from an API

I have a task where I need to fetch data from an API that returns an object containing two numbers and a list structured like this... {2, 1 , []} The project I'm currently working on utilizes 'use-global-hook' for managing state in Redux. T ...

Error: No default Firebase App named '[DEFAULT]' exists. Please remember to call Firebase App.initializeApp() to create the app (app/no-app). This issue is located at the app

Currently, I am in the process of learning how to integrate Firebase Functions into an Ionic + Angular project. My goal is to develop a custom function that retrieves all games from a collection and returns an array sorted by the "count" attribute. Initia ...

Syntax highlighting in VSCode does not seem to be functional when the ?? nullish coalescing operator is being utilized

Hello there! I've recently started using react.js with typescript on a new computer, but I've encountered an issue with syntax highlighting in VSCode. It seems that the problem arises when there's a double question mark (??) in the code, spe ...

How to optimize and reduce bundle size in Webpack using tree-shaking, babel-loader, TypeScript tsconfig target configuration, @babel/preset-env with modules set to false, and setting side

Looking to implement the tree-shaking feature of Webpack for es6-modules or ESM (.ejs)? Here's a detailed breakdown: My goal is to configure tree-shaking with Webpack v5 using babel-loader (adjustable from webpack.*.config.js), Babel v7 with @babel ...

Vuetify's v-data-table is experiencing issues with displaying :headers and :items

I'm facing an issue while working on a Vue project with typescript. The v-data-table component in my Schedule.vue file is not rendering as expected. Instead, all I can see is the image below: https://i.sstatic.net/AvjwA.png Despite searching extensi ...

Stop the Decimal in MUI TextField

Having trouble creating a customized Currency Input? You may be experiencing an issue where the textfield prevents the input of decimals. Take a look at the code below for possible solutions. main.ts const [_val, setVal] = React.useState(""); const h ...

Is it possible to convert several XLIFF files of different languages into JSON files using Angular?

I was looking to create a universal logic in a single XLIFF build that would allow access to all languages through JSON files. My goal was to find a way for the code to efficiently load multiple translations within one XLIFF build and execute these transl ...