If you’re using your own authentication system, at this stage you only need to ensure it stores and can pass the data required by Xsolla to manage subscriptions:

• a unique user ID
• the user’s email

In this case, we recommend creating a website using the Web Shop template and setting up user authentication by ID or via deep links.

To do this:

1. Open your project in Publisher Account and go to the Storefronts > Websites section.
2. Click Create site.
3. Select the Web Shop template.
4. Add a URL to an external platform where your game is available. This allows you to quickly create a page in the style of your game: images and the game title, developer information, and a color scheme are automatically added to the page. If you don’t want to use the game data, set the Copy game info via App Store or Google Play URL toggle to inactive.

5. Click Create Web Shop.

6. Set up one of the following user authentication options:

   • User ID authentication
   • User ID and deep link authentication
   • Deep link authentication
   • Authentication via Xsolla Login with linked user ID

Set up user authentication in Publisher Account

Xsolla allows you to configure various ways to authenticate users. This guide contains instructions on the fastest way to integrate and configure it — using a ready-made widget to authenticate the user via a one-time code or via a social network.

Later, you can change the user authentication method or use a different integration option.

Xsolla provides standard widget templates. Their appearance and content is determined by the Login method chosen for your project and widget customization settings from Publisher Account.

Standard widget view for authentication using a one-time code or via social networks:

To set up user authentication in Publisher Account:

1. Open your project in Publisher Account and go to the Players > Login section.
2. In the Dashboard section, click Create Login project.
3. Select Standard Login project and click Create and set up. Wait until your new Login project is created. You will then see the Login project page.
4. In the Login methods block, select Passwordless login.
5. Click Configure.
6. Set up authorization using a one-time code:
   1. In the Passwordless login block, select Callback URLs.
   2. In the Callback URL field, add the URL the user is redirected to after successful authentication.
   3. Click Save changes.
7. Set up authentication via social networks (optional):
   1. Click the name of your Login project in breadcrumb trail to return to the Login project page.
   2. Go to the Authentication block and select Social login.
   3. Connect social networks that users will be able to use to sign up and log into the application:

1. 1. • To connect the desired social network, click the ⚙ icon and select Connect.

1. 1. • To connect several social networks at once, select the required panes (their borders will turn green). Then, from the Manage drop-down menu, select Connect.

1. 1. • To connect all available social networks at once, click Select all. Then, from the Manage drop-down menu, select Connect.

1. 4. Click Save changes.

You can test the widget settings. To do this, click Check now on the left side of the screen and log in.

During the integration process, you will need a Login project ID. You can find it in your project in Publisher Account, in the Players > Login > Dashboard section.

Implement user authentication in application

Below, you can find instructions for the fastest way to integrate Xsolla Login — integrating a ready-made web widget into the application.

If you want to use your own UI to log users into your application, you should implement user authentication logic using the Login API or SDK methods.

Connect Xsolla Login widget SDK

The Xsolla Login widget is available for installation using the NPM package manager or the <script> tag on an HTML page.

Connect the Xsolla Login widget SDK in one of the following ways:

1npm i @xsolla/login-sdk

1<script src="https://login-sdk.xsolla.com/latest/">
2</script>

Initialize Xsolla Login widget SDK

Initialize the widget using one of the methods below. Specify the following parameters:

• projectId — Login project ID. You can find it in your project in Publisher Account, in the Players > Login > Dashboard section.
• preferredLocale — the interface language. The following languages are supported: Arabic (ar_AE), Bulgarian (bg_BG), Czech (cz_CZ), English (en_US), German (de_DE), Spanish (es_ES), French (fr_FR), Hebrew (he_IL), Italian (it_IT), Japanese (ja_JP), Korean (ko_KR), Polish (pl_PL), Portuguese (pt_BR), Romanian (ro_RO), Russian (ru_RU), Thai (th_TH), Turkish (tr_TR), Vietnamese (vi_VN), Chinese Simplified (zh_CN), Chinese Traditional (zh_TW).
• clientId — OAuth 2.0 client ID. You can find it in your project in Publisher Account, in the Players > Login > your Login project > Security > OAuth 2.0 section.
• redirectUri — The URL the user is redirected to after they confirm their account, log in, or confirm password reset. Must be specified in the Publisher Account in the OAuth 2.0 client settings.

Leave the rest of the parameters unchanged.

 1import { Widget } from '@xsolla/login-sdk';
 2const xl = new Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US'
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});

 1<script>
 2const xl = new XsollaLogin.Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US',
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});
11</script>

Add Xsolla Login widget opening

1. Add a button with the on-click event and the xl.open() function to your HTML page:

1<div id="xl_auth" style="display: none"></div>
2<button onclick="showFullscreen()">Fullscreen widget</button>

2. Add the code to open the widget in the <div> block of your HTML page.

1xl.mount('xl_auth');
2const showFullscreen = () => {
3  const myDiv = document.querySelector('#xl_auth');
4  myDiv.style.display = 'block';
5  xl.open();
6}

 1<script type="text/javascript">
 2  xl.mount('xl_auth');
 3
 4  function showFullscreen() {
 5    const myDiv = document.querySelector('#xl_auth');
 6    myDiv.style.display = 'block';
 7
 8    xl.open();
 9  }
10</script>

Set up user authentication in Publisher Account

Xsolla allows you to configure various ways to authenticate users. This guide contains instructions on the fastest way to configure it — to authenticate the user via a one-time code or via a social network.

Later, you can change the user authentication method.

To set up user authentication in Publisher Account:

1. Open your project in Publisher Account and go to the Players > Login section.
2. In the Dashboard section, click Create Login project.
3. Select Standard Login project and click Create and set up. Wait until your new Login project is created. You will then see the Login project page.
4. In the Login methods block, select Passwordless login.
5. Click Configure.
6. Set up authorization using a one-time code:
   1. In the Passwordless login block, select Callback URLs.
   2. In the Callback URL field, add the URL the user is redirected to after successful authentication.
   3. Click Save changes.
7. Set up authentication via social networks (optional):
   1. Click the name of your Login project in breadcrumb trail to return to the Login project page.
   2. Go to the Authentication block and select Social login.
   3. Connect social networks that users will be able to use to sign up and log into the application:

1. 1. • To connect the desired social network, click the ⚙ icon and select Connect.

1. 1. • To connect several social networks at once, select the required panes (their borders will turn green). Then, from the Manage drop-down menu, select Connect.

1. 1. • To connect all available social networks at once, click Select all. Then, from the Manage drop-down menu, select Connect.

1. 4. Click Save changes.

Set up user authentication in site builder

To create a site and set up user authentication:

1. Open your project in Publisher Account and go to the Storefronts > Websites section.
2. Click Create site.
3. Select any site template and proceed to create your site.

4. In the builder, go to the Login settings > Xsolla Login section and select the previously configured authentication option from the drop-down list.
5. To make the authorization modal window match the site’s color scheme, set the Use site theme toggle to active (recommended).
6. In the Layout section, configure the logo and custom background if needed.