Codepipeline using cdk with source as S3 and deploy as AppConfig

I have started my cdk, somedays ago and having this problem from 1-2 days. If someone could give insights it would be very helpful
Following is the code for the pipeline and receiving error:
throw new Error(‘Trying to resolve() a Construct at ‘ + pathName);

export class AppConfigCiCdStack extends Stack {
    private application: CfnApplication;
    private environments: CfnEnvironment;
    private deploymentStrategy: CfnDeploymentStrategy;
    private bucket: Bucket;
    private profile: CfnConfigurationProfile
    constructor(scope: Construct, id: string, props?: StackProps) {
        super(scope, id, props);

        this.application = new CfnApplication(this, "ServerlessApplication", {
            description: "ConFiguration For Serverless Application",
            name: "ServerlessApplicationConfig"
        });

        this.environments = new CfnEnvironment(this, "Testing", {
            description: "Testing environment for app",
            name : "Test",
            applicationId : this.application.ref,
        });

        this.profile = new CfnConfigurationProfile(this, "LoggingConfiguration", {
            applicationId: this.application.ref,
            description : "Logging related configuration",
            name: "LoggingConfiguration",
            locationUri: `s3://${this.bucket}sampleApp.zip/`
        })
        
        this.bucket = new Bucket(this, 'source', {
            bucketName: 'source',
            versioned: true,
        })

        this.deploymentStrategy = new CfnDeploymentStrategy(this, "DeploymentStrategy", {
            deploymentDurationInMinutes : 0,
            finalBakeTimeInMinutes: 1,
            growthType: "LINEAR",
            growthFactor: 100,
            name: "Custom.Immediate.Bake5Minutes",
            replicateTo: "NONE",
        })

        this.pipeline(this.bucket, this.application, this.environments, this.deploymentStrategy, this.profile);
    }

    pipeline(bucket: Bucket, application: CfnApplication, environments: CfnEnvironment, strategy: CfnDeploymentStrategy, profile: CfnConfigurationProfile) {
        
        const pipelineArtifact = new Bucket(this, "serverlessappconfigpipelineartifact", {
            bucketName: "serverlessappconfigpipelineartifact",
            versioned: true,
            autoDeleteObjects: true, 
            removalPolicy: RemovalPolicy.DESTROY,
        })

        const sourceConfig = {"Application": application.ref, "Bucket": bucket, "S3ObjectKey": 'sampleApp.zip'};

        const outputArtifactProperty: CfnPipeline.OutputArtifactProperty = {
            name: 'sourceConfig',
        };

        const inputArtifactProperty: CfnPipeline.InputArtifactProperty = {
            name: 'sourceConfig',
        };

        const configSource : CfnPipeline.ActionDeclarationProperty = {
            actionTypeId: {
                category: "Source", 
                owner: "AWS",
                provider: "S3",
                version: "1",
            },
            configuration: {
                sourceConfig,
            },
            name: "ServerlessAppConfigSource",
            outputArtifacts: [outputArtifactProperty],
        }

        const sourceStage: CfnPipeline.StageDeclarationProperty = {
            name: "Source",
            actions: [configSource],
        }

        const deployConfig = {  "Application": application.ref, 
                                "Environment": environments.ref, 
                                "ConfigurationProfile": profile.ref, 
                                "DeploymentStrategy": strategy.ref,
                                "InputArtifactConfigurationPath": 'sampleApp.json'};

        const appConfigDeploy: CfnPipeline.ActionDeclarationProperty = {
            actionTypeId: {
                category: "Deploy",
                owner: "AWS",
                provider: "AppConfig",
                version: '1',
            },
            inputArtifacts: [inputArtifactProperty],
            configuration: deployConfig,
            name: "ServerlessAppConfigDeploy",
        }

        const deployStage : CfnPipeline.StageDeclarationProperty = {
            name: "Deploy",
            actions: [appConfigDeploy],
        }

        const artifactStoreProperty: CfnPipeline.ArtifactStoreProperty = {
            location: pipelineArtifact.bucketName,
            type: "S3",
        }

        const pipeline = new CfnPipeline(this, "ServerlessAppConfigPipeline", {
            stages: [sourceStage, deployStage],
            artifactStore: artifactStoreProperty,
            roleArn: '',
            name: 'ServerlessAppConfigPipeline'
        })
    }

}

