• Head over to the Firebase Console.
• Either start a new project or pick one you already have.
• In the Firebase Console, go to Authentication and turn on the sign-in methods you want (like Email/Password, Google, etc.).

• First, install the Firebase SDK:
  ```shell
  npm install firebase
  ```

• Then, set up Firebase in your app:
  ```javascript
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "firebase/app";
  import { getAuth } from "firebase/auth";
  import { getFirestore } from "firebase/firestore";

  // Your web app's Firebase configuration
  const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  const db = getFirestore(app);
  ```

• Go to Firestore Database in the Firebase Console.
• Click on Rules and set up rules to control access based on user roles:
  ```plaintext
  service cloud.firestore {
  match /databases/{database}/documents {
  match /{document=**} {
  allow read, write: if request.auth != null &&
  get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role == "admin";
  }
  }
  }
  ```

• Implement user registration and login:
  ```javascript
  import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";

  // Register new user
  const registerUser = async (email, password) => {
  try {
  const userCredential = await createUserWithEmailAndPassword(auth, email, password);
  const user = userCredential.user;
  // Initialize user role in Firestore
  await setDoc(doc(db, "users", user.uid), {
  email: user.email,
  role: "user" // Default role
  });
  console.log("User registered:", user);
  } catch (error) {
  console.error("Error registering user:", error);
  }
  };

  // Log in existing user
  const loginUser = async (email, password) => {
  try {
  const userCredential = await signInWithEmailAndPassword(auth, email, password);
  console.log("User logged in:", userCredential.user);
  } catch (error) {
  console.error("Error logging in user:", error);
  }
  };
  ```

• Show different UI components based on the user role:
  ```javascript
  import { onAuthStateChanged } from "firebase/auth";
  import { doc, getDoc } from "firebase/firestore";

  const checkUserRole = async (user) => {
  if (user) {
  const userDoc = await getDoc(doc(db, "users", user.uid));
  const userRole = userDoc.data().role;
  if (userRole === "admin") {
  // Show Admin UI
  showAdminUI();
  } else {
  // Show User UI
  showUserUI();
  }
  } else {
  // Show Public UI
  showPublicUI();
  }
  };

  onAuthStateChanged(auth, (user) => {
  checkUserRole(user);
  });

  function showAdminUI() {
  console.log("Admin UI");
  }
  function showUserUI() {
  console.log("User UI");
  }
  function showPublicUI() {
  console.log("Public UI");
  }
  ```

• To change user roles, use Firestore and a secure backend function, or handle it directly in Firestore:
  ```javascript
  import { doc, updateDoc } from "firebase/firestore";

  const updateUserRole = async (userId, newRole) => {
  try {
  await updateDoc(doc(db, "users", userId), {
  role: newRole
  });
  console.log("User role updated");
  } catch (error) {
  console.error("Error updating user role:", error);
  }
  };

  // Example usage:
  updateUserRole("userUID123", "admin");
  ```

• Use Firebase Cloud Functions to add server-side logic with role checks:
  ```javascript
  const { getAuth } = require('firebase-admin/auth');
  const { getFirestore } = require('firebase-admin/firestore');
  const functions = require('firebase-functions');
  const admin = require('firebase-admin');

  admin.initializeApp();

  exports.secureFunction = functions.https.onCall(async (data, context) => {
  if (!context.auth) {
  throw new functions.https.HttpsError('unauthenticated', 'User is not authenticated');
  }

  const userDoc = await getFirestore().collection('users').doc(context.auth.uid).get();
  const userRole = userDoc.data().role;

  if (userRole !== 'admin') {
  throw new functions.https.HttpsError('permission-denied', 'User does not have the necessary permissions');
  }

  // Function logic for admin users
  return { message: "This is a secure function" };
  });
  ```

By following these steps, Firebase Authentication with role-based user management can be implemented effectively.