In this post, let us see how to create a login functionality to a React based OrderCloud buyer application with React Contexts.

This posts assumes that you have already created a marketplace in the ordercloud portal with some buyer users. If not, you can follow this link. At the end, you will be using the credentials of these buyer users to check the login functionality.

Already there is a head-start application provided by Sitecore. I personally feel like there are some difficulties and dependencies ( like Storage account, cosmos etc., ) required to set that up locally, I started to create one on my own something similier to the headstart application. Also in the headstart application, the front end applications are written in Angular. I have stopped working with Angular long time ago. So I have used React to build these front end application. For now, let us start implementing a login functionality to the buyer application with ReactContexts.

The application structure will look like something below.

Like the OrderCloud Headstart, this solution has the following different applications,

Middleware

• It is a ASP.NET Core based layer that has different APIs. These API end points are consumed by the front end buyer and seller applications. It is integrated with the OrderCloud SDK and the OrderCloud Catalyst libraries. You can read more about it from here,
• This is the layer where rest of the other integrations like Payments, Tax Calculations etc., will go

Buyer Application

• In this solution, it will be a react based front end application where the normal ecommerce flow will take place
• This buyer application will use the ordercloud-javascript-sdk. But this is just to access the token for the login functionality that we are building in this post.

Seller Application

• This is another react based application where the sellers can manage the orders, catelogs, products etc.,
• We will be focusing on the seller application later once we are done with the different basic ecommerce functionalities with the buyer application

You can find the solution repo from my github.

Solution Setup

The above solution is docker based and I will not be explaining the docker setup etc., Please feel free to clone the repo and go through the docker compose files.

It contains docker-compose files for different containers like middleware (dotnet core based), buyer application (react based).

Overall, the solution setup looks like below,

Setting up the above solution in local

• Clone the repository to your local
• Run the ./Init.ps1 – This will install the necessary certs and adds the required hosts entries
• Populate the below details in the .env file

OrderCloudSettings_ApiUrl=”https://yoursandbox-sandbox.ordercloud.io” OrderCloudSettings_IncrementorPrefix=”DB_TEST” OrderCloudSettings_MarketplaceID=”” OrderCloudSettings_MarketplaceName=”” OrderCloudSettings_WebhookHashKey=”” OrderCloudSettings_MiddlewareClientID=”” OrderCloudSettings_MiddlewareClientSecret=”” OrderCloudSettings_ClientIDsWithAPIAccess=””

• And then run the ‘docker-compose up -d’
• Wait for the containers to be up
• Once its up, use the host name to access the buyer application – https://buyer.fruitstore.com
• End point of the middleware – https://api-middleware.fruitstore.com/

Once its done, you will be having the below running containers.

So far we have seen overall application structure and setting up the solution in local. Let us work see how to use the ReactContext in implementing the login functionality.

This repo has other different components used in the site, but for now let us focus only on the authentication context component alone. So I will not be explaining the other components.

For now, the middleware application is not consumed by the Buyer application. Because I have only done with the login functionality and the existing ordercloud-JavaScript-sdk can be used for this.

This middleware will be consumed later during the integration of other functionalities. As I wanted to have the solution docker setup done, I included the initial middleware application.

Building the Login Functionality with React Contexts

To build the login functionality for this application, I have used the React contexts and nested the root app element inside the context. So that all the child elements will be having access to the authentication contexts. As the login module and its authentication token will be used by the different components within the application, the react context is used here. So that we can avoid explicitly passing the values between components via props which is a cumbersome one.

Initially we have to create a default context object with react like below,

In react every context object has to come with a Provider. This provider allows the components which are consuming this context to respond for changes. So we have to create the context provider as below.

Also the Provider component accepts a value property like below. You can notice that the different handlers are mapped here to handle the login, logout etc.,

In this authentication context, we have used the ordercloud-javascript-sdk to get the access token from OrderCloud. This access token will be used in the subsequent API calls etc., Below are the corresponding code that does this job.

Please make sure you point your API Client Id from your marketplace in the obfuscated line.

Once we get the access token from Ordercloud, we are also getting the Me info and store it in the same context object.

Handling the logout

To handle the logout function, the below handler is used,

Overriding the Default ApiUrl

By default, the Auth.Login API will be using the production ordercloud url. So i have overridden that to use the sandbox url, in the app.js file like below,

We are reading the access token and saving it in the local storage. You can find the full authentication context file from the repo here.

Consuming the Authentication Context

Now let us see how this authentication context is consumed in the child components. In the index.js file, I have nested the element within the created AuthContextProvider like below. This enables the child components to react for the authentication context changes.

In the Login component, we have to get the context and trigger the login handler when the user login with given username and password.

The logged in username can be read from the Me object of the authentication provider. We can then utilise it to display the user name once the user logged in.

Demo

If you access the buyer application with the url https://buyer.fruitstore.com/, you will have the below screen.

You can try login with the buyer user you defined in your market place and once you are logged in, at the top right corner, you will be seeing the logged in username.

,

The above dropdown will be displayed only for the logged in users. When you click the logout button, this will trigger the logout handler in the Authentication context and this will remove the user session.

So far we have seen only the login functionality with OrderCloud Buyer Application. I will be working on other basic e-commerce functionalities like Product grid, Cart functionalities one by one. Also I will be exploring other integrations like Tax calculations, Payments etc.,

Stay tuned for more posts….!!!

References

Thank you Guido, for the below awesome writes up on OrderCloud.

Please give a read.

• https://guidovtricht.nl/blog/sitecore-ordercloud-which-sdk-should-i-use
• https://guidovtricht.nl/blog/exploring-the-ordercloud-net-sdk
• https://guidovtricht.nl/blog/sharing-my-thoughts-about-the-ordercloud-headstart-application
• https://guidovtricht.nl/blog/defining-an-ordercloud-platform-architecture