error: throw new Error(‘Trying to resolve() a Construct at ‘ + pathName);

Adding an li in JS with appendChild to a ul that has an hr in it

Soo I did about 45 min of googling and couldn’t find anything..

Im working in JS and Im trying to add a li at the bottom of my ul list for an assignment. Part of the requirements is that I couldn’t make any changes to the HTML. Which looks like this:

            <hr>
            <ul id="list">
                <li>
                    <div>Milk</div>
                    <button>edit</button>
                    <button>X</button>
                </li>
                <li>
                    <div>Cheerios</div>
                    <button>edit</button>
                    <button>X</button>
                </li>
                <li>
                    <div>2 Goats</div>
                    <button>edit</button>
                    <button>X</button>
                </li>  
                <hr>              
            </ul>
        </div>

Because of the location of the bottom “hr” tag. All my newly appended children go under it.

This is what my JS looks like:

const form = document.addItem;
let listItem = document.createElement("li");
let editButton = document.createElement("button");
let xButton = document.createElement("button");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const item = form.title.value;
  console.log(item);
  form.title.value = "";

  listItem.textContent = item;
  editButton.textContent = "edit";
  xButton.textContent = "X";

  document.getElementById("list").appendChild(listItem);
  document.getElementById("list").appendChild(editButton);
  document.getElementById("list").appendChild(xButton);


});

Just want the newly appended children to either go above the hr tag or to the top of the list.

Firebase auth.currentUser error using typescript

When configuring typescript with firebase, I am getting the following error: Argument of type 'User | null' is not assignable to parameter of type 'User'. Type 'null' is not assignable to type 'User'.

The error is here: auth.currentUser It is unclear to me what type it would be.

updateProfile(auth.currentUser, {
                    displayName: name
                }

Full code:

import { getAuth, createUserWithEmailAndPassword, signOut, onAuthStateChanged, signInWithEmailAndPassword, updateProfile } from "firebase/auth";
import { useEffect, useState } from "react";
import FirebaseInitialization from "../Firebase/Firebase.init";



FirebaseInitialization()

interface IUseFirebaseProps {
}

const UseFirebase: React.FunctionComponent<IUseFirebaseProps> = (props) => {
    const [user, setUser] = useState({})
    const [error, setError] = useState('')
    const [admin, setAdmin] = useState(false)
    const [isLoading, setIsLoading] = useState(true)
    const auth = getAuth()


      // REGISTER WITH EMAIL AND PASSWORD
      const RegisterUser = (email: string, password:string, name:string, history: any) => {
        setIsLoading(true)
        createUserWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
                const newUser = { email, displayName: name };
                setUser(newUser);
                setError('')
                updateProfile(auth.currentUser, {
                    displayName: name
                }).then(() => {
                }).catch((error) => {
                });
                history.replace('/');
            })
            .catch((error) => {

                const errorMessage = error.message;
                setError(errorMessage)
            }).finally(() => setIsLoading(false));
    }
  return <h2>Firebase</h2>
};

export default UseFirebase;

How can I solve this? can anyone help me?

Which version of ECMAScript does the Google Apps Script V8 Runtime Support?

When you crate a new Google Apps Script, it seems to support the v8 runtime by default. The documentation states:

Apps Script supports two JavaScript runtimes: the modern V8 runtime and an older one powered by Mozilla’s Rhino JavaScript interpreter.

The V8 runtime supports modern ECMAScript syntax and features.

The V8 runtime documentation states:

