• Edit
  • Download
  • <!DOCTYPE html>
    <html class="zg-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid: Firestore Auth</title>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
      <style>
        body {
          background: #e6e6e6;
        }
    
        zing-grid[loading] {
          height: 148px;
        }
      </style>
    </head>
    
    <body>
      <button id="login">Login</button>
      <button id="logout">Logout</button>
      <br><br>
      <zing-grid editor-controls pager caption="Adapter">
        <zg-data adapter="firebaseSDK">
          <zg-param name="collection" value="employees"></zg-param>
        </zg-data>
        <zg-colgroup>
          <zg-column index="name"></zg-column>
          <zg-column index="city"></zg-column>
        </zg-colgroup>
      </zing-grid>
    
      <!-- The core Firebase JS SDK is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-firestore.js"></script>
    
      <script>
        const zgRef = document.querySelector('zing-grid');
    
        // Your web app's Firebase configuration
        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        var firebaseConfig = {
          apiKey: "AIzaSyCao96H2-ZhTPpucwZKss8tF-zjC2F2Mwc",
          authDomain: "zing-grid-demo.firebaseapp.com",
          databaseURL: "https://zing-grid-demo.firebaseio.com",
          projectId: "zing-grid-demo",
          storageBucket: "zing-grid-demo.appspot.com",
          messagingSenderId: "144536649424",
          appId: "1:144536649424:web:58dcce9b221f0102dda8d5",
          measurementId: "G-FMNYY0H0B4"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        const auth = firebase.auth();
    
        const logout = document.querySelector('#logout');
        auth.signOut();
        logout.style.display = "none";
    
        const login = document.querySelector('#login');
    
        logout.addEventListener('click', (e) => {
          e.preventDefault();
          auth.signOut();
          logout.style.display = "none";
          login.style.display = "";
          zgRef.refresh();
        });
    
        login.addEventListener('click', (e) => {
          e.preventDefault();
          auth.signInWithEmailAndPassword('demo.user@zingsoft.com', 'zingdemo').then((cred) => {
            login.style.display = "none";
            logout.style.display = "";
            zgRef.refresh();
          });
        });
      </script>
    </body>
    
    </html>
    
    </html>
    <!DOCTYPE html>
    <html class="zg-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid: Firestore Auth</title>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    </head>
    
    <body>
      <button id="login">Login</button>
      <button id="logout">Logout</button>
      <br><br>
      <zing-grid editor-controls pager caption="Adapter">
        <zg-data adapter="firebaseSDK">
          <zg-param name="collection" value="employees"></zg-param>
        </zg-data>
        <zg-colgroup>
          <zg-column index="name"></zg-column>
          <zg-column index="city"></zg-column>
        </zg-colgroup>
      </zing-grid>
    
      <!-- The core Firebase JS SDK is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-firestore.js"></script>
    
    </body>
    
    </html>
    
    </html>
    body {
      background: #e6e6e6;
    }
    const zgRef = document.querySelector('zing-grid');
    
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    var firebaseConfig = {
      apiKey: "AIzaSyCao96H2-ZhTPpucwZKss8tF-zjC2F2Mwc",
      authDomain: "zing-grid-demo.firebaseapp.com",
      databaseURL: "https://zing-grid-demo.firebaseio.com",
      projectId: "zing-grid-demo",
      storageBucket: "zing-grid-demo.appspot.com",
      messagingSenderId: "144536649424",
      appId: "1:144536649424:web:58dcce9b221f0102dda8d5",
      measurementId: "G-FMNYY0H0B4"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    const auth = firebase.auth();
    
    const logout = document.querySelector('#logout');
    auth.signOut();
    logout.style.display = "none";
    
    const login = document.querySelector('#login');
    
    logout.addEventListener('click', (e) => {
      e.preventDefault();
      auth.signOut();
      logout.style.display = "none";
      login.style.display = "";
      zgRef.refresh();
    });
    
    login.addEventListener('click', (e) => {
      e.preventDefault();
      auth.signInWithEmailAndPassword('demo.user@zingsoft.com', 'zingdemo').then((cred) => {
        login.style.display = "none";
        logout.style.display = "";
        zgRef.refresh();
      });
    });