> ## Documentation Index
> Fetch the complete documentation index at: https://docs.openfinance-hackathon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuring Client Certificates

> How to configure client certificates in Postman to enable mTLS for Open Finance requests.

export const Carousel = () => {
  const images = [{
    src: '/images/postman/Spotlight_3.png',
    alt: 'Step 1',
    title: 'Click Settings'
  }, {
    src: '/images/postman/Spotlight_4.png',
    alt: 'Step 2',
    title: 'Click Certificates'
  }, {
    src: '/images/postman/Spotlight_5.png',
    alt: 'Step 3',
    title: 'Click Add Certificates'
  }, {
    src: '/images/postman/Spotlight_6.png',
    alt: 'Step 4',
    title: 'Set the Host to *.altareq1.sandbox.apihub.openfinance.ae '
  }, {
    src: '/images/postman/crt_spotlight.png',
    alt: 'Step 5',
    title: 'Set to CRT file to the client_transport.pem file in your Client Pack'
  }, {
    src: '/images/postman/Spotlight_8.png',
    alt: 'Step 6',
    title: 'Set to Key file to the client_transport.key file in your Client Pack'
  }, {
    src: '/images/postman/Spotlight_9.png',
    alt: 'Step 7',
    title: 'Click Add'
  }];
  let currentIndex = 0;
  const showSlide = index => {
    const slides = document.querySelectorAll(".carousel-image");
    const titles = document.querySelectorAll(".carousel-title");
    const tags = document.querySelectorAll(".carousel-tagline");
    const steps = document.querySelectorAll(".carousel-step");
    slides.forEach((img, i) => img.style.display = i === index ? "block" : "none");
    titles.forEach((title, i) => title.style.display = i === index ? "block" : "none");
    tags.forEach((tag, i) => tag.style.display = i === index ? "block" : "none");
    steps.forEach((step, i) => step.textContent = `Step ${index + 1}/${images.length}`);
  };
  const next = () => {
    currentIndex = (currentIndex + 1) % images.length;
    showSlide(currentIndex);
  };
  const prev = () => {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    showSlide(currentIndex);
  };
  React.useEffect(() => {
    showSlide(0);
  }, []);
  return <div className="carousel">

      {images.map((img, i) => <div key={i} style={{
    width: "100%"
  }}>
          <div className="title carousel-title">{img.title}</div>
          <div className="image-container">
            <img src={img.src} alt={img.alt} className="carousel-image" style={{
    display: "none"
  }} />
            <div className="tag-line carousel-tagline" style={{
    display: "none"
  }} dangerouslySetInnerHTML={{
    __html: img.tagline
  }} />
          </div>
        </div>)}

      <div className="controls">
        <div className="step-label carousel-step">
          Step 1/{images.length}
        </div>
        <button className="small-btn" onClick={prev}>
          ← Previous
        </button>
        <button className="small-btn" onClick={next}>
          Next →
        </button>
      </div>

      <style>{`
        .carousel {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 1rem;
        }

        .title {
          width: 100%;
          font-size: 0.75rem;
          font-weight: bold;
          margin-left: 2rem;
          margin-bottom: 0.5rem;
        }

        .image-container {
          width: 100%;
          position: relative;
          text-align: center;
        }

        .carousel-image {
          width: 100%;
          border-radius: 8px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .tag-line {
          position: absolute;
          font-size: 0.8em;
          bottom: 6px;
          left: 8px;
          background: white;
          padding: 0 4px;
          border-radius: 6px;
        }

        .step-label {
          font-size: 0.75rem;
          padding-top: 0.4rem;
          font-weight: bold;
        }

        .controls {
          margin-top: 0.75rem;
          display: flex;
          gap: 1rem;
          width: 95%;
          justify-content: center;
        }

        .small-btn {
          font-size: 0.75rem;
          padding: 0.3rem 0.6rem;
          background-color: #3b82f6;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          transition: background 0.2s ease;
        }

        .small-btn:hover {
          background-color: #2563eb;
        }
      `}</style>
    </div>;
};

All Open Finance requests use mTLS as a security mechanism where both the client (Postman, in this case) and the server authenticate each other by exchanging certificates.

### Step 1 - Go to Settings → Certificates → Add Certificate

In Postman, client certificates are managed under the Settings menu. By navigating to **Certificates** and clicking **Add Certificate**, you open the interface where you can associate certificates with specific hosts.

### Step 2 - set the Host to \*.altareq1.sandbox.apihub.openfinance.ae

The **Host** field tells Postman which requests should include the client certificate. By using `*.altareq1.sandbox.apihub.openfinance.ae`, you ensure that all subdomains under this sandbox domain will automatically use the certificate when making requests.

### Step 3 - upload the client\_transport.PEM  file from the Client Pack into the CRT file

The **CRT file** is your client certificate, which proves your identity to the server. Upload the `client_transport.PEM` file provided in your Client Pack to ensure Postman can authenticate your requests properly.

### Step 4 - upload the client\_transport.KEY file from the Client Pack into the KEY file

The **KEY file** is the private key associated with your client certificate. Uploading `client_transport.KEY` allows Postman to securely sign the handshake and complete the mTLS authentication process.

<Carousel />