How to get x-gcp-marketplace-token in my ReactJS signup page?

I'm developing a Google Marketplace Saas Integration currently .

I'm stuck in the frontend integration as of now . Reference : https://cloud.google.com/marketplace/docs/partners/integrated-saas/frontend-integration

I've created 2 pages using ReactJS i.e. Signup page and Login page and deployed my frontend code .

As we can see from the above doc snippet " When they click the button, Google Cloud sends an HTTP POST request to your sign up page, with a JSON Web Token (JWT) in the x-gcp-marketplace-token parameter. "

Google Cloud makes an HTTP POST request to my signup page ? How do I get this x-gcp-marketplace-token that Google is sending in my Signup page ???

App.jsx file code:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Signup from "./pages/Signup/Index"
import Login from "./pages/Login/Index";
function App() {

  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<Login />}/>
          <Route path="/signup" element={<Signup />} />
        </Routes>
      </Router>
    </>
  )
}

export default App

Signup page code:

const Signup = () => {
  
  const [form] = Form.useForm();
  const dispatch = useDispatch();

  // signup handler 
  const handleSignup = async (values) => {
    const params = new URLSearchParams(window.location.search);
    console.log("params logged :",params)
    const jwt = params.get('x-gcp-marketplace-token');
    if (!jwt) {
        alert('No JWT token found.');
        return;
    }
    dispatch(signup({...values,jwt}))
    form.resetFields()

  };


  return (
    <>
      {/* Signup form built using Ant Design */}
    </>
  )
}

export default Signup

Tried to get x-gcp-marketplace-token in my Signup page but no success . expected to receive x-gcp-marketplace-token in url params .

You need to handle the x-gcp-marketplace-token in the HTTP POST request headers, not in the URL parameters. Since React is a frontend framework, it doesn't natively handle POST requests like a backend server would.

1. Use a backend service to receive the POST request from Google Cloud, and extract the JWT from the x-gcp-marketplace-token header.

   const express = require('express');
   const app = express();
   const port = 5000;
   
   app.post('/api/signup', (req, res) => {
       const jwt = req.headers['x-gcp-marketplace-token'];
       if (!jwt) {
           return res.status(400).send('No JWT token found.');
       }
       res.redirect(`/signup?x-gcp-marketplace-token=${jwt}`);
   });
   
   app.listen(port, () => {
       console.log(`Server running on port ${port}`);
   });
   

2. Your existing React code to read the JWT from URL parameters should work.

   const Signup = () => {
       const params = new URLSearchParams(window.location.search);
       const jwt = params.get('x-gcp-marketplace-token');
       if (!jwt) {
           alert('No JWT token found.');
           return;
       }
       // Proceed with your signup logic
   };
   

3. Make sure the URL in Google Cloud is set to point to your backend endpoint (/api/signup for example).