JavaScript quickstart for Native and Phaser

This quickstart helps you make your first API call in JavaScript.

Before you can call any PlayFab API, you must have a PlayFab developer account.

JavaScript project setup

OS: This guide should work in any OS capable of running a web browser, and you are probably already reading this page on your favorite browser.

To set up a new project, create a new folder with two empty text files:

  • PlayFabGettingStarted.html
  • PlayFabGettingStarted.js

That's it - PlayFab installation complete!

Set up your first API call

This guide provides the minimum steps to make your first PlayFab API call. Confirmation is visible on the webpage.

In your favorite text-editor, update the contents of PlayFabGettingStarted.html as follows:

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>PlayFab JavaScript Unit Tests</title>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src="PlayFabGettingStarted.js"></script>
    PlayFab Getting Started Guide<br />
    TitleID: <input type="text" id="titleId" value="144"><br />
    CustomID: <input type="text" id="customId" value="GettingStartedGuide"><br />
    <input type="button" value="Call LoginWithCustomID" onclick="DoExampleLoginWithCustomID()"><br />
    Result:<br />
    <textarea id="resultOutput" cols="60" rows="5"></textarea><br />

In your favorite text-editor, update the contents of PlayFabGettingStarted.html as follows:


To look up the correct format for the loginRequest object in this example, see the API reference for LoginWithCustomID.

function DoExampleLoginWithCustomID(){
    PlayFab.settings.titleId = document.getElementById("titleId").value;
    var loginRequest = {
        // Currently, you need to look up the correct format for this object in the API reference for LoginWithCustomID.
        TitleId: PlayFab.settings.titleId,
        CustomId: document.getElementById("customId").value,
        CreateAccount: true

    PlayFabClientSDK.LoginWithCustomID(loginRequest, LoginCallback);

var LoginCallback = function (result, error) {
    if (result !== null) {
        document.getElementById("resultOutput").innerHTML = "Congratulations, you made your first successful API call!";
    } else if (error !== null) {
        document.getElementById("resultOutput").innerHTML =
            "Something went wrong with your first API call.\n" +
            "Here's some debug information:\n" +

Finish and execute

  1. Open PlayFabGettingStarted.html in your favorite browser.
  2. Click the Call LoginWithCustomID button.
  3. You should see the following text in the Result section: "Congratulations, you made your first successful API call!"

At this point, you can start making other api calls, and building your game.

For a list of all available client API calls, see our PlayFab API References documentation.

Happy coding!

Deconstruct the code

This optional last section describes each part of Program.cs in detail.

The HTML file has a few important lines:

<script type="text/javascript" src=""></script>

This line loads the Client-SDK directly from the PlayFab CDN. Our CDN always hosts the latest version of PlayFabSDK. It may be safer for you to download the files, and use a fixed version: PlayFab JavaScript SDK

<script type="text/javascript" src="PlayFabGettingStarted.js"></script>
<input type="button" value="Call LoginWithCustomID" onclick="DoExampleLoginWithCustomID()"><br />

As you can see above, PlayFabGettingStarted.js contains the DoExampleLoginWithCustomID function. These lines bind our js file to our webpage, and invoke the DoExampleLoginWithCustomID function in that script. Everything else is just GUI.

  • Line by line breakdown for PlayFabGettingStarted.js
    • PlayFab.settings.titleId = "xxxx";

      • Every PlayFab developer creates a title in Game Manager. When you publish your game, you must code that titleId into your game. This lets the client know how to access the correct data within PlayFab. For most users, just consider it a mandatory step that makes PlayFab work.
    • var loginRequest = { TitleId: PlayFab.settings.titleId, CustomId: "GettingStartedGuide", CreateAccount: true };

      • Most PlayFab API methods require input parameters, and those input parameters are packed into a request object
      • Every API method requires a unique request object, with a mix of optional and mandatory parameters
        • For LoginWithCustomIDRequest, there is a mandatory parameter of CustomId, which uniquely identifies a player and CreateAccount, which allows the creation of a new account with this call. TitleId is another mandatory parameter in JavaScript, and it must match PlayFab.settings.titleId.
    • PlayFabClientSDK.LoginWithCustomID(loginRequest, LoginCallback);

    • LoginCallback contains two parameters: result, error

      • When successful, error will be null, and the result object will contain the requested information, according to the API called.

        • This result contains some basic information about the player, but for most users, login is simply a mandatory step before calling other APIs.
      • If error is not null, your API has failed.

        • API calls can fail for many reasons, and you should always attempt to handle failure.
        • Why API calls fail (In order of likelihood)
          • PlayFabSettings.TitleId is not set. If you forget to set titleId to your title, then nothing will work.
          • Request parameters. If you have not provided the correct or required information for a particular API call, then it will fail. See error.errorMessage, error.errorDetails, or error.GenerateErrorReport() for more info.
          • Device connectivity issue. Cell-phones lose/regain connectivity constantly, and so any API call at any time can fail randomly, and then work immediately after. Going into a tunnel can disconnect you completely.
          • PlayFab server issue. As with all software, there can be issues. See our release notes for updates.
          • The internet is not 100% reliable. Sometimes the message is corrupted or fails to reach the PlayFab server.
      • If you are having difficulty debugging an issue, and the information within the error information is not sufficient, please visit us on our forums.