I’m new to using firebase. I want users on my website to have to use a username, password, and email to sign up and sign in. In that way, in the future, I can make profiles and display usernames on a leaderboard. Currently they only need need to enter an email and password. How do i change this?
Heres my code
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-analytics.js";
import {
getAuth,
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
onAuthStateChanged,
signOut
} from "https://www.gstatic.com/firebasejs/10.11.1/firebase-auth.js"
const firebaseConfig = {
apiKey: "AIzaSyDW9v17UJm3ry7ccV7bz1To2NZdOdYBBV0",
authDomain: "tech-2024.firebaseapp.com",
databaseURL: "https://tech-2024-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = getAuth(app);
const userEmail = document.querySelector("#userEmail");
const userPassword = document.querySelector("#userPassword");
const authForm = document.querySelector("#authForm")
const content = document.querySelector("#content");
const signUpButton = document.querySelector("#signUpButton");
const signInButton = document.querySelector("#signInButton");
const signOutButton = document.querySelector("#signOutButton");
content.style.display ="none";
const userSignUp = async() => {
const signUpEmail =userEmail.value
const signUpPassword =userPassword.value
createUserWithEmailAndPassword ( auth, signUpEmail, signUpPassword)
.then (( userCredential) => {
const user = userCredential.user;
console.log( user);
alert (" your account has been created!");
} )
.catch ((error)=> {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorCode + errorMessage)
alert ( errorMessage);
} )
}
const userSignIn = async () => {
const signInEmail = userEmail.value;
const signInPassword = userPassword.value;
signInWithEmailAndPassword(auth, signInEmail, signInPassword)
.then((userCredential) => {
const user = userCredential.user;
alert("You have signed in");
window.location.href = "index.html"; // Redirect to index.html
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorCode + errorMessage);
alert(errorMessage);
});
};
const checkAuthState =async() => {
onAuthStateChanged(auth,user => {
if(user){
authForm.style.display ='none';
content.style.display = 'block';
}
else {
authForm.style.display ='block';
content.style.display = 'none';
}
})
}
const userSignOut = async() => {
signOut(auth).then(() => {
alert("You have signed out successfully!");
}).catch((error) => {})
}
onAuthStateChanged(auth, (user) => {
if(user) {
signOutButton.style.display = "block";
message.style.display = "block";
userName.innerHTML = user.displayName;
userEmail.innerHTML = user.email
} else {
signOutButton.style.display = "none";
message.style.display = "none";
}
})
signInButton.addEventListener('click', userSignIn);
signUpButton.addEventListener('click', userSignUp);
signOutButton.addEventListener('click', userSignOut);,
this the relevant html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>auth</title>
<style> body { text-align: center; background-color: lightblue }</style>
</head>
<body>
<div id="authForm">
<h2> sign up or sign in</h2>
<input type="email" placeholder="email" id="userEmail" >
<input type="password" placeholder="password" id="userPassword"> <br> <br>
<button id="signUpButton"> sign up</button>
<button id="signInButton"> sign in</button>
</div>
<div id="content">
<h2> suprise </h2>
<button id="signOutButton"> sign out</button>
</div>
<script type="module" src="auth.js">
</script>
</body>
</html>
i have tried changing the userSignUp and userSignIn code
const userSignUp = async () => {
const signUpEmail = userEmail.value;
const signUpPassword = userPassword.value;
const signUpUsername = userName.value; // Get the username input value
createUserWithEmailAndPassword(auth, signUpEmail, signUpPassword)
.then((userCredential) => {
const user = userCredential.user;
// Update display name with the provided username
user.updateProfile({
displayName: signUpUsername
}).then(() => {
console.log("User profile updated successfully!");
}).catch((error) => {
console.log(error.message);
});
console.log(user);
alert("Your account has been created!");
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorCode + errorMessage);
alert(errorMessage);
});
};
const userSignIn = async () => {
const signInEmail = userEmail.value;
const signInPassword = userPassword.value;
const signInUsername = userName.value; // Get the username input value
const credential = signInEmail ? signInWithEmailAndPassword(auth, signInEmail, signInPassword) : null;
if (credential) {
credential.then((userCredential) => {
const user = userCredential.user;
// Check if the username matches the one associated with the user
if (user.displayName === signInUsername) {
alert("You have signed in");
window.location.href = "index.html"; // Redirect to index.html
} else {
alert("Incorrect username or password");
}
}).catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorCode + errorMessage);
alert(errorMessage);
});
} else {
alert("Please enter your email and password");
}
};