npm install @rpgjs/account @rpgjs/ui-css

import { accountQuery, provideAccount } from "@rpgjs/account/client";
import { provideMmorpg, startGame } from "@rpgjs/client";

startGame({
  providers: [
    provideAccount({
      client: {
        signIn: async credentials => {
          const response = await fetch("/api/sign-in", {
            method: "POST",
            headers: { "content-type": "application/json" },
            body: JSON.stringify(credentials),
          });
          if (!response.ok) throw new Error("sign-in failed");
          return response.json(); // { token: string }
        },
        signUp: async ({ username, email, password, passwordConfirmation }) => {
          const response = await fetch("/api/sign-up", {
            method: "POST",
            headers: { "content-type": "application/json" },
            body: JSON.stringify({ username, email, password, passwordConfirmation }),
          });
          if (!response.ok) throw new Error("sign-up failed");
          return response.json();
        },
        storageKey: "my-game-account-token",
      },
    }),
    provideMmorpg({
      deferConnection: true,
      query: accountQuery,
    }),
  ],
});

provideAccount({
  client: {
    signIn, signUp,
    title: "Crystal Chronicles",
    subtitle: "Your next adventure awaits.",
    backgroundImage: "/images/login.webp",
    backgroundMusic: "login-theme",
    sounds: { navigate: "menu-select", confirm: "menu-confirm", error: "menu-error" },
    forgotPassword: ({ email }) => api.requestPasswordReset({ email }),
    resetPassword: credentials => api.resetPassword(credentials),
    resetToken: tokenFromEmailLink,
  },
});