Unable to send id_token to external API backend from actions react remix

Retired Boards Appdev Authentication
1

I created a new remix application using the cli, and I’m trying to send a request using fetch from actions in my react component but no matter what I do, when I call fetch the Authorization headers are empty.

This is my index code: as you can see I had to actually create the Bearer token with the content of sessionToken taken from :

const { session, sessionToken } = await authenticate.admin(request);

import React, { useState } from "react";
import ConfigService from '../api/config-service';
import { authenticate } from "../shopify.server";
import { Accounts } from "../components/Accounts";
import pkg from 'jsonwebtoken';
const { sign } = pkg;

export const action = async({ request }) => {
  const { email, password } = await request.formData();
  const { session, sessionToken } = await authenticate.admin(request);

  const token = sign(sessionToken, process.env.SHOPIFY_API_SECRET, { algorithm: 'HS256' });

  const configService = new ConfigService();
  const data = await configService.createUserAccount({ email, password }, token, session.shop);
  
  return { data };
};

export default function Index() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword] = useState('');
  const [error] = useState('');
  const [isSubmitting] = useState(false);

  return (
    <Accounts 
    email={email} 
    setEmail={setEmail}
    password={password}
    setPassword={setPassword} 
    confirmPassword={confirmPassword} 
    error={error}
    isSubmitting={isSubmitting}
    ></Accounts>
  );
}

however creating the Bearer token with the sessionToken didn’t create the right signature so when I validate the signature I got different hashes: this is how I’m validating the received Bearer I manually created.

const [header, payload, signature] = originalToken.split('.');
    console.log(header);
    console.log(payload);
    const generatedSignature = crypto
      .createHmac('sha256', process.env.SHOPIFY_API_SECRET)
      .update(header + '.' + payload)
      .digest('base64');

I already tried with the ‘.’ and removing the ‘.’ character in the header + payload join and in both cases the generated signature doesn’t match.

I also tried creating an app proxy but I’m unable to make it work, if I try a fetch to ‘/apps/proxy’ which is configured in my application app proxy setup I just receive an exception from fetch because of a malformed url.

the documentation stands that sending a fetch would automatically create the authorization header but this is not happening at all.

Please some help! thanks in advance.

this is the createUserAccount code that sends a POST request to my backend:

createUserAccount = async (user: User, accessToken: string, shop: any): Promise<Response | unknown> => {
    const { email, password } = user;

    try {
      const response = await fetch(`${this.proxy_url}`, {
      method: 'POST',
      body: JSON.stringify({ email, password }),
    });

    console.log(response);

    return response;

    } catch(e) {
      console.log('Invalid credentials');
      console.log(e);
    }
  };