Chatbox for website

[strawbs]

i'm trying to create a chatbox for our website but
when i try to register i get error email badly formatted
YES I'VE BEEN TRYING HARD TO FIGURE THEM OUT

error:
nexttick.js:33 Uncaught T {code: 'auth/invalid-email', message: 'The email address is badly formatted.', a: null}
goog.global.setTimeout(function() { throw exception; }, 0);

the js script i do have my api keys and everything else that goes with it,
i'm using firebase authentication as well.

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const db = firebase.firestore();

const loginBtn = document.getElementById('loginBtn');
const registerBtn = document.getElementById('registerBtn');
const sendMessage = document.getElementById('sendMessage');
const logoutBtn = document.getElementById('logoutBtn');
const chatContainer = document.getElementById('chat-container');
const authContainer = document.getElementById('auth-container');

// User login function
loginBtn.onclick = async () => {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
try {
await auth.signInWithEmailAndPassword(username, password);
authContainer.style.display = 'none';
chatContainer.style.display = 'block';
loadMessages();
} catch (error) {
alert(error.message);
}
};

// User registration function
registerBtn.onclick = async () => {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
try {
await auth.createUserWithEmailAndPassword(username, password); // Use username in place of email
alert('User registered successfully!');
} catch (error) {
alert(error.message);
}
};

// Send message function
sendMessage.onclick = async () => {
const msg = document.getElementById('messageInput').value;
const user = auth.currentUser;
if (user) {
await db.collection('messages').add({
username: user.email,
message: msg,
timestamp: firebase.firestore.FieldValue.serverTimestamp()
});
document.getElementById('messageInput').value = '';
}
};

// Logout function
logoutBtn.onclick = () => {
auth.signOut();
authContainer.style.display = 'block';
chatContainer.style.display = 'none';
};

// Load messages function
const loadMessages = () => {
db.collection('messages').orderBy('timestamp')
.onSnapshot(snapshot => {
const messagesDiv = document.getElementById('messages');
messagesDiv.innerHTML = '';
snapshot.forEach(doc => {
const data = doc.data();
messagesDiv.innerHTML += `<p><strong>${data.username}:</strong> ${data.message}</p>`;
});
});
};

// Check authentication state
auth.onAuthStateChanged(user => {
if (user) {
authContainer.style.display = 'none';
chatContainer.style.display = 'block';
loadMessages();
} else {
authContainer.style.display = 'block';
chatContainer.style.display = 'none';
}
});