There are a few steps that we need to take to make the connection between Shopify and Laravel. First step is to update the API keys here. So we need to update the API key and the API secret. So let's open the partner's dashboard, click on the apps here, and then click on our app, which is Faker, and we have the client ID and client secret in here. So let's copy the client ID, we'll put it here. Let's copy the client secret, and we'll put it right here. Let's also set this app bridge version to latest here, and we can change this later to the specific version if needed, but we actually are not going to need this variable.

Let's also set this app bridge version to latest here, and we can change this later to the specific version if needed, but we actually are not going to need this variable later on because we're going to be using React. I'll show you where this variable is actually used within the code in a few minutes. Next we need to go to the app setup here, and we need to provide two URLs to Shopify. One is the app URL, and the other one is the redirect URL. So it's basically the URL that runs our application, which is at this point just localhost. Now Shopify requires all apps to be loaded over HTTPS, and that can be done in multiple ways depending on your local development environment setup. It basically depends on if you're using Docker, Laravel SAIL, LaraDoc, Valet, and so on.

ways depending on your local development environment setup. It basically depends on if you're using Docker, Laravel Sail, LaraDoc, Valet, and so on. Another way is by using a proxy or tunneling tool like ngrok. With ngrok, you can create a secure HTTP tunnel to your local development environment. It provides you a public URL that can be used to access your localhost. So basically requests that are made on that public URL are forwarded to your local environment. Ngrok is free to sign up, and it gives you random domains each time you start it up. If you pay for it, then you can have custom domains along with some other features. Note that ngrok is not a requirement for this course. You can set up local HTTPS other ways depending on your local development environment setup.

Note that ngrok is not a requirement for this course. You can set up local HTTPS other ways depending on your local development environment setup. I'll be using ngrok in this series, but again, feel free to set up SSL locally using the tools that you're comfortable with. If you do decide to use ngrok, then just follow the instructions on their website to install it for your OS. So let's open the terminal, cd into the directory where ngrok is installed or where the ngrok executable file is, and then run this command. In my case, that's ngrok.exe http 80. This basically exposes the local web server that runs on port 80 so that it forwards calls.

In my case, that's ngrok.exe http 80. This basically exposes the local web server that runs on port 80 so that it forwards calls made to the public URL to our localhost that runs on port 80. So we hit enter, the session has been started, and we have the random public URL right here. So let's copy it, open it in browser. We see this ngrok page. We can click on the visit button, and then we get this no authenticated user or shop domain exception, which is actually expected because we're not authenticated, but the request is being forwarded to our localhost from that public URL, which is good. Now we can take this URL and put it in the appUrl field on Shopify.

is being forwarded to our localhost from that public URL, which is good. Now we can take this URL and put it in the app URL field on Shopify. So we'll replace this with that URL. And for the redirect, we're going to put the same URL /authenticate. authenticate endpoint is provided by the laravel-shopify package, which basically handles the authentication behind the scenes. Note that if you stop the ngrok session and start it again, it's going to generate a new public URL. So you will have to update these sections here with the new URLs every time you stop and start the ngrok.

So you will have to update these sections here with the new URLs every time you stop and start ngrok. So just keep that in mind if you're using ngrok with randomly generated URLs. So let's save this here. And the next step is to install our app to the development store. So let's go to the overview. And within the test your app section, we can click on select store, and then we can hover over our development store that we created before and click on install app right here. It is going to do some redirects and bring us to this OAuth page where we need to review the permissions that the app needs and agree to them.

It is going to do some redirects and bring us to this OAuth page where we need to review the permissions that the app needs and agree to them. So we see that our faker app needs access to store information and edit store information. So we'll scroll down, we'll click install app, it is going to do some more redirects. And then as you can see, it is making connection to the ngrok URL. So we'll click on visit site. And as you can see, Hello World is displayed in here, which means that our app is connected with Shopify and working as expected. Now let's do a quick overview on what happens when merchant installs the app, because I think it's important to understand what is going on behind the scenes of all those redirects.

Now let's do a quick overview on what happens when a merchant installs the app, because I think it's important to understand what is going on behind the scenes of all those redirects that we went through. How does it actually work? When a merchant tries to install the app, they are redirected to the app URL path that is specified in the partner dashboard, the ngrok URL that we put there. Basically, the GET request is made to that URL. This request query string includes things like shop domain and HMAC parameters, which are used for verification. HMAC stands for Hash Based Message Authentication Code, and is basically used to verify the

are used for verification. HMAC stands for HashBasedMessageAuthenticationCode, and is basically used to verify the integrity of the message to ensure that it has not been tampered with. Now in our case, the app URL points to the Laravel's app home route, which has the verifyShopify middleware. We can actually see this process within the terminal. So if I open the Windows terminal here, we see that the first GET request is made, then the GET request is made to the /authenticate. And then we have /authenticate/token. And finally, the GET request to the homepage to render the welcome page, which renders

