API Embed Grafana

Hello, I need your help.

I have created a website, and I want each user who logs in to see a dashboard displaying the analysis of their own information. How can I achieve this? Do I need to use an API? Do I need tokens? Could someone teach me?

<!DOCTYPE html>
<html lang="es">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Iniciar sesión</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <div class="form-container">
    <h2>Iniciar sesión</h2>
    <p id="notification"></p>
    <form id="loginForm">
      <label for="username">Usuario:</label>
      <input type="text" id="username" required>

      <label for="password">Contraseña:</label>
      <input type="password" id="password" required>

      <input type="submit" value="Iniciar sesión">

  <div id="dashboard-container">

  <script src="main.js"></script>

document.addEventListener('DOMContentLoaded', function () {
    const credenciales = { username: "Usuario1", password: "Contraseña1" };
    const loginForm = document.getElementById('loginForm');
    const username = document.getElementById('username');
    const password = document.getElementById('password');
    const dashboardContainer = document.getElementById('dashboard-container');
    const notification = document.getElementById('notification');
    loginForm.addEventListener('submit', function (e) {
      if (username.value === credenciales.username && password.value === credenciales.password) {
        dashboardContainer.style.display = "block";
        notification.textContent = "";
      } else {
        notification.textContent = "Credenciales incorrectas. Por favor, inténtalo nuevamente.";