Cannot create property '_canInitEmulator' on string 'namangarg802@gmail.com'

Viewed 6760

I am using firebase authentication in my react application for sign-in users but when i entered my email which is 'namangarg82@gmail.com' and Click on Sign in button it shows an error:- Cannot create property '_canInitEmulator' on string 'namangarg82@gmail.com' My Signup.js file

import React, { useContext, useRef,useState} from 'react'
import { Form, Button, Card,Alert } from 'react-bootstrap'
import { useAuth } from './AuthContext';
import { AuthProvider } from './AuthContext';
export function Signup() {
    const emailRef=useRef();
    const passwordRef=useRef();
    const passwordConfirmRef=useRef();
    const { signup } =useAuth()
    const [error,setError]=useState('')
    const [loading,setLoading]=useState(false)
    console.log(error,"12",loading);
    console.log(useAuth(),"ji")
    // const{a}=useContext(AuthProvider);
    // console.log(a);
    async function handleSubmit(e){
        e.preventDefault()
        if(passwordRef.current.value!==passwordConfirmRef.current.value)
        {
            console.log(passwordRef.current.value);
            return setError("Passwords do not match")
           
        }
        try{
            console.log("try");
            setLoading(true);
            setError("");
            console.log(emailRef.current.value,passwordRef.current.value);
            await signup(emailRef.current.value,passwordRef.current.value)
        }  catch(err){
            console.log("hi",err);
            setError("Failed to create an account")
        }
        setLoading(false);
        console.log(loading,"8");

    }
    return (
       
        <div>
            <Card>
                <Card.Body className="text-center mb-4">
                    <h2>SignUp</h2>
                    {error && <Alert variant="danger">{error}</Alert>}
                    <Form onSubmit={(e)=>{handleSubmit(e)} }>
                        <Form.Group id="email">
                            <Form.Label>Email</Form.Label>
                            <Form.Control type="email" ref={emailRef}>
                            </Form.Control>
                        </Form.Group>
                        <Form.Group id="password">
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="password" ref={passwordRef}>
                            </Form.Control>
                        </Form.Group>
                        <Form.Group id="passwordConfirm">
                            <Form.Label>Password Confirmation</Form.Label>
                            <Form.Control type="password" ref={passwordConfirmRef}>
                            </Form.Control>
                        </Form.Group>
                        <Button disabled={loading} type="submit" className="w-100">Sign Up</Button>
                    </Form>
                </Card.Body>
            </Card>

        </div>
    )
}

export default Signup

My Authcontext file

import React,{createContext,useContext,useState,useEffect} from 'react'
import {auth} from '../Firebase'
import { createUserWithEmailAndPassword} from "firebase/auth";
// const AuthContext =React.createContext()
const AuthContext =createContext()
export function useAuth(){
    return useContext(AuthContext)
}
export function AuthProvider({children}) {
    const [currentUser,setCurrentUser]=useState()
    function signup(email,password){
        return createUserWithEmailAndPassword(email,password)
    }
    useEffect(() => {
      const unsuscribe =  auth.onAuthStateChanged(user=>{
            setCurrentUser(user)
        })
      return unsuscribe
    }, [])
    
    const value={
        currentUser,
        signup,
        
    }
    return (
        <div>
            < AuthContext.Provider value={value}>
            {children}
            </AuthContext.Provider>
        </div>
    )
}

export default AuthContext

and my firebase setup is

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "AIzaSyDLlZn08b5PlDpiqTQNxkyfpOPpz_6Gh8o",
  authDomain: "portfolio-279ef.firebaseapp.com",
  projectId: "portfolio-279ef",
  storageBucket: "portfolio-279ef.appspot.com",
  messagingSenderId: "778898179742",
  appId: "1:778898179742:web:7beb09bf995e5041de1d8f"
};
const Firebaseapp = initializeApp(firebaseConfig);
export const auth=getAuth();
export default  Firebaseapp;

Please help me

3 Answers

With new firebase functional approach, you need to include auth parameter like this:

createUserWithEmailAndPassword(auth, email, password)

In the firebase 9.0^, you try with this, in almost all methods, the auth method is inserted first, and import from your firebase setup.

//With your app initialized
import {getAuth} from 'firebase/auth'
...
const auth = getAuth()
return createUserWithEmailAndPassword(auth, email,password)

Source: https://firebase.google.com/docs/auth/web/password-auth?hl=pt

In your AuthContext file, createUserWithEmailAndPassword must include auth too:

createUserWithEmailAndPassword(auth, email, password)
Related