# SDK Authentication

When an Airkit application requires authentication in order to be accessed within an existing web page, we recommend handling the authentication process server-side. This prevents you from exposing any secure information in the browser while allowing you to use your existing processes to handle authentication.

Secret information should be handled by an [App API](../../integration-guides/application-apis) endpoint. This is meaningfully separate from the [SDK API endpoint you already configured](sdk-quickstart). The App API endpoint serves as an intermediary, as it can pass Auth tokens without exposing them to the user's web browser.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-030848cc33a178f352e03ebd80c34a8585a3175b%2Fsdk-requiring-authentication-v184-0.png?alt=media)

If the App API endpoint supports CORS for targeted host names and is given access to an Auth token, it can call on the SDK API endpoint via an [HTTP Request](../../data-operations/data-operation-overview/http-request-data-operation) after inserting the Auth token into the header. The SDK API endpoint will start a Journey return a `session_id` and a `url`, corresponding to the Session ID and the [Journey Link](../../concepts/sessions/linking-to-sessions) respectively. This information can be used in two ways:

* The App API endpoint can return the `session_id` and `url` in the same format the SDK API endpoint did, effectively simulating an SDK API endpoint.
* The App API endpoint can pass the `session_id` and `url` to the web browser which can itself use that information to define the `Launch trigger` (see [configuration documentation](https://docs.airkit.ai/?q=sdk-configuration#configappurl) for more).

## Code Examples

### Use App API as direct SDK API Proxy

If an App API endpoint returns a payload formatted in the same way as a payload returned by an out-of-the-box SDK API endpoint, it simulates the behavior of an SDK API perfectly.

In such cases, the URL of the App API endpoint (`APP_API_URL`) can function as the `SDK_API_URL` in your web page, such as in the following example:

```html
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <title>Airkit web SDK</title>
  </head>
  <body>
    <div id="airkit-sdk"></div>
    <script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
    <script>
      const sdk = new window.AirkitWebSDK({ renderMode: "inline" })
      sdk.render({ url: APP_API_URL }) 
    </script>
  </body>
</html>
```

The App API endpoint is a proxy for the SDK API endpoint, so the SDK will handle the rest.

### Define the `Launch trigger` in the Web Browser

The following example shows how an App API endpoint (`APP_API_URL`) that returns the `session_id` and `url` in the header as `"x-airkit-session-id"` and `"x-airkit-session-url"` can use them to define the `Launch trigger`:

```html
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <title>Airkit web SDK</title>
  </head>
  <body>
    <div id="airkit-sdk"></div>
    <script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
    <script>
      const sdk = new window.AirkitWebSDK({ renderMode: "inline" })
      window
        .fetch(APP_API_URL, FETCH_OPTIONS)
        .then((response) => {
        	const sessionId = response.headers.get("x-airkit-session-id")
          const appURL = response.headers.get("x-airkit-session-url")
          sdk.render({ sessionId, appURL })
      	})
        .catch((error) => {
        // Log error
      }
    </script>
  </body>
</html>
```