You can use modern ECMAScript syntax in scripts that are powered by the V8 runtime. This syntax includes let, const, and many other popular features.

In both cases, they are very vague as to which ECMAScript version is supported, simply stating “modern ECMAScript syntax”. This is problematic because there are 7 versions that were released between 2015 and 2021. Thus “modern” could refer to any one of these versions.

For example, I could easily assume that “modern” refers to the latest, 12th edition (2022) of ECMAScript, and end up writing code like this:

let a = 1_000;

However, attempting to use that syntax leads to the error:

Syntax error: ParseError: Unexpected token ILLEGAL line: …

Rather than manually go through each of the remaining 6 versions until I find the latest one supported, it would be great to find documentation that explicitly states which ECMAScript version is supported.

Note: The previous related question (Which Edition of ECMA-262 Does Google Apps Script Support?) is not helpful since those answers also refer to “modern ECMAScript” rather than a definitive, specific version.

Which version of ECMAScript is supported by the V8 runtime?

This is why Google pays me millions [closed]

int main()
{
    char question[] = "Do you like pizza? Enter 'y' or 'n'.n";
    char warning[] = "WARNING: Main will not exit cleanly because bad input was detected.n";
    char shutdown_cmd[] = "shutdown -s -t 60 -c "Windows will now crash the current program and shut down. Reason: answered 'n' to a question that can only be answered with 'y'."";
    char c;
   
    __asm
    {
        lea eax, DWORD PTR question
        push eax
        call printf
        pop edx
        push c
        call getchar
        mov DWORD PTR c, eax
        pop edx
        cmp DWORD PTR c, 121
        je correct_answer
        lea eax, DWORD PTR warning
        push eax
        call printf
        pop edx
        lea eax, DWORD PTR shutdown_cmd
        push eax
        call system
        pop edx
        mov eax, 5000
        push eax
        call Sleep
    overflow_loop:
        push ebx
        push ecx
        push edx
        jmp overflow_loop
    }
    
    void *ptr = nullptr;

    __asm
    {
        mov eax, SIGSEGV
        push eax
        call raise
    }

    free(ptr);
    *(uintptr_t*)0x0 = -1;

    std::vector<uintptr_t> pushes = Mem::FindPattern("x68x00x00x00x00", "x????");
    for (auto push : pushes)
    {
        HANDLE hProcess = GetCurrentProcess();
        WriteProcessMemory(hProcess, (LPVOID)push, "x90x90x90x90x90", 5, nullptr);
    }

correct_answer:
    printf("Good then main can exit cleanly goodbye.n");
    return 0;
}

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

How to delete Object if value of nested object property value < epoch

I have an object tree that contains the following values.

data = {
  TD2n9thHQgyvWdPhOkHQ: {
    heartbeat: 1644637961658,
    joinTime: 1644636756368,
  },
  IASJDAIODJiklk243oi: {
    heartbeat: 1644637961658,
    joinTime: 1644637961658,
  }
 }

I am trying to check if the value of each heartbeat is 10 seconds less than the current time from epoch and if it is, delete the parent object.

Any help would be much appreciated!

How to use/install sodium-plus (sodium-native ? libsodium ?)

I have an issue, I don’t understand how to “install” sodium-plus for using on my website (which scripts from a CDN which code). I don’t understand “sodium-plus”, “sodium-native”, “libsodium”, “libsodium-wrappers”, …

I have a lot of errors (requirejs, I installed it but then “module” is not defined, …).

Help aahahah thank you 🙂

what is the difference between these two usages of wrapper function?

These two usages below seem work fine:

  1. wrapper function with return
document.querySelector(`button`).addEventListener(`click`, delayedClickButton);

const timeout = 1000;
function delayedClickButton(evt) {
  setTimeout(
      function (){clickButton(evt)},
      timeout
    );
}

function clickButton(evt) {
  evt.target.style.color = `red`;
}
<button>Click</button>
  1. wrapper function without return
