# Login hook

Our creatives units enable an authenticate-for-reward pattern, using the **login optin** feature: we'll invite the user to subscribe to a newsletter before they can see the results, using a Collective Audience™ optin format.

While this works well for most publishers, some might want to leverage the units for their own login system. For that purpose, we provide an API.

Also, in order to improve data collection for our partners, since 2023, we provide a new feature allowing publishers to pass their own site user id on the SDK. The user id will be accessible **only** for the publisher contents, not for external ones!

## Tell the SDK about the user login status

At the initialisation of the Collective Audience™ SDK, you are able to let us know the user login status by changing the Collective Audience™ SDK config or by calling one of the two functions we provide:

### Collective Audience™ SDK

You can pass your user id directly in the configuration object of the Collective Audience™ SDK (also known under it's old name, BeOpSDK) initialization. Use the key `siteUserID` for that.

```javascript
window.beOpAsyncInit = function () {
  BeOpSDK.init({
    account: "YOUR_ACCOUNT_ID",
    siteUserID: YourAuthService.getUserId(),
  });
  BeOpSDK.watch();
};
```

### Functions to update the login status later

`**__logUser**` in which you can pass the user login status:

* `true`: the user is logged in
* `false`: the user isn't logged

```javascript
BeOpSDK.__logUser(YourAuthService.isUserLogged());
```

  

`**__logUserID**` in which you can pass the user id from your site:

* `string`: the user id

```javascript
BeOpSDK.__logUserID(YourAuthService.getLoggedUserId());
```

  

## Provide a way to trigger the auth flow

In the case the user is **not yet** logged in, the unit will call your auth flow so that you can show the auth modal or redirect.

If the login happens directly on the page (or if your auth popup can communicate using the `postMessage` API), you can return a promise that resolves, depending on the function you use,

* with `true`, or `the_user_id` (a string), if the login is successful,
* with `false`, or `undefined` (or `null`), if the login isn't.

```javascript
BeOpSDK.__onLoginRequest(function () {
  return new Promise((resolve) => {
    YourAuthService.showAuthLayer(function (isLoggedIn) {
      resolve(isLoggedIn);
    });
  });
});
```

```javascript
BeOpSDK.__onLoginRequestWithID(function () {
  return new Promise((resolve) => {
    YourAuthService.showAuthLayer(function (userId) {
      resolve(userId);
    });
  });
});
```

If your auth requires a redirect, simply change the page location, and make the flow go back to the initial page, the widget will then reload at the correct step and show the results.

```js
BeOpSDK.__onLoginRequest(function () {
  redirectToLoginPage();
});
```

  


:::warning
Don't forget to call back the relevant function (`__logUser` or `__logUserID`) consequently to the user login process.

:::

## Requiring login on creative units

In order to enable the login flow, go to the creative you want it enabled on, simply click on **Require user login** and pick **Optional** or **Required**.

 ![](https://s3.eu-west-1.amazonaws.com/outline-assets.collectiveaudience.co/uploads/a579229e-61bc-476b-887f-f4ebec869d46/b8e1334d-4f97-4c38-8d20-90a5dd0e2ea5/login-as-content-option.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIA4G6VWWYWENBOMIQL%2F20261016%2Feu-west-1%2Fs3%2Faws4_request&X-Amz-Date=20261016T230000Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECYaCWV1LXdlc3QtMSJGMEQCIFIVLlTsgTg96wh%2B13hbcBBtTjtouLzGHYFUQwAMyGCgAiBZQvQLCUm0fJPROIy9UX0zelwKaJXHduvgCeOJjz9zHirGBQjv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDgzOTU3NzQxNzI2MCIM0yab%2Fsb9UPYpqt2CKpoFuB%2BEa5MwONKzFCbtf5wiVAAVRaYR9GmGt6NdMSaKWAK2%2BOb%2BLlpx%2F7ratzmo5gOwnpVXaX%2FyyDJmygkNiMOc%2BgpZ%2FhbNJEfn8TloAI3BYdgaAX5xIMxfElG1K1uLvqeo%2F6U%2FmVj2%2BFlCBT9JxUJDO19Xuaen5xUsRewtRqOWeD9x47bV4x5%2BB3O9QDZOk2LC%2Bu7J1NSYWN3qnLJDOWv5tNMbN%2FKBj0FHzZDzZH7Wx80eg81oATJXexfevFkg0pXRaTrdloHnNhzBft1Jrn9Etddl5rA754DWiTULdpjC%2BCcYhEZNmJcWNnzvkFAZZIleU5QyGSJvlUlWAVzPswAhXPHyvnSu27cxmTKXgphDOHTN3Voxp%2FxYNTJk83LqQzjoTrOdS4q4phhD3Hz5eJm9nJkc2ImiYxz2UBGhRx8Zeb4j%2Fi1ml%2BrnZbxzsNegZdlIYVLCr9vbTpCNpOXisVtb%2FBOzaF7YL6fnhiEzCuuHVDISjdVDV46UnRfpFlvSjO15nPzRHDGbfLfADew7iMYlQVec4B3GZp0QCpnqFDXYPKAxUHbIot%2BjO9NK0qaQOMNqkI3fL6IOXYGz0GMTXqL4mPhd3ET5Jb9SwWRUbnOfY1rrkt7JD6Zu%2BgmijASDdnpvxeMND7EvJ9hBwn7eEWbX9VkBVpSM0T7pUbFtsKzecam6yDn6EwCFw2QO1AfSnYyeG%2FFxsQUzj0cXEMuCk%2FryoSOxY2MVnEkK2dQn9cM74B8SQfCRq%2B0c8TK6Mch3CQ29OkUEeGtIh9j%2F4JF3NcqkBAntcbbvH%2BJDXMakkwybgisr7GwsMoidrDxI%2FAwyPpDADt9e8%2BQweALbpQY0mo4GZNaEu0Rc5nAqH1J5OjBbEydoiIMSQHah2UgHMOu0ytYGOrIBA7%2BJIQPrc8lI3Xk%2FuX9wOXXeLdPxQv0gQ5r10iRjh1hC9aT3%2BK%2BLKUDZo0SxrxFWA7bcxdNYA9kBsmm%2F9gA25vfZ4quNROTqd17T3k3NJT7JJGWCTIt3KxpyePhbKVJEXcfWhVOEL2EwBC7cBAcqe5PlBwWAgwnqhyVopkionYKI49pKBD4BxaU0zkBWmMjB0UdxMqY8L8%2Bc0CC3wpqY75IKUc7Y6yqARbgBVuNlQyiHzA%3D%3D&X-Amz-Signature=22a631d9debd40bc51b3c91ea31149e6d2ce83458f569b529fe836f6daf3b591&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =579x212")

 ![](https://s3.eu-west-1.amazonaws.com/outline-assets.collectiveaudience.co/uploads/a579229e-61bc-476b-887f-f4ebec869d46/e692a9a5-dfb4-43de-910c-4d16dafc7248/setup-login-on-content.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIA4G6VWWYWENBOMIQL%2F20261016%2Feu-west-1%2Fs3%2Faws4_request&X-Amz-Date=20261016T230000Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECYaCWV1LXdlc3QtMSJGMEQCIFIVLlTsgTg96wh%2B13hbcBBtTjtouLzGHYFUQwAMyGCgAiBZQvQLCUm0fJPROIy9UX0zelwKaJXHduvgCeOJjz9zHirGBQjv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDgzOTU3NzQxNzI2MCIM0yab%2Fsb9UPYpqt2CKpoFuB%2BEa5MwONKzFCbtf5wiVAAVRaYR9GmGt6NdMSaKWAK2%2BOb%2BLlpx%2F7ratzmo5gOwnpVXaX%2FyyDJmygkNiMOc%2BgpZ%2FhbNJEfn8TloAI3BYdgaAX5xIMxfElG1K1uLvqeo%2F6U%2FmVj2%2BFlCBT9JxUJDO19Xuaen5xUsRewtRqOWeD9x47bV4x5%2BB3O9QDZOk2LC%2Bu7J1NSYWN3qnLJDOWv5tNMbN%2FKBj0FHzZDzZH7Wx80eg81oATJXexfevFkg0pXRaTrdloHnNhzBft1Jrn9Etddl5rA754DWiTULdpjC%2BCcYhEZNmJcWNnzvkFAZZIleU5QyGSJvlUlWAVzPswAhXPHyvnSu27cxmTKXgphDOHTN3Voxp%2FxYNTJk83LqQzjoTrOdS4q4phhD3Hz5eJm9nJkc2ImiYxz2UBGhRx8Zeb4j%2Fi1ml%2BrnZbxzsNegZdlIYVLCr9vbTpCNpOXisVtb%2FBOzaF7YL6fnhiEzCuuHVDISjdVDV46UnRfpFlvSjO15nPzRHDGbfLfADew7iMYlQVec4B3GZp0QCpnqFDXYPKAxUHbIot%2BjO9NK0qaQOMNqkI3fL6IOXYGz0GMTXqL4mPhd3ET5Jb9SwWRUbnOfY1rrkt7JD6Zu%2BgmijASDdnpvxeMND7EvJ9hBwn7eEWbX9VkBVpSM0T7pUbFtsKzecam6yDn6EwCFw2QO1AfSnYyeG%2FFxsQUzj0cXEMuCk%2FryoSOxY2MVnEkK2dQn9cM74B8SQfCRq%2B0c8TK6Mch3CQ29OkUEeGtIh9j%2F4JF3NcqkBAntcbbvH%2BJDXMakkwybgisr7GwsMoidrDxI%2FAwyPpDADt9e8%2BQweALbpQY0mo4GZNaEu0Rc5nAqH1J5OjBbEydoiIMSQHah2UgHMOu0ytYGOrIBA7%2BJIQPrc8lI3Xk%2FuX9wOXXeLdPxQv0gQ5r10iRjh1hC9aT3%2BK%2BLKUDZo0SxrxFWA7bcxdNYA9kBsmm%2F9gA25vfZ4quNROTqd17T3k3NJT7JJGWCTIt3KxpyePhbKVJEXcfWhVOEL2EwBC7cBAcqe5PlBwWAgwnqhyVopkionYKI49pKBD4BxaU0zkBWmMjB0UdxMqY8L8%2Bc0CC3wpqY75IKUc7Y6yqARbgBVuNlQyiHzA%3D%3D&X-Amz-Signature=45d251369f47ba12f69c202fdb749a066cbc9f345037779592439254444b126b&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =698x372")

## Sum up

If we sum all this up, your login setup should look like this if you just need a `true / false` login status:

```javascript
window.beOpAsyncInit = function () {
  BeOpSDK.init({
    account: "YOUR_ACCOUNT_ID",
  });
  BeOpSDK.__logUser(YourAuthService.isUserLogged());
  BeOpSDK.__onLoginRequest(function () {
    return new Promise((resolve) => {
      YourAuthService.showAuthLayer(function (isLoggedIn) {
        resolve(isLoggedIn);
      });
    });
  });
  BeOpSDK.watch();
};
```

And if you want to attach Collective Audience™ contents participations to your own user id, your setup should look like this:

```javascript
window.beOpAsyncInit = function () {
  BeOpSDK.init({
    account: "YOUR_ACCOUNT_ID",
    siteUserID: YourAuthService.getUserId(),
  });
  BeOpSDK.__logUserID(YourAuthService.getUserId());
  BeOpSDK.__onLoginRequestWithID(function () {
    return new Promise((resolve) => {
      YourAuthService.showAuthLayer(function (userId) {
        resolve(userId);
      });
    });
  });
  BeOpSDK.watch();
};
```

Discover on that page *(→ site-user-id)* how you can take advantage of such a setup