Supabase With Javascript [duplicate]

I want to add a 8 digit code into my column in supabase with javascript when the page loads, but i can’t! I always get errors, can somebody help me please!

This is the error that i had:

Uncaught ReferenceError: require is not defined
    at developers.js:1:17

I tried this code:

const express = require('express');
const supabase = require('@supabase/supabase-js');

const app = express();
const port = process.env.PORT || 3000;

// Replace with your Supabase project details
const supabaseUrl = '';
const supabaseAnonKey = '';

const supabaseClient = supabase.createClient(supabaseUrl, supabaseAnonKey);

// Function to generate a random 8-digit numeric code
function generateRandomCode() {
  return Math.floor(10000000 + Math.random() * 90000000).toString();
}

// Function to insert the code into the database
async function insertCode(code) {
  try {
      const { data, error, status } = await supabase
          .from('secrets') // Replace with your table name
          .insert([{ 'secret': code }]); // Replace 'secret' with your column name

      if (error) {
          console.error('Error inserting code:', error.message);
          if (status === 401) {
              console.error('Unauthorized - check row-level security policy.');
          }
          return false;
      }

      return true;
  } catch (error) {
      console.error('Error inserting code:', error.message);
      return false;
  }
}

// Endpoint to handle code generation and redirection
app.get('/generate-code', async (req, res) => {
  const uniqueCode = generateRandomCode();
  const success = await insertCode(uniqueCode);

  if (success) {
    console.log('Code inserted successfully:', uniqueCode);
    // Generate a temporary session token (replace with your secure token generation logic)
    const sessionToken = 'your_secure_session_token'; // Placeholder, implement secure token generation

    // Redirect with a temporary session token (avoid exposing code directly)
    res.redirect(`connected.html?token=${sessionToken}`);
  } else {
    console.error('Failed to insert code.');
    res.status(500).send('Internal Server Error');
  }
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Connected to this html:

<script type="text/javascript">
  (function(c,l,a,r,i,t,y){
      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
      t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
      y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "mo59qy3t56");
</script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
      if (window.top !== window.self) {
          window.top.location = window.location.href;
      }
  });
</script>
</head>
<style>
  /* Your CSS Styles */
  body {
    margin: 0;
    padding: 0;
    font-family: "Varela Round", sans-serif;
    overflow-x: hidden;
    position: relative;
    justify-content: center;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url('../4085479.jpg') no-repeat center center fixed;
    background-size: cover;
  }

  .container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    z-index: 1;
    position: relative;
  }

  .sidebar {
    width: 250px;
    background-color: rgba(117, 117, 117, 0.9); /* Semi-transparent white */
    padding: 20px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -250px; /* Initially hidden */
    overflow-y: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: left 0.3s ease; /* Slide in from left */
    z-index: 2;
    border-radius: 25px;
  }

  .sidebar.open {
    left: 0; /* Slide in to show */
  }

  .logo {
    text-align: center;
    margin-bottom: 30px;
  }

  .logo img {
    width: 100px;
    height: 100px; /* Reduced size */
    border-radius: 50%; /* Circular */
  }

  .menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .menu li {
    margin-bottom: 10px;
  }

  .menu a {
    color: #a3a3a3; /* Darker Gray */
    text-decoration: none;
    font-size: 1.2rem;
    display: block;
    padding: 15px;
    border-radius: 5px;
    transition: background-color opacity 0.3s ease;
    background-color: #474747; /* Light Gray */
    opacity: 0.6;
    width: 200px;
  }

  .menu a:hover {
    background-color: #ddd; /* Light Gray */
    color: #333; /* Darker Gray */
    opacity: 1;
  }

  .special {
    color: #a3a3a3; /* Darker Gray */
    text-decoration: none;
    font-size: 1.2rem;
    display: block;
    padding: 15px;
    border-radius: 5px;
    transition: background-color opacity 0.3s ease;
    background-color: #1a1a1a; /* Light Gray */
    opacity: 0.9;
    width: 200px;
  }

  .special:hover {
    background-color: #0f0f0f; /* Light Gray */
    color: #333; /* Darker Gray */
    opacity: 1;
  }

  .content {
    flex: 1;
    margin-left: 250px;
    padding: 20px;
    transition: margin-left 0.3s ease;
    background-color: #f9f9f9; /* Light Gray */
    border-radius: 10px;
  }

  .header {
    text-align: center;
    margin-bottom: 50px;
    color: #fff; /* White */
  }

  .header h1 {
    font-size: 3rem;
    color: #000000;
  }

  .header p {
    font-size: 1.2rem;
    color: #709dff; /* Darker Gray */
  }

  .about p {
    font-size: 1.2rem;
    line-height: 1.6;
  }

  .contact {
    background-color: #f9f9f9; /* Light Gray */
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .contact h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
  }

  .contact p {
    font-size: 1.2rem;
  }

  /* Toast Messages */
  .toast-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .toast-item {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease;
    width: 300px;
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background-color: #3498db; /* Blue */
    color: #fff; /* White */
  }

  .toast {
    padding: 15px;
    position: relative;
  }

  .toast-content {
    font-weight: bold;
    margin-bottom: 10px;
  }

  .close-toast {
    position: absolute;
    right: 100px;
    bottom: 20px;
    width: 100%;
    height: 100%;
    scale: 100;
    cursor: url('delete.png'), auto;
  }

  .close-toast:before,
  .close-toast:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff; /* White */
    border-radius: 2px;
  }

  .close-toast:before {
    transform: rotate(45deg);
  }

  .close-toast:after {
    transform: rotate(-45deg);
  }

  /* Menu Icon */
  .menu-icon {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  background-color: none; /* White background */
  color: #000; /* Black color */
  z-index: 1;
  cursor: pointer;
  scale: 2;
  right: 7px;
  transition: 0.3s ease-in-out;
}

