FIrebase. User being registered as anonymous - reactjs

Question

i have a simple React signup application with firebase authentication. I'm using email and password to register users. Everything is working fine but the user is registered as (anonymous). I have enabled email/password authentication in firebase and I'm using createUserWithEmailAndPassword() function.
import React from "react";
import Card from "#mui/material/Card";
import TextField from "#mui/material/TextField";
import Typography from "#mui/material/Typography";
import Grid from "#mui/material/Grid";
import Box from "#mui/material/Box";
import CardContent from "#mui/material/CardContent";
import Button from "#mui/material/Button";
import Alert from "#mui/material/Alert";
import { auth } from "./../firebase";
import { Link } from "react-router-dom";
import GoogleButton from "react-google-button";
import { GoogleAuthProvider, signInWithRedirect } from "firebase/auth";
export const Signup: React.FC = () => {
const emailRef = React.useRef<any>();
const passwordRef = React.useRef<any>();
const passwordConfirmRef = React.useRef<any>();
const [error, setError] = React.useState("");
const [loading, setLoading] = React.useState<boolean>(false);
const googleSignIn = () => {
const provider = new GoogleAuthProvider();
// signInWithPopup(auth, provider);
signInWithRedirect(auth, provider);
};
async function handleSubmit(e: any) {
e.preventDefault();
if (passwordRef.current.value !== passwordConfirmRef.current.value) {
return setError("Passwords do not match");
}
try {
setError("");
setLoading(true);
await auth.createUserWithEmailAndPassword(
emailRef.current!.value,
passwordRef.current!.value
);
} catch {
setError("Failed to create an account");
}
setLoading(false);
}
const handleGoogleSignIn = async () => {
try {
await googleSignIn();
} catch (error) {
console.log(error);
}
};
return (
<>
<Card sx={{ width: "400px" }}>
<CardContent>
<Typography textAlign="center" variant="h4" m={2}>
Sign Up
</Typography>
{error && (
<Alert severity="error" sx={{ marginBottom: 2 }}>
Passwords do not match
</Alert>
)}
<form onSubmit={handleSubmit}>
<Grid
container
direction="column"
justifyContent="center"
alignItems="stretch"
gap={2}
>
<Grid xs={12} sm={6} item>
<TextField
label="Email"
type="email"
autoComplete="email"
placeholder="Enter your email"
variant="outlined"
fullWidth
required
ref={emailRef}
/>
</Grid>
<Grid xs={12} sm={6} item>
<TextField
label="New Password"
type="password"
autoComplete="new-password"
placeholder="New Password"
variant="outlined"
fullWidth
required
ref={passwordRef}
/>
</Grid>
<Grid xs={12} sm={6} item>
<TextField
label="Confirm Password"
type="password"
autoComplete="new-password"
placeholder="Confirm New Password"
variant="outlined"
fullWidth
required
ref={passwordConfirmRef}
/>
</Grid>
</Grid>
<Button
type="submit"
variant="contained"
sx={{ marginTop: 2 }}
fullWidth
disabled={loading}
>
Sign Up
</Button>
</form>
</CardContent>
</Card>
<Box component="div" marginTop={2} textAlign="center">
<GoogleButton
style={{ width: "100%", marginBottom: 15 }}
onClick={handleGoogleSignIn}
/>
<Typography
variant="body1"
component="a"
href="#"
sx={{ textDecoration: "none" }}
>
<Link to="/login" style={{ textDecoration: "none" }}>
Already have an account? Log in
</Link>
</Typography>
</Box>
</>
);
};

Answer 1

According to the docs you should be passing the auth as the first prop in createUserWithEmailAndPassword(auth, email, password): https://firebase.google.com/docs/auth/web/password-auth#create_a_password-based_account:~:text=createUserWithEmailAndPassword(auth%2C%20email%2C%20password)
Also, make sure your email and password contain values and are not undefined.
try {
setError("");
setLoading(true);
const auth = getAuth();
await auth.createUserWithEmailAndPassword(
auth,
emailRef.current!.value,
passwordRef.current!.value
);
} catch {
setError("Failed to create an account");
}