Node and React app. POST access_token and shop

[theopl]

Hello.
I have a sales app made based on the tutorial. What i want to do is: when the user clicks a button to POST the access_token, the shop url to a custom API that i have (this API will get products and other info needed).

Is it possible to access the token and the url in a react component? They are both accessible in server.js file

...
afterAuth(ctx) {
    const { shop, accessToken } = ctx.session;
    console.log(`accessToken: ${accessToken}`);
    console.log(`shop: ${shop}`);
    ctx.cookies.set('shopOrigin', shop, { httpOnly: false });
    ctx.redirect('/');
},
... 

[KarlOffenberger]

Hello!

Not sure I understand why you want to or need to pass the access token to the React app? Your node app authenticates and receives a token that as you noted you have access to through the Koa context. When your React app performs an action such as a button click which in turn does a request to your node app, that request gets checked whether the token is still valid and thus you can or cannot handle that request. Why would your React app need the token?

Maybe I am missing something here so please let me know if that's the case.

Best wishes!

[theopl]

Hi Karl!

Thanks for trying to help me.
What i mean is that when the user clicks the button, i want to connect to an external custom API (not to my node app), build in java, and provide them the token and the url.
How am i supposed to send them if i don't have them in my component when the user clicks the button? (Like should i make a request to my node app, get them somehow and then send them to the external api?)

The external API after that will collect all products, collections etc.

(btw it's a sales app)

[theopl]

@KarlOffenbergerSo Karl, could you direct me please on the right path for this?

[KarlOffenberger]

Eh, sorry. Lost track of pending replies.

So let me get this right - or try to confirm I understood what you're trying to do.

1. You have a Shopify app that uses node.js as a backend and React as frontend
2. Your app goes through the standard app auth, receives its token and bob's your uncle
3. However, once in your app frontend, you want your app frontend to directly communicate with a 3rd party Java application / service that will perform some actions against the Shopify Admin API and therefor needs a valid token?

Point 3 is where I am not sure about whether I understood you correctly and if I did, it is cause for a little concern.

[theopl]

Yes you got this right.
The thing that i need is to send access token and shop url to the 3rd party api.

[KarlOffenberger]

Eh... doesn't sound right to me, but then again I don't know the exact circumstances. I mean, really can't advise you here because I honestly don't know the entire scope of requirements and constraints, what that 3rd party application does, why it cannot auth itself but needs your app as a mediator etc etc.

Sorries 🤷

[KarlOffenberger]

Might be of interest to you @theopl - Delegating access to subsystems

p.s. 👏 Shopify docs team

[Ireneludi]

Hi Karl, just found your reply to this question. I also got a problem on authentication. I would like to fetch data in the file index.js. But my access_token is accessible in server.js. How can I use the accessToken in index.js as a request header?

identifyItems(orderNum, emailAdd){
        fetch(`someUrl`, {
            mode: 'no-cors',
            method: 'GET',
            headers: {
                "X-Shopify-Access-Token": ???What should I wirite here???,
                "Content-type": "application/json",
            },
        }).then(response => response.json()).then(resData=>{
            console.log(JSON.stringify(resData));
        })
        
    }

I know it's a silly question....

thanks in advance

[Thresher]

@Ireneludi I just solved a similar problem. See the solution in my post here, it should help you.