Logo / Docs

Twitch

FusionAuth Reactor logo

This feature is only available in an Essentials or Enterprise plan. Please visit our pricing page to learn more.

Available since 1.28.0.

Overview

This section will cover how to add a Login with Twitch button to FusionAuth. Below is an example login page with the Twitch Identity Provider enabled.

Once you have completed this configuration you will be able to enable the Twitch login button for one or more FusionAuth Applications. Below is an example login page with the Twitch Identity Provider enabled.

Login Twitch

Here's a diagram of the login flow between:

  • the user
  • your application
  • FusionAuth and
  • a remote identity provider such as Twitch
User/BrowserAppFusionAuthIdentityProviderUser Is Logged In And App Can ProceedDelivering Data And FunctionalityView Initial PageClick LoginRedirect To FusionAuth Authorization URLRequest Login PageReturn Login PageClicks On 'Login With Identity Provider'Redirect To Identity Provider Authorization URLEnter CredentialsValidate CredentialsRedirect To FusionAuth With Identity Provider Authorization CodeRequests Page, Has Identity Provider Authorization CodeExchange Authorization Code ForIdentity Provider TokenReturns Identity Provider TokenStores IdentityProvider Token, CallsLambda, Creates UserAnd Registrations (IfNeeded), GeneratesFusionAuth TokensRedirect To Redirect URI With FusionAuth Authorization CodeRequest Redirect URI, Has FusionAuthAuthorization CodeRequest FusionAuth TokensReturn FusionAuth TokensCreate Session OrOtherwise Log User InUser/BrowserAppFusionAuthIdentityProvider

Logging In Using Twitch

Although this looks complex, the user only sees a few screens, such as the FusionAuth login screen, the Twitch login screen, and your application.

Create a Twitch Account

Ensure you have a Twitch account, and then navigate to the Twitch Developer dashboard. Please note that you will need to have verified your account and enabled two-factor authentication.

If you do not yet have a Twitch app, you will need to create an app. If you already have a Twitch app that you plan to use for FusionAuth, please review this section anyway to ensure your configuration is correct to support the Twitch Identity Provider.

In the following screenshot you will find an example of creating an application in Twitch. Review the following sections to ensure your configuration is correct. Fill out any required fields found on this form and click the Create button to create a new Twitter app.

Add the Callback URL

In this example I have registered https://login.piedpiper.com/oauth-callback as the callback URL. Please note that Twitch requires this URL to use the HTTPS schema.

Create Twitch App

Choose a Category

You can select the category of the application for which you are enabling the ability to login with Twitch.

Keys and token

Once you click Create, you will be redirected back to the dashboard for applications. From there, you will have to click Manage to view the client Id and the client secret. Create a secret by clicking on the “New Secret” button. These two values will be used to configure the FusionAuth Identity Provider.

There is no further configuration to perform on this panel, you will only need to record or copy these values for the next step.

Once you have completed this configuration you will be able to enable the Twitch login button for one or more FusionAuth Applications.

Create a Twitch Identity Provider

To enable this identity provider for an application, find your application name in the Applications configuration section at the bottom of this panel. You will always see the FusionAuth application, this application represents the FusionAuth administrative user interface. If you wish to be able to log into FusionAuth with this provider, you may enable this application.

In the following screenshot you will see that we have enabled this login provider for the Pied Piper application and enabled Create registration. Enabling create registration means that a user does not need to be manually registered for the application prior to using this login provider.

For example, when a new user attempts to log into Pied Piper using Twitch, if their user does not exist in FusionAuth it will be created dynamically, and if the Create registration toggle has been enabled, the user will also be registered for Pied Piper and assigned any default roles assigned by the application.

If you do not wish to automatically provision a user for this application when logging in with Twitch, leave Create registration off. You will need to manually register a user for this application before they may Sign in with Twitch.

That's it, now the Sign in with Twitch button will show up on the login page for the Pied Piper application.

Twitch Home

Form Fields

Client Idrequired
The unique client identifier obtained from Twitch. See Twitch - Getting Started.
Client secretrequired
The client secret obtained from Twitch and used to authenticate the request. See Twitch - Getting Started.
Button text
The text to be displayed in the button on the login form. This value is defaulted to Login with Twitch but it may be modified to your preference.
ScopeDefaults to openid user:read:email
The optional scope parameter used by Twitch to request details about the user.
Linking strategyDefaults to Create a pending link
The linking strategy for the Twitch provider. See Linking Strategies for more.
Reconcile lambda
A lambda maps custom claims returned from Twitch to the FusionAuth User or Registration. To create or configure a lambda, navigate to Customizations -> Lambdas. See the lambda documentation for more.
Debug enabledDefaults to false
Enable debug to create event log entries during the user login process. This will assist you in debugging integration issues.

Building Your Own Integration

If you are building your own login experience, you'll want to start the identity provider flow yourself and then complete the login.

You might do this if you are using the Login API rather than using the hosted FusionAuth login pages. Here's a diagram illustrating this login flow.

User/BrowserAppFusionAuthIdentityProviderUser Is Logged In And App Can ProceedDelivering Data And FunctionalityView Initial PageClick LoginDisplays Login PageIncluding Link To 'Login With Identity Provider'Clicks On 'Login With Identity Provider'Redirect To Identity Provider Authorization URLEnters CredentialsValidate CredentialsRedirect to App With Authorization CodeRequests Page, Has Authorization CodeCalls Complete LoginWith Code And Redirect URIExchanges Code AndRedirect URI For Identity Provider TokenReturns Identity Provider TokenStores IdentityProvider Token, CallsLambda, Creates UserAnd Registrations (IfNeeded), GeneratesFusionAuth TokensReturn FusionAuth TokensCreate Session OrOtherwise Log User InUser/BrowserAppFusionAuthIdentityProvider

An Integration With An Identity Provider Using The API

Completing the login is documented further in the API.

If you require a refresh token after completing the login, ensure Enable JWT Refresh is true in the application configuration. This is found in the administrative user interface by navigating to Applications -> Your Application -> Security -> Login API settings.