authenticated fetch for new cookie policy error

Solved
Highlighted
Excursionist
16 0 1

Hey, I followed the post on the new cookieless authentication for Shopify app bridge. I'm trying to make a billing charge when a user takes an action on my app for example a button click should then go to the confirm payment action page. (Sidenote: this is a pretty terrible UX pattern, is there another way to do this like a modal within the embedded app or something? Looks terrible to have to redirect to an entirely different page, confirm the action and then reload the site on the return url) But anyways, I set up the the embedded app, get authentication confirmed etc, and when trying to use a graphql mutation with apollo client, the response is giving the error: "Error: Network error: Unexpected token < in JSON at position 0". I'm assuming this is from an html file being returned instead of JSON. I know that this is a common apollo issue, but I'm hoping for some answers to why the issue is occurring in the first place. Postman requests seem to be working fine, and the main change has been the cookieless authentication using authenticatedFetch from the new app bridge utils package. My set up is a bit unusual with authentication being done through a series of firebase functions calls but the app is being loaded properly in the embedded format. When a shop owner goes to the main shopify app page, the app bridge instance is created and the apollo client is being created as outlined in the new cookieless authentication post.Screen Shot 2020-08-16 at 11.25.16 PM.png

My graphql mutation is a pretty simple create one time charge mutation.

Screen Shot 2020-08-16 at 11.27.48 PM.png

My component uses the outlined tutorial format for the app-bridge-react and apollo wrappings.

Screen Shot 2020-08-16 at 11.30.18 PM.png

The button calls the mutation here:

Screen Shot 2020-08-16 at 11.34.41 PM.png

I cannot for the life of me figure out what went wrong and the fact that the apollo client errors are html and unloggable doesn't help. Can anyone point me in the right direction for what's happening here. Any info on the issues with the general set up, issues/documentation on authenticatedFetch, or even the best ways to investigate html error responses from Apollo would be greatly appreciated. Thanks!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
77 24 10

Hi @stheticsoftware 

 

Can I have your appId? "Unexpected token < in JSON at position 0" This error could happen when embedded app uses App Bridge but the host is still EASDK.

1 Like
Highlighted
Excursionist
16 0 1

Hey thanks Henry, my AppID is: eeecdd09e49df1307834481f5d10dbf8

0 Likes
Highlighted
Shopify Staff
Shopify Staff
77 24 10

Hi @stheticsoftware 

 

The `authenticatedFetch` will retrieve `sessionToken` and put it to header `Authorization: Bearer session-token-from-authenticated-fetch`. You need to use retrieve bearer token and validate it in your server. Are you doing it? 

 

"Postman requests seem to be working fine"

=> What's this request? 

 

"My set up is a bit unusual with authentication being done through a series of firebase functions calls but the app is being loaded properly in the embedded format."

=> Did you retrieve bearer token in Firebase functions? How do you perform graphql mutation in the server? What token did you use? 

0 Likes
Highlighted
Excursionist
16 0 1

Thanks for the info again. Im retrieving and validating the shopify access token and setting headers as "X-Shopify-Access-Token": shpat_xxxxxxxx. I take it that this is not the proper access token to retrieve/store? I know the JWT is a different format, but is that retrieved in a similar way to the POST request to "https://${shop}/admin/oauth/access_token"? As for the Postman request thats just to make sure the api calls are formatted correctly/returning proper data. www.postman.com . I'm not sure if I'm properly retrieving/using the bearer token, as I'm using the access token provided by the POST request to "https://${shop}/admin/oauth/access_token" and then signing calls with the "X-Shopify-Access-Token" header. Here's an examplpe of a working api call from the server:

 Screen Shot 2020-08-17 at 3.27.53 PM.pngScreen Shot 2020-08-17 at 3.28.05 PM.png

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
77 24 10

This is an accepted solution.

Hi @stheticsoftware 

 

I think there is a confusion between new `sessionToken` (for cookieless) https://shopify.dev/tools/app-bridge/authentication and `accessToken` from original Shopify auth https://shopify.dev/tutorials/authenticate-with-oauth. They are two different token. 

 

- The `accessToken` is used to perform graphql call on your server. This is obtained during app installation.

- The `sessionToken` is only meant for validating the request coming from your app loading inside Shopify. It cannot be used as `X-Shopify-Access-Token`. 

 

Thanks, 

 

0 Likes
Highlighted
Excursionist
16 0 1

Perfect, thanks! So as I understand, we don't necessarily need to use the sessionToken or cookies as long as we have other methods of validating communication between front-end and server. And the accessToken on the server will continue to work as expected?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
77 24 10

we don't necessarily need to use the sessionToken or cookies as long as we have other methods of validating communication between front-end and server.

 

Correct. However, I am curious how you validate the communication. Would you mind to share it as well? Thanks.

0 Likes
Highlighted
Excursionist
16 0 1

Sure, during the initial authentication process, we have the firebase functions also create a custom firebase authentication token that is passed back to the client. The client is signed in with that custom token. All communication after that is done with firebase function triggers to the database (ie. the client updates their database document which has rules to only allow the user to write to their own document, then the functions listen for updates to the documents and make the api calls). The custom token changes with each sign on as well. We're considering adding in some more security at some point, perhaps encrypting the tokens in transit and having the individual's secret key stored in their personal database document or something. Please let me know if you have any other suggestions or flaws you can think of!

1 Like
Highlighted
Shopify Staff
Shopify Staff
77 24 10

It sounds to me that you are using Login with Google for the initial authentication. If so, I would suggest to enable `Block third-party cookies` in the browser and test the flow again. 

0 Likes