Create the Main JavaScript File

Create an app.js file to handle Firebase Authentication and Realtime Database interactions:

// app.js
import { initializeApp } from "firebase/app";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
import { getDatabase, ref, set, push, onValue } from "firebase/database";
import firebaseConfig from './firebase-config.js';

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const database = getDatabase(app);

// Authentication functions
function signUp() {
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const user = userCredential.user;
      console.log('Sign Up Successful:', user);
    })
    .catch((error) => {
      console.error('Error signing up:', error.message);
    });
}

function logIn() {
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const user = userCredential.user;
      console.log('Log In Successful:', user);
    })
    .catch((error) => {
      console.error('Error logging in:', error.message);
    });
}

// Realtime Database functions
function sendMessage() {
  const message = document.getElementById('message').value;
  const messagesRef = ref(database, 'messages/');
  const newMessageRef = push(messagesRef);
  set(newMessageRef, {
    text: message
  });
  document.getElementById('message').value = '';
}

function displayMessages() {
  const messagesRef = ref(database, 'messages/');
  onValue(messagesRef, (snapshot) => {
    const messages = snapshot.val();
    const messagesDiv = document.getElementById('messages');
    messagesDiv.innerHTML = '';
    for (const key in messages) {
      const message = messages[key].text;
      const messageElement = document.createElement('p');
      messageElement.textContent = message;
      messagesDiv.appendChild(messageElement);
    }
  });
}

// Initialize display messages function
displayMessages();

// Expose functions to the global scope
window.signUp = signUp;
window.logIn = logIn;
window.sendMessage = sendMessage;

Explanation:

In the above code, The JavaScript file is used to interact with Firebase services, specifically Firebase Authentication and Firebase Realtime Database. It initializes Firebase using the provided configuration, sets up authentication functions for signing up and logging in users, and defines functions for sending and displaying messages in the real-time database. The functions are exposed to the global scope so they can be called from the HTML file.

Firebase is a powerful platform that offers a range of services to enhance our web application. From authentication to real-time database storage, Firebase provides everything you need to create a dynamic and engaging user experience.

In this guide, we will go through the process of setting up Firebase in a JavaScript project and integrating Firebase Authentication and Realtime Database into a simple web application.