.menu-icon:hover {
  transform: opa(0.6);
  color: #ffffff;
}


  ::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
  }

  .button2 {
    background-color: #4580ff;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    scale: 1.5;
    top: 20px;
    right: 20px;
    z-index: 1000;
    cursor: pointer;
    border: none;
    text-align: center;
    justify-self: center;
    transition: 0.3s ease-in-out;
    width: 100px;
    height: 30px;
  }

  .button2:hover {
    background-color: #0076c5;
    color: #fff;
    transform: scale(1.1);
  }
  
  .taskbar {
      width: 100%;
      z-index: 100000000000000000000;
      cursor: help;
      position: fixed; /* Ensures the taskbar stays fixed at the bottom */
      border: none;
      height: 50px;
      bottom: 0px;
      display: flex; /* Use flexbox for centering content */
      justify-content: center;
      align-items: center; /* Ensure content is vertically centered */
      background-color: #2e2e2e;
      opacity: 0.9;
      color: #a3a3a3;
      text-align: center; /* Ensure text is center-aligned */
      transition: 0.4s ease-in-out;
    }

    .taskbar p {
      display: inline-block; /* Make paragraphs display inline */
      margin: 0 10px; /* Add some spacing between paragraphs */
      transition: 0.4s ease-in-out;
    }

    .taskbar .text {
      color: #a3a3a3;
      font-weight: bold;
      border-radius: 20px;
      transition: 0.4s ease-in-out;
      font-family: 'Times New Roman', Times, serif;
    }

    .taskbar .text:hover {
      color: green;
      transform: scale(1.1);
      transition: 0.4s ease-in-out;
      cursor: crosshair;
    }

    .taskbar #ip-address {
  color: #a3a3a3;
  font-weight: bold;
  border-radius: 20px;
  transition: 0.4s ease-in-out;
  font-family: 'Times New Roman', Times, serif;
  cursor: pointer;
}

.taskbar #ip-address:hover {
  color: red;
  transform: scale(1.1);
  transition: 0.4s ease-in-out;
  cursor: crosshair;
}
.body2 {
  margin: 0;
  padding: 0;
  justify-content: center;
  text-align: center;
  justify-items: center;
  text-justify: auto;
  font-family: 'Times New Roman', Times, serif;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  text-align: center;
  justify-content: center;
  justify-items: center;
  text-justify: center;
}

#intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #121212;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.intro-content {
  display: flex;
  text-align: center;
  justify-content: center;
  justify-items: center;
  text-justify: center;
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin-top: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#main-content {
  display: none;
}

.content {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 80%;
  max-width: 600px;
}

.subscription {
  margin-top: 50px;
}