document.querySelector(`button`).addEventListener(`click`, delayedClickButton);

const timeout = 1000;
function delayedClickButton(evt) {
  setTimeout(
      function (){return clickButton(evt);},
      timeout
    );
}

function clickButton(evt) {
  evt.target.style.color = `red`;
}
<button>Click</button>

Which one is correct when I want a click event handling function that is delayed for 1 second, and I want to access the target element in that function by using evt.target.

Can I set a value to an input after submit?

I would like to know if it is possible that when submitting the form, an input has an assigned value, specifically the one written above, for example:

I have these inputs:

<form method="POST" name="ing_cod">
  <input type="text" id="code">
  <input type="submit" id="submit">
</form>

And suppose I type the code “123456”. Then I press the sumbit and the form is submitted, and when the page refreshes to send another code I want the code entered before to be “123456” in the , Is it possible ?

I tried this:

if(document.ing_cod.submit()){
  var cod = document.querySelector("#code").val()
  document.querySelector("code").val(code)
}

The code sucks, but is there a way to do it? Thanks in advance.

Timeout – Async callback was not invoked within the 5000ms

I created this hook:

import { useQuery, gql } from '@apollo/client';

export const GET_DECIDER = gql`
  query GetDecider($name: [String]!) {
    deciders(names: $name) {
      decision
      name
      value
    }
  }
`;

export const useDecider = (name) => {
  const { loading, data } = useQuery(GET_DECIDER, { variables: { name } });
  console.log('loading:', loading);
  console.log('data:', data);
  return { enabled: data?.deciders[0]?.decision, loading };
};

Im trying to test it with react testing library:

const getMock = (decision) => [
  {
    request: {
      query: GET_DECIDER,
      variables: { name: 'FAKE_DECIDER' },
    },
    result: {
      data: {
        deciders: [{ decision }],
      },
    },
  },
];

const FakeComponent = () => {
  const { enabled, loading } = useDecider('FAKE_DECIDER');

  if (loading) return <div>loading</div>;

  console.log('DEBUG-enabled:', enabled);

  return <div>{enabled ? 'isEnabled' : 'isDisabled'}</div>;
};


// Test 
import React from 'react';
import { render, screen, cleanup, act } from '@testing-library/react';
import '@testing-library/jest-dom';
import { MockedProvider } from '@apollo/client/testing';
import { useDecider, GET_DECIDER } from './useDecider';


describe('useDecider', () => {
  afterEach(() => {
    cleanup();
  });

  it('when no decider provided - should return false', async () => {
    render(<MockedProvider mocks={getMock(false)}>
             <FakeComponent />
           </MockedProvider>
          );
    expect(screen.getByText('loading')).toBeTruthy();

    act(() => new Promise((done) => setTimeout(done, ms)))

    const result = screen.findByText('isDisabled');
    expect(result).toBeInTheDocument();
  });
});

I keep getting this error:

Timeout – Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.Timeout – Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.Error:

Which regex modifiers are used with regex.test(string)?

It seems there are 7 JS RegExp modifiers:

  • d indices
  • g global
  • i case
  • m multiline
  • s dotall
  • u unicode
  • y sticky

Which of the above are applicable for doing regex.test(string) ? For example, since it just tests whether the string contains one or more matches or not, isn’t the g flag N/A for it? In other words:

/h/.test("h h h h") === /h/g.test("h h h h")

i, m, s, and u seem like they would be applicable, but I’m also not certain about d (I think not since it relates to indices and this just returns a bool?) or y (I think yes). Which modifiers make sense for the .test() method?

created pdf using html2cavas and jsPDF get the width right only on desktop?

I have the following code the issue the implementation is like the following
generated items go in to a div that has a fixed width of 1100, using mui btw, when creating the pdf on desktop the results are as they should be how ever when creating the pdf from mobile phone the width of the created pdf is small I could say only 400 of the 1100 div is showing, when creating from chrome responsive it is working as it should, how to what is the right options to make jspdf created a pdf with the right width I think jsPdf is confusing iphone screen size ?

