To get the proper session token, we need access to the AppBridge instance. Looking at the session tokens diagram in the Shopify's documentation, we basically need to implement just these two steps. We need to get the session token from the AppBridge and pass it along the Axios requests to the backend. The verification part on the backend is already handled for us by the Verify Shopify Middleware, which should be used on pretty much all the routes to ensure the proper authentication and protection. The creation of the AppBridge is also handled for us by using the AppBridgeProvider React component, which leaves us with just these two steps to properly get the session token from the AppBridge and then pass it to the Axios requests. It's sort of the same thing that we were doing in BushDrop.js file. So if we open our code and open the BushDrop.js file,

It's sort of the same thing that we were doing in BushDrop.js file. So if we open our code and open the BushDrop.js file, we see that we're getting the session token in here and we're passing it along the Axios requests. The thing is, though, we don't have access to this WindowUtils object and we don't have access to this WindowApp object either. So we'll have to get the session token by importing the GetSessionToken function from the AppBridge utilities directly in our component. Now, instead of importing this and doing the token retrieval inside our App component, why don't we create a custom hook that will set up the Axios properly that we can then import in other components, because our App component is kind of becoming bloated. So let's open the project files. We'll create a new directory here called hooks. And we'll create a new hook here called useAxios.

So let's open the project files. We'll create a new directory here called hooks. And we'll create a new hook here called UseAxios. Now, within this hook, we'll simply return the Axios instance. So let's do import Axios from 'axios'. Then let's create our hook. So UseAxios equals and we'll return the Axios this way. And let's export default UseAxios. Now, in here, we can use the useEffect hook to maybe configure the Axios instance. So we'll do useEffect and we'll set the dependencies to empty arrays so that it only runs one time. And in here, we'll configure the Axios instance. Why don't we copy this configuration from here and paste it in our hook?

And in here, we'll configure the Axios instance. Why don't we copy this configuration from here and paste it in our hook? And actually, let's get rid of the bootstrap.js because we no longer need it. So let's paste the code in here. We'll get rid of the window objects from here. And we need to import the GetSessionToken directly in this component because we no longer have access to this utils object. So let's remove the utils object and let's import the GetSessionToken function from the AppBridge utilities. Now, the next thing that we need to fix is this window.app object because we don't have access to this either. We don't have the app instance. Thankfully, there is a custom hook called useAppBridge that is provided by the AppBridge React package that we can use to get the AppBridge instance. So we can do it right here. const app equals useAppBridge and then remove the window object from here.

Thankfully, there is a custom hook called useAppBridge that is provided by the AppBridge React package that we can use to get the AppBridge instance. So we can do it right here. const app equals useAppBridge and then remove the window object from here. Now, to avoid potential memory leaks or unintended side effects, we should do a little bit of cleanup when the component unmounts. We can do this by returning a function at the end of this useEffect hook. So first, let's assign this interceptor to a variable. So we'll do const interceptor. And then at the end of the useEffect hook, we'll return a function which will basically eject or remove the Axios interceptor. So we can do Axios.interceptors.request.eject and pass the interceptor variable. Note that we're working and configuring the default global Axios instance. If you wanted to, you could adjust this to instead create a new Axios instance and configure that and then return that.

Note that we're working and configuring the default global Axios instance. If you wanted to, you could adjust this to instead create a new Axios instance and configure that and then return that. Or you could take it a step further and accept Axios instance as a prop. And if the Axios instance is given, then configure that specific instance and return it. But for the sake of simplicity, I'm just going to keep it the way it is. All right. So next step is to actually use this custom Axios hook within our app component. So let's switch to app component and we'll get the Axios instance in here. So we'll do Axios equals useAxios. Let's get rid of the direct import Axios from here and we should be good to go.

So we'll do Axios equals UseAxios. Let's get rid of the direct import Axios from here and we should be good to go. Now, let's open the browser to test this out. And our app seems to be broken. Let's check the error message. So let's open the DevTools. And the error message states that no AppBridge context was provided. Your component must be wrapped in the provider component from the AppBridge React. This is actually expected and is a common error that you might get if you try to get the AppBridge instance outside of the provider component. If we go back to our code, we see that we're calling this UseAxios right here.

This is actually expected and is a common error that you might get if you try to get the AppBridge instance outside of the provider component. If we go back to our code, we see that we're calling this UseAxios right here. And UseAxios is using the UseAppBridge hook to get the AppBridge instance. However, AppBridge instance only exists within the AppBridge provider right here. So the UseAxios hook basically needs to be used within the AppBridge provider component. There are a couple of things that we can do here. One is that we can create an AppWrapper component which will render our app component within the app provider and then the AppBridge provider. So basically it's going to contain these two things in the AppWrapper component and then it's going to render the app this way. So our AppWrapper component will just render these three components. That way using the Axios hook within this app component will be valid because now it is a child component of the AppBridge provider.

So our AppWrapper component will just render these three components. That way using the Axios hook within this app component will be valid because now it is a child component of the AppBridge provider. Another way that we can fix this is that we can extract the Axios code related stuff into its own component and render it from here as a child component. It is up to you how you want to structure your app. But I'm going to keep it simple and just create a separate component and extract this to its own component as well as this section right here. So let's take this create a new component called ProductCreator or something like that. We'll call it ProductCreator.jsx. Let's create the variable and this will return the components that we copied. Let's do export default ProductCreator and we can also move the Axios call into the ProductCreator. So let's take this and paste it right here.

Let's do export default ProductCreator and we can also move the Axios call into the ProductCreator. So let's take this and paste it right here. And we also need the handleProductCountChange. So let's move this in there as well. And I think this looks good. Now within our App component which is no longer bloated as you can see it is a much simpler component. We can remove all these imports that we no longer need and we can render our ProductCreator component in here. Now let's open the browser and see if this works. And as you can see everything is working as expected. We have the slider here.

And as you can see everything is working as expected. We have the slider here. We have the button. This works as before. Let's open the dev tools and make the request. So we'll click on the button and the request is successful giving us the status 204. If we switch to the console we have the response object logged in here. So what this means is that we're getting the proper session token and are passing that along the Axios request and the session token verification is working as expected. So now we are ready to implement the logic to actually create the fake products. Let's do that in the next episode.

So now we are ready to implement the logic to actually create the fake products. Let's do that in the next episode.