Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot create property '_canInitEmulator'

I am using firebase authentication in my react application for sign-in users.
When i entered my email which is '[email protected]' and Click on Sign in button it shows an error:

- Cannot create property '_canInitEmulator' on string '[email protected]'

I need help with this error.

Code samples
Signup.js

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)
    // const{a}=useContext(AuthProvider);
    async function handleSubmit(e){
        e.preventDefault()
        if(passwordRef.current.value!==passwordConfirmRef.current.value)
        {
            return setError("Passwords do not match") 
        }
        try{
            setLoading(true);
            setError("");
            await signup(emailRef.current.value,passwordRef.current.value)
        }  catch(err){
            setError("Failed to create an account")
        }
        setLoading(false);
    }
    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

Authcontext

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

firebase configuration

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

const firebaseConfig = {
  apiKey: "xxxxx",
  authDomain: "xxxxx.firebaseapp.com",
  projectId: "portfolio-279ef",
  storageBucket: "xxxxx.appspot.com",
  messagingSenderId: "7xxxxx2",
  appId: "1:7xxx2:web:7xxxf"
};
const Firebaseapp = initializeApp(firebaseConfig);
export const auth=getAuth();
export default  Firebaseapp;
like image 483
Naman Garg Avatar asked Mar 02 '26 10:03

Naman Garg


1 Answers

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

createUserWithEmailAndPassword(auth, email, password)

like image 192
Kostas Avatar answered Mar 04 '26 22:03

Kostas



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!