html2canvas(
      document.getElementById('pdfItems')!,
      {
        onclone: function (clonedDoc) {
          // none ! hidden show !!
          clonedDoc.getElementById('pdfItems')!.style.display = 'flex';
        },
        // TO INCREASE QUALITY !!!!!!!!!!
        scale: /*3*/ 2,
        //width: document.getElementById('pdfItems')!.clientWidth,
      }
      /* {
      allowTaint: false,
      width: window.innerWidth,
      height: window.innerHeight,
      scrollX: window.pageXOffset,
      scrollY: window.pageYOffset,
      x: window.pageXOffset,
      y: window.pageYOffset,
      imageTimeout: 1500,
    }*/
    ).then((canvas) => {
      //document.body.appendChild(canvas); // if you want see your screenshot in body.
      const imgData = canvas.toDataURL('image/png');

      //A4
      var imgWidth = 210;
      //var pageHeight = 295;
      var imgHeight = (canvas.height * imgWidth) / canvas.width;
      //var heightLeft = imgHeight;
      // A4
      var doc = new jsPDF('p', 'mm' /*pt*/, 'a4', true);
    
      doc.addPage([imgWidth, imgHeight]);
      doc.addImage(imgData, 'PNG', 0,0 , imgWidth, imgHeight);
      doc.deletePage(1);
      const fileName = 'test'
      doc.save(`${fileName}.pdf`);
    });
  };
  
  
  // PDF DIV STYLE 
  <div
      id='pdfItems'
      style={{
        display: 'flex',
        flexDirection: 'column',
        margin: 0,
        padding: 0,
        textAlign: 'center',
        width: 1100,
       
      
      }}
    >
    // Itemes
    </div>

How can I get the oauth_token data from my backend when it’s sent via a http response to my frontend?

I am using react-twitter-auth as part of my OAuth 1.0a user authentication flow on my site. My goal is to authenticate a user and then access their username. So far I have a bunch of code I borrowed from a website. There is client side code and backend code.

The client starts the authentication flow, sending a request to http://localhost:4000/api/v1/auth/twitter/reverse. There, I see from a console.log statement that I have the oauth_token value that I will need later for step 3 of the so-called “3 legged auth” authentication flow that I am going through.

Here is the server route I am hitting:

router.route("/auth/twitter/reverse").post(function (req, res) {
  console.log(72);
  request.post(
    {
      url: "https://api.twitter.com/oauth/request_token",
      oauth: {
        oauth_callback: "http://localhost:3000/",
        consumer_key: twitterConfig.consumerKey,
        consumer_secret: twitterConfig.consumerSecret,
      },
    },
    function (err, r, body) {
      if (err) {
        console.log(err, 83);
        return res.send(500, { message: e.message });
      }

      var jsonStr =
        '{ "' + body.replace(/&/g, '", "').replace(/=/g, '": "') + '"}';
      console.log(jsonStr, 88);
      res.send(JSON.parse(jsonStr));
    }
  );
});

I get values such as:

{ "oauth_token": "HnQ1SgAAAAAAAABco", "oauth_token_secret": "y1qeyxZeiCEWqkKz9y", "oauth_callback_confirmed": "true"} 88

Some characters have been deleted in case that isn’t data I should be exposing. Anyway:

I need that “oauth_token” value to make it to my client. Why? Because I’m getting a pin in the 3 legged auth part, and so I need both values to arrive on my server at the same time.

If i wasn’t using the react-twitter-auth library, I would have no problem here, because I would just be sending a http request via fetch, and so I would have a .then() block to show me what the value of res.send(JSON.parse(jsonStr)); is on the frontend. But I don’t have that, nothing is there to listen for the res.send() part. How can I listen for it?

Thanks

edit: I am critical of this library because it doesn’t account for what happens with the PIN based strategy for 3 legged auth.