And then we have slash authenticate token. And finally, the GET request to the homepage to render the welcome page, which renders the hello world. Now we're going to go through on how these are actually executed through the middleware. So let's open the code and let's go through this VerifyShopifyMiddleware to understand how it actually works behind the scenes. So let's open VerifyShopifyMiddleware, scroll down here. And as you can see, as the first step, this middleware basically verifies the HMAC that is given to the request. It also does a bunch of other things.

is given to the request. It also does a bunch of other things. And in this process, it also determines if it needs to redirect the user to the Shopify's grant page. And that's the OAuth permission page that we saw earlier. So basically, this section gets invoked here, and then it checks if the shop has been installed previously, which it hasn't. Then it invokes the handleInvalidShop method. And this method basically does the redirect. If we click on installRedirect method, we see that it is redirecting us to the authenticate

And this method basically does the redirect. If we click on installRedirect method, we see that it is redirecting us to the authenticate URL. And that's the /authenticate URL that you saw on the ngrok logs. Now this /authenticate route invokes the authenticate method on the OAuthController. And we can actually see that. So let's open the OAuthController. And this OAuthController uses the OAuthControllerTrait. So if we open that up here, it basically invokes this authenticate method. Now this authenticate method basically invokes this AuthenticateShop class, which is an

So if we open that up here, it basically invokes this authenticate method. Now this authenticate method basically invokes this AuthenticateShop class, which is an invocable class right here. And this AuthenticateShop class in turn invokes installShop action. And we can see it right here. So if we search for this, it's right there. Then if we inspect this InstallShop invocable class, we see that the check if the redirect needs to happen or not to the Shopify OAuth grant page happens right here. It checks if the authorizationCode is provided to the request. And if it's not, then it needs to redirect the user to the OAuth page to get that authorization.

It checks if the authorization code is provided to the request. And if it's not, then it needs to redirect the user to the OAuth page to get that authorization code. And this is where it builds the necessary URL with API scopes. So let's trace this back now to see where the redirect actually happens. So in here, we see that completed is set to false and we have the URL and the shop ID. So if we go back to the authenticateShop that invokes the installShop, we see it in here that if the completed is false, then it returns result and false. And then if we go back to the OAuthController where we invoke the OAuth shop, we have the status here.

And then if we go back to the OAuthController where we invoke the OAuth shop, we have the status here. So if the status is set to false, then it does this full page redirect right here. And this is where that APP_BRIDGE_VERSION environment variable is used that I mentioned at the beginning of the lesson. Now once the user is redirected to the grant page, the user has to agree to those permissions and continue with the installation, right? So if they click on install app there, meaning that they agreed to those permissions, at that point, the user is redirected back to the /authenticate URL. And that's the URL that we added to the allowed redirection URL field in the partner dashboard.

that point, the user is redirected back to the /authenticate URL. And that's the URL that we added to the allowed redirection URL field in the partner dashboard. Now once the request is made to /authenticate URL again, it then again invokes this authenticate method from the OAuthController. It invokes the authenticateShop again, and this invokes installShop again. But in this case, the authorization code is provided in the request. So this no longer gets executed, and therefore this part gets invoked this time. Then since now the OAuth code is present, it makes the request to get the access token through this line right here. It basically exchanges the authorization code with the OAuth access token.

through this line right here. It basically exchanges the authorization code with the OAuth access token. And then it sets that access token to the User model right here. Now remember that in the context of Laravel Shopify, the User model is actually the Shop. It does create the Shop or the User record right on top right here if it doesn't exist. So if the record doesn't exist in the database, it creates it right here. And finally, the User is redirected to the apps UI. For embedded apps, that's actually the Shopify's URL that basically renders our app within it, which then invokes the home route again and goes through the verifyShopify middleware check again.

it, which then invokes the home route again and goes through the verify Shopify middleware check again. But this time it has the shop, it's properly authorized, and we have the accessToken. So it hits different parts of the middleware. You can get more in-depth information about this flow and how it works on the Shopify OAuth documentation right here. Different libraries and packages may implement this a bit differently, but the main idea is the same. I just showed you some parts of the source code of this package to give you a little bit of overview how the Laravel Shopify implements this authentication.

I just showed you some parts of the source code of this package to give you a little bit of overview how the Laravel Shopify implements this authentication. I think that understanding how authentication and back and forth connection works between the app and Shopify is important and it will help you troubleshoot issues later on. All right, so we talked about the OAuth part, but as you might remember from this diagram, in addition to OAuth, there should also be session token authentication. A session token is used to authenticate the requests between the client side and the backend. There is an app bridge involved in this, so let's talk about that in the next lesson.