If you've been a C# developer, very likely you are familiar with __*IDisposable*__ concept and __*using*__ statement.

Now when we are developing applications in TypeScript, it's nice to have such a feature to be able to __*dispose*__ our unneeded resources when we are finished with a class instance.

In this article, I am going to show you how you can easily add this feature to your TypeScript codebases.

First, I start by creating a Disposable.ts helper file and adding an *IDisposable* interface to it.

gist:bb13e2ace21e2f5bd32c587071cea3b5

This is the interface that our target classes will implement.

I continue by adding 2 *using functions* for both *synchronous* and *asynchronous* purposes.

gist:277555adbc578cba62f2bf95eaa2f185

Perfect.

Now, I am going to create a sample class to show you how to use the interface.

gist:1ac79b5721af979e04b4ce6079e8939d

As you can see, our *__SampleClass__* implements the *__IDisposable__* interface so it must have a *__dispose__* method.

Now, let's see how we use the *__using__* and *__usingAsync__* methods.

gist:07be04e6e57f5e8fb859952a6e289d31

Easy. Huh? :)

Implementing a C#-like using concept in TypeScript

Add "IDisposable" and "using" to your TypeScript project!

Implementing a C#-like "using" concept in TypeScript

If you are a web application developer, you are possibly familiar with Responsive Design concept and you know how important it is for your application to adapt to different screen sizes on different devices.

There are many ways you can control your page responsiveness including using media queries in CSS or in JavaScript.

Today, I am going to show you how you can create a custom React Hook which can then be used as a size sensor in your apps.

I will use React Context and TypeScript in implementing this, so I assume you are already familiar with those concepts.

---

We will start by creating a component named __ResponsiveProvider__ that we will then wrap our main component in, down the track.

gist:2dc49dfa54d036cb588cdf275f6c1217

Nothing special so far.

As you can see, the __value prop__ of the __context provider__ is empty for now.

We need an object containing different boolean properties for different screen sizes. Let’s write a function which returns that object with default values.

gist:172dd291965805a6ca7bcde501d3dc11

As you can see, I have created a __TypeScript interface__, a __function type__ and then the actual function which returns the object.

Now we add the needed definitions and parts to the component we created before.

gist:73ca8bb92d0eedbce39c7106eb65d303

Is it difficult? I don’t think so.

Let’s see what’s going on here.

The __detectDevice__ function gets a new object from the __getDefaultScreenSizeObject__ we created before and sets its different values depending on the current screen size.

This function is called 2 times. First, during the __screenSize__ state initialization and then whenever our window size changes. You can see we are monitoring window size changes in the __useEffect__ hook we have added.

Then the screenSize state object is assigned to the context provider’s value prop.

Now all we need to do, is to define our actual custom hook which we call it __useSensor__.

gist:7667d1c6f75c773db86fb6f89b84d988

The __useSensor__ custom hook reads the __value prop__ from the __context provider__, monitors the __screenSize__ object changes and then returns its latest value.

Now let’s have a look at the completed code.

gist:6834268cd40109db9bf448ae7ca90d2f

Now all we need to do, is to wrap our main component inside __ResponsiveProvider__ so then we can use the __useSensor__ hook wherever we need within our app.


Implementing a screen size sensor as a custom React Hook

Learn how to implement your own Hook to listen to screen size changes!

Implementing a React screen size sensor Hook

There are heaps of articles out there talking about different ways you can make your JSON Web Token (JWT) secure when you are developing an application using React JS or one of the other JavaScript-based frameworks.

It is actually a little bit tricky to hide your JWT from attackers when you implement a client-side application.

A few months ago I did a deep investigation on what is the best and most secure way of doing this and I ended up with defining a solution using Cookies and Custom Token Retrieving.

So I decided to post an article about that for those who use .NET Core/.NET 5 SPA, IndentityServer4 and React JS to implement their web apps.

---

Here is how we do that.

First, we create a controller to manage our JWT storing, deleting and validation.

Let’s name it AuthController.

gist:2cb71c30f2d08bc781ebcb1def80cd95

As you can see, there are 3 methods here. The Check method will be called from the client side to see if our token is still valid. The Save method will be used to store the token once it’s generated by our IdentityServer. The client app will call this method and will pass the token to it only one time. The Delete method is for when a user logs out of the app and when we want to delete the token.

The token will be sent to the server in a header named x-jwt and we will write a Custom Token Retriever to read that from that particular header.

Let’s write our CustomTokenRetriever.

gist:52926b541efa08409ddcef47e819565c

Now we add the above token retriever to our IdentityServer’s configuration code in Startup.cs.

    options.TokenRetriever = CustomTokenRetriever.FromHeaderAndCookies;

So far, so good.

Now what we need, is a custom attribute to decorate our protected controller(s) with in order to refresh the token before it expires if the user continuesly is working with the app.

Let’s write that attribute.

gist:37d61229b03850e024f71fdef8f5ce43

This attribute checks the token on every API call and refreshes that if its TTL falls below __120 seconds__. You can change that value depending on your needs. If you’ve noticed, we are using a service called __IdentityServerService__ which is a custom service which takes care of renewing the token using the __Refresh Token__, __Client Id__ and __Client Secret__.

I leave that service implementation to you.

Now all we need to do to finish our backend implementation, is to decorate our controller with the attribute.

    [JWTRefresher]

Now let’s go ahead and write our needed client side code.

I use fetch as my http client and create the following JavaScript service to take care of my authentication part.

gist:38148bdbbe6e175121ac430d64645a88

Easy!!!

The above service can be used to send our token to the server, validate it and delete it when we want.

As you can see, no usage of local storage for anything. Token is stored in a secured cookie and refreshed on the server side.

How to securely store JWT in a React web app

The most secure way of storing JWT in a React web app!

Blog

Implementing a C#-like "using" concept in TypeScript

Implementing a React screen size sensor Hook

How to securely store JWT in a React web app