How to integrate user authentication via Xsolla account

How it works

You can add user authentication with Xsolla account on Xsolla Wallet.

User scenarios

You can implement one of the following user scenarios:

1. Opening the Xsolla Wallet authentication page in a modal window by clicking the Log in with Xsolla button in the login widget:
   1. The user clicks the Log in with Xsolla button in the login widget.
   2. They are redirected to the Xsolla Wallet authentication screen that opens in a modal window.
   3. The user completes the authentication process on Xsolla Wallet.
   4. They are redirected to the page whose URL is specified in the Callback URL field in Publisher Account.

2. Redirecting to the Xsolla Wallet authentication page by clicking the Log in with Xsolla button in the login widget:
   1. The user clicks the Log in with Xsolla button in the login widget.
   2. They are redirected to the Xsolla Wallet authentication screen that opens in the same window.
   3. The user completes the authentication process on Xsolla Wallet.
   4. They are redirected to the page whose URL is specified in the Callback URL field in Publisher Account.

3. Redirecting to the Xsolla Wallet authentication page in a pop-up window by clicking a button on your website:
   1. The user clicks a button on your website.
   2. They are redirected to the Xsolla Wallet authentication screen that opens in a popup window.
   3. The user completes the authentication process on Xsolla Wallet.
   4. They are redirected to the page whose URL is specified in the Callback URL field in Publisher Account.

How to get it

To integrate authentication via Xsolla as a social network:

1. Create an Xsolla account OAuth 2.0 client.
2. Integrate the login widget.
3. Enable Xsolla as a social network.
4. Implement the retrieval of the user authorization token.

Xsolla account OAuth 2.0 client creation

1. Create a project in Publisher Account.
2. Set up a Login project in Publisher Account.
3. Contact your Customer Success Manager or email to csm@xsolla.com and provide the following information:

4. The Xsolla integration team will create an Xsolla account OAuth 2.0 client for you and provide its identifier and secret key. This data is necessary for obtaining the user authorization token.

Integration of a login widget

Enable Xsolla as a social network

1. Open your project in your Publisher Account and go to the Login section.
2. Click Configure in the pane of a Login project.
3. Go to the Authentication section and select the Social login section.
4. Select Xsolla from the list of social networks.

5. Click the ⚙ icon and select Settings.
6. Fill in the following fields:
   • Application ID — the Xsolla account OAuth 2.0 client identifier you received from Xsolla.
   • Application secret key — the Xsolla account OAuth 2.0 key you received from Xsolla.
   • Your website link — the website from which Xsolla servers receive a request to exchange an authorization code for an authorization token. Specify the same URL address that was indicated as the Audience parameter when creating the Xsolla account OAuth 2.0 client.

7. Click Connect.

8. Set up one of the user scenarios:
   • Redirecting to the Xsolla Wallet authentication page by clicking the Log in with Xsolla button in the login widget (by default):
     1. Go to the Authentication section and select the Callback URLs section.
     2. In the Callback URL field, enter the URL address of the page to which you want to redirect users after authentication.
     3. In the callbackUrl parameter of the login widget’s code, pass the URL address of the page to which the user should be redirected after authentication.

Widget code example:

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: '[Login ID]',
  preferredLocale: 'en_US',
  callbackUrl: '[Your Callback URL]',
});

1. • Redirecting to the Xsolla Wallet authentication page in a pop-up window by clicking a button on your website:
     1. On the navigation page, go to the Authentication section and select the Callback URLs section.
     2. Make sure that the following URLs are added in the Callback URL section:
        • https://login-widget.xsolla.com/latest/babka-auth-succeed
        • https://login.xsolla.com/api/social/oauth2/callback
     3. In the login widget code pass the true value in the babkaLoginPopup parameter, and pass the URL address of the page to which the user should be redirected after authentication in the callbackUrl parameter.

Widget code example:

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: '[Login ID]',
  preferredLocale: 'en_US',
  babkaLoginPopup: true,
  callbackUrl: '[Your Callback URL]',
});

1. • 4. Add the button opening the Xsolla Wallet authentication page to your website.

Log in with Xsolla button code example:

<div id="xl_auth"></div>
<button onclick="xl.open()">Babka Login Popup</button>

1. • Opening the Xsolla Wallet authentication page in a modal window by clicking the Log in with Xsolla button in the login widget:
     1. Go to the Authentication section and select the Callback URLs section.
     2. In the Callback URL field, enter the URL address of the page to which you want to redirect the user after authentication.
     3. In the login widget’s code, pass the popup value in the babkaLoginFlow parameter, and pass the URL address of the page to which the user should be redirected after authentication in the callbackUrl parameter.

Widget code example:

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: '[Login ID]',
  preferredLocale: 'en_US',
  babkaLoginFlow: popup,
  callbackUrl: '[Your Callback URL]',
});

Getting a user authorization token

After authorization on the Xsolla side, the user will be redirected to the URL specified in the callback_url parameter. The user authorization token is passed in the token parameter.

To embed Xsolla account OAuth JWT token in Xsolla Login JWT token:

1. Open your project in your Publisher Account and go to the Login section.
2. Click Configure in the pane of a Login project.
3. Go to the Authentication section and select the Social login section.

4. Set the Embed social network JWT token toggler to On.
5. Click Save changes.