Skip to main content

Haste Client SDK

Haste Client SDK - Browser Based Games🗡️

Introduction

Ready to list your game? Follow these straightforward steps to ensure a seamless integration with our API that gets you (and your users) paid faster.

  • Verify your game is compatible with Haste-SDK.
  • Install all Required Packages.
  • Register your game through the Haste Developer Portal and generate game access keys.
  • Review the Security standards for Haste and ensure your game follows the authoritative server model described there.
  • Ensure all required functions are implemented. If you'd like to reference our API documentation, you can do that here, but below you'll find a quick list of the functions required to list your game in Haste Arcade.

This browser based SDK assumes you are building using a Single Page Architecture (SPA) with a server side API and a client side application such as create-react-app. If you're not using a Single-Page application (SPA), but instead are using a traditional server-side web application, you can look at using our @haste-express library.

Table of Contents​

Architecture​

Haste Browser Architecture

Client-side Functions​

While the primary work of integrating with Haste is performed on the server-side (where all game logic and score state should be maintained), Haste also provides a web-based SDK to assist in the authentication process. In order for a player to play your game, they will need to authenticate with the Haste Arcade.

The web SDK works by utilizing a Single Sign-On (SSO) system with Haste Arcade. The SDK is a wrapper to help facilitate this process.

If you're not using a Single-Page application (SPA), but instead are using a traditional server-side web application, you can look at using our @haste-express library.

Initialize HasteClient using HasteClient.build()​

Similar to the server-side SDK, @hastearcade/web starts by initializing a Haste object. In this case, the name of the object is HasteClient and the object should be maintained via an abstraction so it only needs to be initialized once.

The client ID used here can be found in the developer portal and will be for your game, not your server. See the image below for a reference point:

Game Client Keys

InitializeHasteClient.tsx

const hasteClient = HasteClient.build();

Implement the Login() function​

Once you have built your HasteClient object, you may begin using it in your game. For the application component that displays the game, the developer will need to handle two possible player types: authenticated and unauthenticated.

To determine if a player is authenticated the developer can utilize the following code:

CheckIfUserLoggedIn.tsx

const details = hasteClient.getTokenDetails();

The getTokenDetails function will return a HasteAuthentication object with the following definition:

/// token is what needs to be provided to your game server
export type HasteAuthentication = {
  token: string;
  isAuthenticated: boolean;
  picture: string; // url
  displayName: string;
};

If the player is unauthenticated, then present the user with the 'Sign in with Haste' branded button.

The button should execute the login code to redirect the player to the arcade for sign-in with hasteClient.login(). Once the player signs in to Haste Arcade, the player will be redirected back to the game.

If the player is already authenticated, then you can present the player with the leaderboard selection so they can choose what level they wish to play at. The leaderboard selection will allow the player to select the payment amount and level they are playing for the Arcade. To display the leaderboards, the developer will need to utilize the server-side SDK.

LoginIfUnauthenticated.tsx

hasteClient.login();

© 2023 Haste, Inc.