Custom Nakama Web Client

I’ve had a Nakama game server running on a Postgres database for years now. I want to integrate 3rd-party integrations into my app that I built in Unity (i.e. Garmin), and I want to do this via a web-portal since Unity is not good for building OAuth workflows. So far I’ve been using Zapier but that can get pricey. Is there an example of a vanilla js HTML page that integrates properly with the server? I just need to let the user login, and query and update their storage collection. Here’s my attempt so far, but it keeps saying: “Uncaught ReferenceError: nakama is not defined” and same for nakamajs when I try those iterations. And yes I configure my own host IP address.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nakama Login</title>
</head>
<body>
  <!-- Simple Login Form -->
  <form id="loginForm">
    <input type="email" id="email" placeholder="Email" required>
    <input type="password" id="password" placeholder="Password" required>
    <button type="submit">Login</button>
  </form>
  <div id="result"></div>

  <!-- Include the UMD build of the Nakama client library -->
  <script src="https://unpkg.com/@heroiclabs/nakama-js/dist/nakama.min.js"></script>
  <script>
    // Create a Nakama client instance.
    // Replace "defaultkey", "IP_ADDRESS", and "7350" with your configuration.
    const client = new Nakama.Client("defaultkey", "IP_ADDRESS", "7350", false);

    // Listen for the form submission and authenticate the user.
    document.getElementById("loginForm").addEventListener("submit", async function(e) {
      e.preventDefault();
      const email = document.getElementById("email").value;
      const password = document.getElementById("password").value;
      const resultDiv = document.getElementById("result");

      try {
        const session = await client.authenticateEmail(email, password, false);
        resultDiv.textContent = "Login successful! Session token: " + session.token;
      } catch (err) {
        resultDiv.textContent = "Login failed: " + (err.message || err);
      }
    });
  </script>
</body>
</html>

Hello @EarthAdam,

From the error, it seems like the Nakama client js file is not being resolved correctly.

I don’t think we have the exact example you’re asking for, but have you tried following the example here: JavaScript - Heroic Labs Documentation ?

Best.