.dots-bars-1 {
  width: 40px;
  height: 40px;
  --c: linear-gradient(currentColor 0 0);
  --r1: radial-gradient(farthest-side at bottom,currentColor 93%,#0000);
  --r2: radial-gradient(farthest-side at top   ,currentColor 93%,#0000);
  background: 
    var(--c) ,
    var(--r1),
    var(--r2),
    var(--c) ,  
    var(--r1),
    var(--r2),
    var(--c) ,
    var(--r1),
    var(--r2);
  background-repeat: no-repeat;
  animation: db1 1s infinite  alternate;
}

@keyframes db1 {
  0%,10% {
    background-size: 8px 0,8px 4px,8px 4px;
    background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
 }
 90%,100% {
    background-size: 8px 100%,8px 4px, 8px 4px;
    background-position: 0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);
 }
}



  .load {
    --uib-size: 80px;
    --uib-color: black;
    --uib-speed: 1.75s;
    --uib-stroke: 5px;
    --uib-bg-opacity: .1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--uib-stroke);
    width: var(--uib-size);
    border-radius: calc(var(--uib-stroke) / 2);
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    z-index: auto;
  }

  .load::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--uib-color);
    opacity: var(--uib-bg-opacity);
    transition: background-color 0.3s ease;
  }

  .load::after {
    content: '';
    height: 100%;
    width: 100%;
    border-radius: calc(var(--uib-stroke) / 2);
    animation: wobble var(--uib-speed) ease-in-out infinite;
    transform: translateX(-95%);
    background-color: var(--uib-color);
    transition: background-color 0.3s ease;
  }

  @keyframes wobble {
    0%,
    100% {
      transform: translateX(-95%);
    }
    50% {
      transform: translateX(95%);
    }
  }

  @keyframes wipe-enter {
    0% {
        transform: scale(0, .025);
    }
    50% {
        transform: scale(1, .025);
    }
}

/*  <div class="load"></div>  */
/*  <div class="dots-bars-1"></div>  *//* BEST */
</style>
<style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      display: flex;
      justify-content: center;
      text-align: center;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .section {
      background: none;
      padding: 3rem;
      z-index: 999999;
      border-radius: 12px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      text-align: center;
      width: 400px;
      animation: fadeIn 1s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }

    .input-group {
      margin-bottom: 1.5rem;
      text-align: left;
      position: relative;
      animation: slideIn 1s ease-in-out;
    }

    @keyframes slideIn {
      from { opacity: 0; transform: translateX(-100px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .input-group label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: bold;
      animation: fadeInLabel 1s ease-in-out;
    }

    @keyframes fadeInLabel {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .input-group input {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #ccc;
      border-radius: 6px;
      transition: border-color 0.3s;
    }

    .input-group input:focus {
      border-color: #5151E5;
      outline: none;
    }

    .image-preview {
      width: 100%;
      max-width: 200px;
      height: auto;
      border: 1px solid #ccc;
      border-radius: 6px;
      margin-top: 1rem;
      display: none;
      animation: fadeInPreview 0.5s ease-in-out;
    }

    @keyframes fadeInPreview {
      from { opacity: 0; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1); }
    }

    .btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      background-color: #0000ff;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 1rem;
      animation: bounceIn 1s ease-in-out;
      transition: background-color 0.3s;
      transition: 0.3s ease-in-out;
    }

    @keyframes bounceIn {
      0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
      0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
      }
      20% {
        transform: scale3d(1.1, 1.1, 1.1);
      }
      40% {
        transform: scale3d(.9, .9, .9);
      }
      60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
      }
      80% {
        transform: scale3d(.97, .97, .97);
      }
      100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
      }
    }

    button:hover {
      transition: 0.3s ease-in-out;
      background-color: #0077ff;
    }

    button {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      background-color: #0000ff;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 1rem;
      animation: bounceIn 1s ease-in-out;
      transition: background-color 0.3s;
      transition: 0.3s ease-in-out;
      margin: 25px
    }

    @keyframes bounceIn {
      0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
      0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
      }
      20% {
        transform: scale3d(1.1, 1.1, 1.1);
      }
      40% {
        transform: scale3d(.9, .9, .9);
      }
      60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
      }
      80% {
        transform: scale3d(.97, .97, .97);
      }
      100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
      }


    }



        .title {
            font-size: 1.5em;
            margin-bottom: 10px;
            color: #333;
        }
        .description {
            font-size: 1em;
            margin-bottom: 20px;
            color: #666;
        }
        .link {
            font-size: 1em;
            color: #007BFF;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .link:hover {
            color: #0056b3;
        }

        #hiddenContainer {
          z-index: 99999;
          background-color: none;
          height: 100%;
          width: 100%;
          size: 100px;
        }
    </style>
</head>
<body>




  <div id="hiddenContainer" style="display: none;">
    <div class="container10" id="container10"></div>
    <div class="section">
        <h1>Hello</h1>
    </div>
    <!-- Add more hidden elements here if needed -->
</div>
<div id="loader" class="loader5">
    <div class="square" id="sq1"></div>
    <div class="square" id="sq2"></div>
    <div class="square" id="sq3"></div>
    <div class="square" id="sq4"></div>
    <div class="square" id="sq5"></div>
    <div class="square" id="sq6"></div>
    <div class="square" id="sq7"></div>
    <div class="square" id="sq8"></div>
    <div class="square" id="sq9"></div>
</div>
  <div class="toast-panel">
  </div>
    <div class="background-video"></div>
</body>
</html>