Setting up PlayFab authentication in is a desktop and mobile HTML5 game framework that PlayFab now supports in our Javascript SDK. supports plugins, so we at PlayFab thought that it would be useful for the community to have a powerful back end system that works as a plugin to the engine.

This tutorial guides you through the procedure for setting up, and getting started with PlayFab within


  • Knowledge of JavaScript.
  • Knowledge of setting up a web server.
  • General understanding of (a plus!).

Setting up a web server using MAMP

To serve HTML pages to your browser, you will need a web server. We use MAMP/MAMP Pro, but you can use whatever you are most comfortable with.

To begin:

  • Set up a website via Mamp/Mamp Pro, or your webserver of choice.
  • Create an Index.html file in the root of your website folder.


Alternately, you can refer to the Running an HTTP server for testing tutorial for information on how to set one up.

Setting up Phaser

The first step is to download Phaser from and set it up. For this tutorial, we advise you to just download the min.js file.

  • Create a folder in your website root called js.
  • Download Phaser min.js and save it to your /js folder in the website root.

Download Phaser min.js

Setup code

Start by copying and pasting the code that follows into Index.html.

<!doctype html>
<html class="no-js" lang="">
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">

    <script src=""></script>
    <script src="js/phaser.min.js"></script>
    Hello World!

You should see a page similar to the one in the image below, with Hello World! in the top left corner and the rest of the page blank.

Phaser Hello World page

Next Steps

  • Add a new file in your /js folder called main.js.
  • Add the code shown below to main.js.
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

function create() {

function update() {

You should now see that has initialized a blank canvas (like that shown in the example provided below). This means that your installation is completed. initialized blank canvas

Adding PlayFab and Phaser plugin

The PlayFab Javascript SDK will now auto-detect if you have Phaser loaded on the webpage, and inject itself into it as a Phaser plugin.

There are only two lines of code needed to make this happen:

  1. Add the script tag to load PlayFab just after loading Phaser.

Add Script tag to load PlayFab

  1. Copy this code into the create() method of main.js
function create() {
    game.PlayFab = game.plugins.add(Phaser.Plugin.PlayFab);

Making your first API call

Now that you have PlayFab installed as a plugin to Phaser, you can set your PlayFab titleId and make API calls.

The code presented below shows you how to log in a player.

    game.PlayFab.settings.titleId = "D6EC"; //Your title Id from playfab goes here.
    }, function(result){
        console.log("LoggedIn as " + result.PlayFabId);