> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Setting up PlayFab authentication using Twitch and HTML5

> Step-by-step tutorial for adding Twitch login to a PlayFab title with HTML5 and JavaScript, covering Twitch app registration and OAuth player authentication.

This tutorial has been designed to guide you through the process of PlayFab authentication, using Twitch and HTML5/JavaScript.

## Requirements

Prior to beginning, you should have:

* A [Twitch Account](https://www.twitch.tv/) for testing.
* A Registered [PlayFab](https://developer.playfab.com/) title.
* Familiarity with [Login basics and Best Practices](/services/playfab/identity/player-identity/login/login-basics-best-practices).
* At the minimum, a server with a valid domain name to serve static HTML files.

<Note>
  Consult the [Running an HTTP server for testing](/services/playfab/identity/player-identity/platform-specific-authentication/running-an-http-server-for-testing) tutorial for information on how to set up a server with a valid domain name.
</Note>

## Server and domain

This tutorial requires a web server, in order to follow the instructions. If you don't have a registered remote web server yet, follow our [Running an HTTP server for testing](/services/playfab/identity/player-identity/platform-specific-authentication/running-an-http-server-for-testing) tutorial, for information on how to run a local web server.

<Note>
  Throughout this tutorial, we'll assume your domain is `[http://localhost/](http://localhost/)`.
</Note>

## Registering a Twitch application

Start by navigating to the [Twitch website](https://www.twitch.tv/), and verifying that you're logged in.

1. Navigate to the **Account** drop-down.
2. Select **Settings** from the menu provided.

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-account-settings.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=16b0349a480883b4517f021b9f43b337" alt="Twitch account settings" width="1029" height="643" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-account-settings.png" />

On the **Settings** page, select **Connections (1)**, as shown below.

<img src="https://mintcdn.com/microsoft-4404708b/3hg2JQs0m7qmDqay/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-settings-connections.png?fit=max&auto=format&n=3hg2JQs0m7qmDqay&q=85&s=4f6e6dc81498ffe1a7007c0ae060eab4" alt="Twitch settings connections" width="1016" height="198" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-settings-connections.png" />

At the bottom of the page, select the **Register your application (1)** button, as shown below.

<img src="https://mintcdn.com/microsoft-4404708b/3hg2JQs0m7qmDqay/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-open-application-registration.png?fit=max&auto=format&n=3hg2JQs0m7qmDqay&q=85&s=d9b6a12d357e2364a422502ce3e943bd" alt="Twitch open application registration page" width="690" height="227" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-open-application-registration.png" />

A page will open that lets you configure a new app.

1. Fill in the **Name** of the **Application**.
2. Enter the **Redirect URL**.
3. Enter the **Application Category**.
4. Then agree to the **Twitch** terms, and select the **Register**  button.

<img src="https://mintcdn.com/microsoft-4404708b/3hg2JQs0m7qmDqay/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-register-your-application.png?fit=max&auto=format&n=3hg2JQs0m7qmDqay&q=85&s=2f039af883eeeea4f5141f2b5f560cae" alt="Twitch register your application" width="1029" height="643" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-register-your-application.png" />

<Info>
  When testing using a local web server, Twitch allows you to use `**<http://localhost>**` as a redirect URL. Make sure to include the leading slash **/**. Without a leading slash, Twitch will fail to recognize the localhost URL.
</Info>

Once the application is registered, the page will be updated and reveal the Client ID for your application.

<Note>
  Keep this Client ID in a safe and easily accessible place, as you'll be using it later to configure your PlayFab title.
</Note>

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-manage-application.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=a540ab15379f0a9890594bb1f0b8b57a" alt="Twitch manage application" width="1029" height="643" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-manage-application.png" />

## Configuring a PlayFab title

Once you acquire your Twitch Client ID, you can enable and configure a Twitch Add-on for your PlayFab title.

1. On your **PlayFab Title** screen, go to the menu and select the **Add-ons** item.
2. Then select the **Twitch** icon link.

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/game-manager-addons-tab-twitch.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=50176ba6202f1f26b095ed278ce8c1ed" alt="Game Manager Add-ons tab" width="624" height="545" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/game-manager-addons-tab-twitch.png" />

On the **Twitch** page:

* A **Settings** page will open for the **Twitch Add-on**.
* Enter your **Twitch Client ID**.
* Select the **Install Twitch** button.

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/game-manager-twitch-addon-settings.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=ade8d576e742ccb6492da588c5f12cbc" alt="Game Manager Twitch Add-on settings and install" width="893" height="599" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/game-manager-twitch-addon-settings.png" />

Take a moment to verify that the add-on was installed, and that no errors have occurred. This concludes configuring the PlayFab title.

## Testing

Use the following HTML file to test PlayFab authentication using Twitch.

Make sure to replace `TWITCH_CLIENT_ID_GOES_HERE` and `PLAYFAB_TITLE_ID_GOES_HERE` with your own values.

```html theme={null}
<!DOCTYPE html>
<html>
<head>
    <!-- Include JQuery - dependency of Twitch JS SDK -->
    <script src="//code.jquery.com/jquery.min.js"></script>
    <!-- Include Twitch SDK -->
    <script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"></script>
    <!-- Include PlayFab SDK -->
    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
    <p>Twitch Auth Example</p>
    <button onclick="login()">Login With Twitch</button>
    <script>
        // Establish Twitch Auth Callback (invoked when logged in with Twitch)
        Twitch.events.addListener('auth.login', function() {
            logLine("Logged in with Twitch!");
            // Invoke login with PlayFab code and pass the token
            loginWithPlayFab(Twitch.getToken());
        });

        // Run Twitch SDK initialization
        Twitch.init({clientId: 'TWITCH_CLIENT_ID_GOES_HERE'}, function(error, status) {
            logLine("Twitch SDK Initialized");
        });

        // This method is invoked when you press the button

        function login() {
            logLine("Logging in via Twitch...");
            Twitch.login({
                scope: ['user_read', 'channel_read']
            });
        }

        function loginWithPlayFab(accessToken){
            logLine("Logging in via PlayFab...");

            // When given accessToken, make call to LoginWithTwitch API Call
            // Make sure to use your own PlayFab Title ID
            PlayFabClientSDK.LoginWithTwitch({
                AccessToken: accessToken,
                TitleId: "PLAYFAB_TITLE_ID_GOES_HERE",
                CreateAccount: true
            }, onPlayFabResponse);
        }

        // Handles response from playfab.
        function onPlayFabResponse(response, error) {
            if (response)
                logLine("Response: " + JSON.stringify(response));
            if (error)
                logLine("Error: " + JSON.stringify(error));
        }

        function logLine(message) {
        console.log(message);
            var textnode = document.createTextNode(message);
            document.body.appendChild(textnode);
            var br = document.createElement("br");
            document.body.appendChild(br);
        }
    </script>
</body>
</html>
```

1. Request the following file from your server, using the domain you set up during the Twitch application configuration `<http://localhost>` in our case.

2. Once the page opens, wait for the message indicating that the **Twitch SDK** was initialized.

3. Then select the **Login with Twitch** button.

4. Follow any **Twitch** instructions in the pop-up window, and watch the output.

<Info>
  If you *already have* a Twitch auth session going when reaching the page, it's possible for callbacks to fire in a different, unexpected order. This case is shown in the screenshot shown below. However, you should make sure that only **Logging in via PlayFab** follows after **Logged in with Twitch**. This indicates that the token was received or restored from the local storage, and we don't have to wait for the Twitch SDK to start signing in to PlayFab.
</Info>

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-auth-example.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=8e4934020a31d60a0c4eb5ee8c017558" alt="Twitch Auth Example" width="489" height="416" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-auth-example.png" />

If PlayFab manages to acquire a `SessionTicket`, you have successfully integrated Twitch authentication with your PlayFab app.


## Related topics

- [Platform-Specific Authentication](/services/playfab/identity/player-identity/platform-specific-authentication/index.md)
- [Setting up PlayFab authentication using Google and HTML5](/services/playfab/identity/player-identity/platform-specific-authentication/google-html5.md)
- [Setting up PlayFab authentication using Kongregate and HTML5](/services/playfab/identity/player-identity/platform-specific-authentication/kongregate-html5.md)
- [Setting up PlayFab authentication using Facebook and HTML5](/services/playfab/identity/player-identity/platform-specific-authentication/facebook-html5.md)
- [Server Anonymous Login Authentication](/services/playfab/identity/player-identity/platform-specific-authentication/anonymous-login.md)