---
source: https://qlik.dev/embed/capability-api/authenticate/mashups-authentication-cloud/
last_updated: 2025-11-21T14:05:39Z
---

# Authentication using browser redirection with Qlik Cloud

> **Use qlik-embed for new integrations:** For new integrations, use [qlik-embed](https://qlik.dev/embed/qlik-embed/)
> to safeguard against third-party cookie blocking and unlock future features.
>
> This tutorial remains available for those with existing implementations,
> but upgrading to qlik-embed ensures a robust, forward-looking solution.
>
> To do something similar with qlik-embed, refer
> to [qlik-embed auth overview](https://qlik.dev/embed/qlik-embed/authenticate/connect-qlik-embed/).

Authentication is required to access Qlik Sense resources such as visualizations
that are used in mashups. This topic describes how to authenticate with
Qlik Cloud when using an external web server to host a mashup. In the
example provided here, you will create JavaScript code that redirects the user
to the login page of the tenant. After a successful login, the browser is
redirected back to the web server where the mashup is rendered.

## Creating the main JavaScript file

You should have the following information available:

- The URL of the Qlik Cloud tenant.
- The app ID.
- The web integration ID for the host serving your mashup. For more information, see [Managing web integrations](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Admin/mc-adminster-web-integrations.htm)
  on Qlik Help.

Add the following code to the file. You will name this file `helpdesk.js`.

<details>
  <summary>Code sample (`helpdesk.js`):</summary>

  ```javascript
  var config = {
      host: '<TENANT_URL>',
      prefix: '/',
      port: 443,
      isSecure: true,
      webIntegrationId: '<WEB_INTEGRATION_ID>'
  };

  //Redirect to login if user is not logged in
  async function login() {
      function isLoggedIn() {
          return fetch("https://"+config.host+"/api/v1/users/me", {
              method: 'GET',
              mode: 'cors',
              credentials: 'include',
              headers: {
                  'Content-Type': 'application/json',
                  'qlik-web-integration-id': config.webIntegrationId,
              },
          }).then(response => {
              return response.status === 200;
          });
      }
      return isLoggedIn().then(loggedIn =>{
          if (!loggedIn) {
              window.location.href = "https://"+config.host+
              "/login?qlik-web-integration-id=" + config.webIntegrationId +
              "&returnto=" + location.href;
              throw new Error('not logged in');
          }
      });
  }
  login().then(() => {
      require.config( {
          baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host +
          (config.port ? ":" + config.port : "") + config.prefix + "resources",
          webIntegrationId: config.webIntegrationId
      } );
      //Load js/qlik after authentication is successful
      require( ["js/qlik"], function ( qlik ) {
          qlik.on( "error", function ( error ) {
              $( '#popupText' ).append( error.message + "<br>" );
              $( '#popup' ).fadeIn( 1000 );
          } );
          $( "#closePopup" ).click( function () {
              $( '#popup' ).hide();
          } );
          //open apps -- inserted here --
          var app = qlik.openApp( '<APP_ID>', config );
         
          //get objects -- inserted here --
          app.visualization.get('<OBJECT_ID>').then(function(vis){
          vis.show("QV01");
          } );
          app.visualization.get('<OBJECT_ID>').then(function(vis){
          vis.show("QV02");
          } );
          app.visualization.get('<OBJECT_ID>').then(function(vis){
          vis.show("QV03");
          } );
          app.visualization.get('<OBJECT_ID>').then(function(vis){
          vis.show("QV04");
          } );
          app.visualization.get('<OBJECT_ID>').then(function(vis){
          vis.show("QV05");
          } );
          app.visualization.get('<OBJECT_ID>').then(function(vis){
          vis.show("QV06");
          } );
      } );
  });
  ```
</details>

## Creating your HTML file

Create an HTML file to display your mashup. For example:

<details>
  <summary>Code sample (`helpdesk.html`):</summary>

  ```javascript
  <!doctype html>
  <html>
  <head>
  <link rel="stylesheet" href="https://<TENANT_URL>/resources/autogenerated/qlik-styles.css">
  <script src="https://<TENANT_URL>/resources/assets/external/requirejs/require.js"></script>
  <script src="helpdesk.js"></script>
  <style>
  div.flex-container {
      display: flex;
      flex-wrap: wrap;
      margin: 0 45px 45px 0;
  }
  div.qvobject {
      flex: 1 1 auto;
      height: 300px;
      min-width: 400px;
      margin: 45px 0 0 45px;
  }
  </style>
  </head>
  <body>
  <div class="flex-container">
      <div id="QV01" class="qvobject"></div>
      <div id="QV02" class="qvobject"></div>
      <div id="QV03" class="qvobject"></div>
      <div id="QV04" class="qvobject"></div>
      <div id="QV05" class="qvobject"></div>
      <div id="QV06" class="qvobject"></div>
  </div>
  </body>
  </html>
  ```
</details>

## Testing the authentication flow

1. Refresh your mashup in the browser (open `helpdesk.html`).

   The browser is redirected to the tenant login page.

2. Log in to your tenant.

   The browser is redirected back to your mashup. You are now authenticated
   and your mashup can access Qlik Cloud resources.