Comments (2)
This is how I do it:
// NOTE: These are some of the imports different than your example, not every import that's needed.
// APOLLO NOTE: I'm using @apollo/client 3.5.7, which I think has different imports and requires different initialization than the version the docs use. You may be able to leave yours alone, but this is how I do it.
import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
// Middleware fetch function for checking if user needs to reauthenticate when making apollo graphql requests
function userLoggedInFetch(app) {
const fetchFunction = authenticatedFetch(app);
return async (url, options) => {
const response = await fetchFunction(url, options);
// Check if reauthorization needed
if (response.headers.get("X-Shopify-API-Request-Failure-Reauthorize") === "1") {
const authUrl = response.headers.get("X-Shopify-API-Request-Failure-Reauthorize-Url");
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.APP, authUrl);
}
return response;
};
}
// NOTE: See the note for the import statement above
function createApolloClient(app) {
// For making authenticated GraphQL requests (actually requests to /graphql on our server, which proxies it to Shopify)
return new ApolloClient({
link: createHttpLink({
fetch: userLoggedInFetch(app),
credentials: "include",
headers: { "Content-Type": "application/graphql" },
}),
cache: new InMemoryCache(),
});
}
function createAuthAxios(app) {
// For making authenticated HTTP requests via axios
const authAxios = axios.create();
const redirect = Redirect.create(app);
// Intercept requests, and add Authorization header
authAxios.interceptors.request.use((request) => {
const { method, url } = request;
// Get session token and add to header
return getSessionToken(app)
.then((token) => {
request.headers["Authorization"] = `Bearer ${token}`; // Add auth token to request headers
return request;
})
.catch((error) => {
console.error("Error getting session token: " + error);
return request;
});
});
// Intercept response, and redirect to auth if necessary
authAxios.interceptors.response.use(
(response) => {
// OK response
return response;
},
(error) => {
// Error response
const response = error.response;
// Check if reauthorization needed (headers are all lowercase)
if (response.headers["x-shopify-api-request-failure-reauthorize"] === "1") {
const authUrl =
response.headers["x-shopify-api-request-failure-reauthorize-url"];
redirect.dispatch(Redirect.Action.APP, authUrl);
}
throw error;
}
);
return authAxios;
}
I hope that helps.
from simple-koa-shopify-auth.
This is perfect, thank you!
from simple-koa-shopify-auth.
Related Issues (16)
- App bridge error after redirect in pages HOT 1
- Getting Context Initialize error HOT 4
- Latest version (2.1.4) doesn't use the host param when calling createApp in top-level-oauth-redirect.ts HOT 3
- ReferenceError: btoa is not defined HOT 5
- Supporting latest version of `@shopify/shopify-api` (version 6) HOT 13
- How to make it work with koa-mount? HOT 2
- Validate the request from Frontend
- Shopify graphQL proxy HOT 4
- LRUCache is not a constructor HOT 3
- Session creation is not working HOT 9
- The host is undefined HOT 12
- Add the ability to specify the host of the redirect url instead of ctx.host HOT 7
- "The app couldn't be loaded" error HOT 12
- Shopify.utils.validateShop has been deprecated HOT 3
- "Internal Server Error" message when first time installed an app, but app works fine after reload page. HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from simple-koa-shopify-auth.