Missing Authorization key in headers array, how to pass auth token to when posting data from form

[nihal]

hey guys, I am working with shopify custom app with php template, I have a react form and a post route when I try to post that form because I am using middleware "shopify.auth" in that route it says :

Missing Authorization key in headers array


here is my form code:

import { Form, FormLayout, TextField, Button } from "@shopify/polaris";
import { useState } from 'react';
import { useAppQuery } from '../hooks';
// import axios from 'axios';

function SubmitForm(props) {
    const [userId, setUserId] = useState('');
    const [apiToken, setApiToken] = useState('');
    const [apiId, setApiId] = useState('');
    const [loading, setLoading] = useState(false);
    const [formData, setFormData] = useState({
        apiKey: ''
      });

    const handleChange = (event) => {
      setFormData({ ...formData, [event.target.name]: event.target.value });
    };

    const handleSubmit =  (event) => {
        // Show loader
        event.preventDefault();
        setLoading(true);

        try {
            postDataToController(formData);
            //Send data to the backend API
            // const url = `/api/orders/get`;

            // // Send a GET request to the backend API
            // const response = await fetch(url);

            // if (!response.ok) {
            //     throw new Error('Failed to submit form');
            // }

            // Hide loader
            setLoading(false);

            // Handle successful form submission
            console.log('Form submitted successfully !!');
            props.onSuccess(); // Call the success callback passed from parent component
        } catch (error) {
            console.error('Error occurred:', error);

            // Hide loader
            setLoading(false);

            // Show error message
            props.onError(); // Call the error callback passed from parent component
        }
    };

    const postDataToController = async (formData) => {
        try {
            const response = await fetch('/api/saveprofile', {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData),
          });
      
          if (!response.ok) {
            throw new Error(`Error: ${response.statusText}`);
          }
      
          const responseData = await response.json(); // Handle success response if needed
          console.log('Success:', responseData); // For debugging and feedback
        } catch (error) {
          console.error('Error:', error); // Handle errors appropriately (e.g., display error messages)
        }
    };

    return (
        <Form onSubmit={handleSubmit}>
            <FormLayout>
                <TextField
                    label="add name"
                    value={userId}
                    onChange={setUserId}
                    required
                />
                <Button primary submit loading={loading}>
                    {loading ? 'Saving...' : 'Save'}
                </Button>
            </FormLayout>
        </Form>
    );
}

export default SubmitForm;

here is my route code web.php:

Route::post('/api/saveprofile', function (Request $request) {
    $session = $request->get('shopifySession');
    $client = new Welcome();
    $result = $client->myFunction();
    return response()->json(['message' => "Got 100% '$result' webhook"], 200);
})->middleware('shopify.auth');