# Frontend setup Once your backend can obtain Spotnana access tokens, configure your frontend to load the Spotnana iframe and handle the token exchange. ## Query parameter When loading the iframe, include the `idp=token-exchange-auth` query parameter in the URL. This instructs the Spotnana system to initiate the token exchange authentication flow. For example, the URL containing the query parameter may look like this: `https:///path?idp=token-exchange-auth&orgId=` **Note:** This query parameter clears all previous session storage and starts a fresh authentication. This is also important to capture any changes that may have happened to the user's status within your system since the last session (e.g., a user's access may have been revoked if they've left the organization). ## Frontend token exchange process When the iframe loads, Spotnana and your application exchange messages through the browser's [postMessage](https://en.wikipedia.org/wiki/Web_Messaging) API. Here's how the process works: 1. Spotnana sends a `TOKEN_EXCHANGE_REQUEST` message to your application. Here's a sample message you may receive: ``` { "type": "TOKEN_EXCHANGE_REQUEST", "from": "spotnana-embed" } ``` 1. Your application listens for this message. Then, it fetches the access token and refresh token from your [backend setup](#token-exchange-request), and responds with the following `TOKEN_EXCHANGE_RESPONSE`. ``` { "type": "TOKEN_EXCHANGE_RESPONSE", "payload": { "accessToken": "", "refreshToken": "" } } ``` **Note:** If the token exchange fails, Spotnana sends a `TOKEN_EXCHANGE_ERROR` message as shown below: ``` { "from": "spotnana-embed", "type": "TOKEN_EXCHANGE_ERROR", "payload": { "errorCode": "INVALID_TOKEN", "errorMessage": "" } } ``` Your application must be designed to listen for this event and handle authentication failures appropriately (e.g., redirecting the user to a login page or displaying an error message). ## Code sample to implement frontend logic The following HTML sample demonstrates the frontend integration. This code will render the Spotnana iframe upon the click of a button (i.e., in this code, clicking the **Launch Spotnana** button will initiate the rendering). This code also handles the frontend token exchange. ```html Spotnana Embed

Spotnana Integration

```