Babka Accounts button

The library allows you to set up the Babka Accounts button.

Integrating Babka Accounts button

With npm package

Install Babka Login SDK

npm i @xsolla/accounts-babka-sdk

yarn add @xsolla/accounts-babka-sdk

Import Babka Accounts button

import { Button } from '@xsolla/accounts-babka-sdk';

Add container

Add to your markup container to mount Babka Accounts button and add ID to it

<div id="babka-button" />

Initialize button

Initialize button with your OAuth client params and pass container ID from step #3 and locale (default - English).

Available locales: Arabic (ar), Bulgarian (bg), Czech (cz), German (de), Spanish (es), French (fr), Hebrew (he), Italian (it), Japanese (ja), Korean (ko), Polish (pl), Portuguese (pt), Romanian (ro), Russian (ru), Thai (th), Turkish (tr), Vietnamese (vi), Chinese Simplified (cn), Chinese Traditional (tw).

Additionally, you have to provide scope parameter. It must be at least 8 characters long. It adds extra protection from CSRF attacks. You can create some state before OAuth2 authorization and compare it with the returned state with code on your Redirect Uri.

const babkaSDK = new Button({
  containerId: 'babka-button',
  locale: 'en',
  client_id: 1234,
  state: 'abcdefghij',
  scope: ['email', 'transaction'],
  redirect_uri: 'https://example.com/login',
  audience: ['https://example.com'],
  popup: false  
});

With JS scripts

Add SDK script

Add script tag to your page header

<script src="https://accounts.babka.com/sdk.js" type="text/javascript"></script>

Add container

Add to your markup container to mount Babka Accounts button and add ID to it

<div id="babka-button" />

Initialize button

Initialize button with your OAuth client params and pass container ID from step #2 and locale (default - English).

Available locales: Arabic (ar), Bulgarian (bg), Czech (cz), German (de), Spanish (es), French (fr), Hebrew (he), Italian (it), Japanese (ja), Korean (ko), Polish (pl), Portuguese (pt), Romanian (ro), Russian (ru), Thai (th), Turkish (tr), Vietnamese (vi), Chinese Simplified (cn), Chinese Traditional (tw).

Additionally, you have to provide scope parameter. It must be at least 8 characters long. It adds extra protection from CSRF attacks. You can create some state before OAuth2 authorization and compare it with the returned state with code on your Redirect Uri.

<script type="text/javascript">
  window.onload = function () {
    const babkaSDK = new AccountsBabkaSDK.Button({
      containerId: 'babka-button',
      locale: 'en',
      client_id: 1234,
      state: 'abcdefghij',
      scope: ['email', 'transaction'],
      redirect_uri: 'https://example.com/login',
      audience: ['https://example.com'], 
      popup: false  
    });
  };
</script>

Popup flow

To use Babka Login popup flow (open auth page in the new browser window) enable it in the initialization settings.

Add parameter popup: true to enable popup.

    const babkaSDK = new AccountsBabkaSDK.Button({
      containerId: 'babka-button',
      locale: 'en',
      client_id: 1234,
      state: 'abcdefghij',
      scope: ['email', 'transaction'],
      redirect_uri: 'https://example.com/login',
      audience: ['https://example.com'], 
      popup: true // popup flow  
    });