How to embed the promoter dashboard inside your app and automatically log promoters in

//node backend
var express = require("express");
var axios = require("axios");
var app = express();
var bodyParser = require("body-parser");
var cors = require('cors');

app.use(bodyParser.json());
app.use(cors());

app.post("/fp-iframe-login", function (req, res) {
  var promoter_id = req.body.promoter_id;
  var accountId = "your_account_id"; // Replace with your account ID
  var apiKey = "your_api_key"; // Replace with your API key
  
  console.log("Requesting iframe login for promoter:", promoter_id);
  
  axios
    .post(
      `https://v2.firstpromoter.com/api/v2/promoters/iframe_login?promoter_id=${promoter_id}`,
      {},
      {
        headers: {
          "Authorization": `Bearer ${apiKey}`,
          "Account-Id": accountId
        }
      }
    )
    .then(function (response) {
      res.send(response.data.access_token);
    })
    .catch(function (error) {
      console.log("Error occurred:", error.response?.data || error.message);
      res.status(500).send("Authentication failed");
    });
});

// php backend

<?php

$apiKey = "your_api_key"; // Replace with your API key
$accountId = "your_account_id"; // Replace with your account ID

// Create a new HTTP client
$client = new GuzzleHttp\Client();

// Handle POST request on /fp-iframe-login route
if ($_SERVER['REQUEST_METHOD'] === 'POST' && $_SERVER['REQUEST_URI'] === '/fp-iframe-login') {
  $input = json_decode(file_get_contents('php://input'), true);
  $promoterID = $input['promoter_id'];
  
  $url = 'https://v2.firstpromoter.com/api/v2/promoters/iframe_login?promoter_id=' . $promoterID;
  $headers = [
    'Authorization' => 'Bearer ' . $apiKey,
    'Account-Id' => $accountId
  ];
  
  try {
    $response = $client->post($url, ['headers' => $headers]);
    
    $data = json_decode($response->getBody()->getContents(), true);
    echo $data['access_token'];
  } catch (Exception $e) {
    http_response_code(500);
    echo "Authentication failed";
  }
  
  exit;
}

?>

//react frontend
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function MyIframeComponent() {
  const [loading, setLoading] = useState(true);
  const [loadingError, setLoadingError] = useState(false);
  const [accessToken, setAccessToken] = useState(null);

  useEffect(() => {
    axios.post('http://localhost:3000/fp-iframe-login', { promoter_id: 7497107 })
      .then((response) => {
        setAccessToken(response.data);
      })
      .catch((error) => {
        console.log(error);
        setLoadingError(true);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading || loadingError ? (
        <div>
          {loading ? <div>Loading the iframe</div> : null}
          {loadingError ? <div>Oops, there seems to have been a problem</div> : null}
        </div>
      ) : (
        <iframe
          height="850px"
          width="100%"
          frameBorder="0"
          allow="clipboard-write"
          src={`https://mycustom.domain.com/iframe?tk=${accessToken}`}
        />
      )}
    </div>
  );
}

export default MyIframeComponent;

\\ vue frontend 
<template>
  <div>
    <div v-if="loadingError || loading">
      <div v-if="loading">Loading the iframe</div>
      <div v-if="loadingError">Oops there seems to have been a problem</div>
    </div>

    <iframe
      v-else
      height="850px"
      width="100%"
      frameborder="0"
      allow="clipboard-write"
      :src="`https://mycustom.domain.com/iframe?tk=${accessToken}`"
    />
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue'
import axios from 'axios'

const loading = ref(true)
const loadingError = ref(false)
const accessToken = ref(null)

onBeforeMount(() => {
  axios
    .post('http://localhost:3000/fp-iframe-login', { promoter_id: 7497107 })
    .then((response) => {
      accessToken.value = response.data
    })
    .catch((error) => {
      console.log(error)
      loadingError.value = true
    })
    .finally(() => {
      loading.value = false
    })
})
</script>

//angular
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-my-component',
  template: `
    <div>
      <div *ngIf="loadingError || loading">
        <div *ngIf="loading">Loading the iframe</div>
        <div *ngIf="loadingError">Oops, there seems to have been a problem</div>
      </div>

      <iframe
        *ngIf="!loading && !loadingError"
        height="850px"
        width="100%"
        frameborder="0"
        allow="clipboard-write"
        [src]="iframeSrc"
      >
      </iframe>
    </div>
  `,
})
export class MyIframeComponent implements OnInit {
  loading = true;
  loadingError = false;
  accessToken: string | null = null;
  iframeSrc = '';

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http
      .post<string>('http://localhost:3000/fp-iframe-login', { promoter_id: 7497107 })
      .subscribe({
        next: (response) => {
          this.accessToken = response;
          this.iframeSrc = `https://mycustom.domain.com/iframe?tk=${this.accessToken}`;
        },
        error: (error) => {
          console.log(error);
          this.loadingError = true;
        },
        complete: () => {
          this.loading = false;
        }
      });
  }
}

<!DOCTYPE html>
<html>
<head>
  <title>FirstPromoter Dashboard Embed</title>
</head>
<body>
  <div id="container">
    <!-- iframe will be rendered here -->
  </div>

  <script>
    const container = document.getElementById('container');
    let loading = true;
    let loadingError = false;
    let accessToken = null;

    // Show loading state
    renderLoading();

    fetch('http://backend/fp-iframe-login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ promoter_id: 7497107 })
    })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.text();
      })
      .then(data => {
        accessToken = data;
        renderIframe();
      })
      .catch(error => {
        console.log(error);
        loadingError = true;
        renderError();
      })
      .finally(() => {
        loading = false;
      });

    function renderIframe() {
      container.innerHTML = '';
      const iframe = document.createElement('iframe');
      iframe.height = '850px';
      iframe.width = '100%';
      iframe.frameBorder = '0';
      iframe.allow = 'clipboard-write';
      iframe.src = `https://mycustom.domain.com/iframe?tk=${accessToken}`;
      container.appendChild(iframe);
    }

    function renderError() {
      container.innerHTML = '';
      const errorDiv = document.createElement('div');
      errorDiv.textContent = 'Oops, there seems to have been a problem';
      container.appendChild(errorDiv);
    }

    function renderLoading() {
      container.innerHTML = '';
      const loadingDiv = document.createElement('div');
      loadingDiv.textContent = 'Loading the iframe';
      container.appendChild(loadingDiv);
    }
  </script>
</body>
</html>