DEV Community: Jyotirmaya Sahu

Mastering SignalR Hub Security with Custom Token Authentication in .NET 8

Jyotirmaya Sahu — Tue, 10 Dec 2024 12:01:23 +0000

Recently I was working on a web development project that required me to transfer data using WebSockets to implement real-time communication. It was a React.js project with a .NET backend.

While MSDN provides excellent top-level documentation, it often lacks the low-level details needed for advanced use cases.

One such scenario is authenticating a SignalR Hub using a custom token. Yes, a custom token, not a JWT or the default Bearer token. This article explores how to achieve this. By the end, you will have a SignalR Hub that requires authentication and uses a custom token.

The Custom Token

The custom token we will use is a Base64-encoded delimited string of user information in the format:

userId:userName

From this token, we will extract the userId and userName to create claims.

Project Setup

Here are the basic steps to set up the project:

Create a .NET project:
```
dotnet new webapi
```
Add SignalR service:
In the Program.cs file, register the SignalR service while building the application:
```
builder.Services.AddSignalR();
```

Create a Hub:
Create a directory named hubs and add a file named GameHub.cs. Implement the following:

public class GameHub : Hub
{
   public override Task OnConnectedAsync()
   {
       return base.OnConnectedAsync();
   }

   public override Task OnDisconnectedAsync(Exception? exception)
   {
       return base.OnDisconnectedAsync(exception);
   }
}

Map the Hub:
Expose the GameHub as an endpoint in Program.cs:
```
app.MapHub<GameHub>("/hubs/game");
```

Implementing Custom Token Authentication

To use a custom token and extract user information from it, we need a custom authentication scheme. In .NET, an authentication scheme is a named identifier that specifies a method or protocol used to authenticate users, like cookies, JWT bearer tokens, or Windows authentication. For this scenario, we’ll create a scheme called CustomToken.

Custom Authentication Scheme Implementation

Define the Custom Token Scheme Options:

public class CustomTokenSchemeOptions : AuthenticationSchemeOptions
{
   public CustomTokenSchemeOptions()
   {
       Events = new CustomTokenEvents();
   }

   public new CustomTokenEvents Events
   {
       get => (CustomTokenEvents)base.Events!;
       set => base.Events = value;
   }
}

Define the Scheme Handler:
The CustomTokenSchemeHandler contains the logic to validate tokens and extract user claims:

public class CustomTokenSchemeHandler : AuthenticationHandler<CustomTokenSchemeOptions>
{
   private new CustomTokenEvents Events => (CustomTokenEvents)base.Events!;

   public CustomTokenSchemeHandler(
       IOptionsMonitor<CustomTokenSchemeOptions> options,
       ILoggerFactory logger,
       UrlEncoder encoder) : base(options, logger, encoder) {}

   protected override async Task<AuthenticateResult> HandleAuthenticateAsync()
   {
       var messageReceivedContext = new MessageReceivedContext(Context, Scheme, Options);
       await Events.MessageReceivedAsync(messageReceivedContext);

       var token = messageReceivedContext.Token ?? GetTokenFromQuery();

       if (token is null)
       {
           return AuthenticateResult.NoResult();
       }

       byte[] data = Convert.FromBase64String(token);
       string decodedString = Encoding.UTF8.GetString(data);
       string[] userInfoArray = decodedString.Split(":");

       var claims = new[]
       {
           new Claim(ClaimTypes.Name, userInfoArray[1]),
           new Claim(ClaimTypes.Sid, userInfoArray[0])
       };
       var principal = new ClaimsPrincipal(new ClaimsIdentity(claims, Scheme.Name));
       var ticket = new AuthenticationTicket(principal, Scheme.Name);
       return AuthenticateResult.Success(ticket);
   }

   private string? GetTokenFromQuery()
   {
       var accessToken = Context.Request.Query["access_token"].ToString();
       return string.IsNullOrEmpty(accessToken) ? null : accessToken;
   }
}

Configure the Authentication Scheme:
Register the custom authentication scheme in Program.cs:

builder.Services.AddAuthentication("CustomToken")
   .AddScheme<CustomTokenSchemeOptions, CustomTokenSchemeHandler>("CustomToken", opts =>
   {
       opts.Events = new CustomTokenEvents
       {
           OnMessageReceived = context =>
           {
               var accessToken = context.Request.Query["access_token"];
               var path = context.HttpContext.Request.Path;

               if (!string.IsNullOrEmpty(accessToken) && path.StartsWithSegments("/hubs/game"))
               {
                   context.Token = accessToken;
               }

               return Task.CompletedTask;
           };
       };
   });

Disclaimer

The implementation presented in this article is inspired by the BearerTokenScheme source code in the .NET official repository. Adjustments were made to suit the custom token requirements for this scenario.

Wrapping Up

By implementing this custom token authentication scheme, you can secure your SignalR hubs and tailor the authentication process to your application's unique requirements. This approach allows for fine-grained control over token validation and claim extraction, ensuring a secure and robust real-time communication system.

Feel free to extend this implementation with additional validations, logging, or integrations with external identity providers for a more comprehensive solution.

Lets make a custom hook for client side Pagination in React

Jyotirmaya Sahu — Mon, 06 Sep 2021 12:48:49 +0000

Recently while making an application in React, I had to use pagination in one of my lists. So, I decided to keep it simple and came up with an idea of a custom hook.

The custom hook will return a function, to which we can then pass the page number and it will return the first index and last index of the list along with the total number of pages.

Usage:

const [pageNumber, setPageNumber] = useState(1);
const paginator = usePagination(list.length, pageSize); 
//pageSize is the number of items we want to display per page.

const [firstIndex, lastIndex, totalPages] = paginator(pageNumber);

Then we can use this information to slice up our list and implement pagination, we can store the page number in our state and update state based on user interaction.

Now, let's jump into the code that works behind this. The code is fairly simple. In the following snippet, numberOfRecords is the total number of items that the list has, and recordsPerPage is the count of items we want to show per page.

export const usePagination = (numberOfRecords, recordsPerPage) => {
...
}

Now we calculate the following:

noOfWholePages (Number of pages containing items equals to recordsPerPage)
isLastPagePartial (This boolean variable tells if the last page is filled or has less items than recordsPerPage)
noOfRecordsInLastPage (This stores how many items are there in the last page. This will be 0 if isLastPagePartial is false)
noOfPages (The total number of pages)

  const noOfWholePages = Math.trunc(numberOfRecords / recordsPerPage);
  const isLastPagePartial = numberOfRecords % recordsPerPage > 0;
  const noOfRecordsInLastPage = numberOfRecords % recordsPerPage;
  const noOfPages = noOfWholePages + (isLastPagePartial ? 1 : 0);

Now, we need the paginator function to return from the hook. We will use the concept of javascript closures here. So, nothing can be changed in the function other than pageNumber.

  const recordsBuilder = (pageNumber) => {
    const firstIndex = (pageNumber - 1) * recordsPerPage;
    let lastIndex = firstIndex + recordsPerPage - 1;
    if (noOfPages === pageNumber) {
      // Last page
      if (isLastPagePartial) lastIndex = firstIndex + noOfRecordsInLastPage - 1;
    }
    return [firstIndex, lastIndex, noOfPages];
  };

Finally, we return this function from the hook.

return recordsBuilder;

Now let's have a look at the complete code here.

export const usePagination = (numberOfRecords, recordsPerPage) => {
  const noOfWholePages = Math.trunc(numberOfRecords / recordsPerPage);
  const isLastPagePartial = numberOfRecords % recordsPerPage > 0;
  const noOfRecordsInLastPage = numberOfRecords % recordsPerPage;
  const noOfPages = noOfWholePages + (isLastPagePartial ? 1 : 0);
  const recordsBuilder = (pageNumber) => {
    const firstIndex = (pageNumber - 1) * recordsPerPage;
    let lastIndex = firstIndex + recordsPerPage - 1;
    if (noOfPages === pageNumber) {
      // Last page
      if (isLastPagePartial) lastIndex = firstIndex + noOfRecordsInLastPage - 1;
    }
    return [firstIndex, lastIndex, noOfPages];
  };
  return recordsBuilder;
};

I hope this post is helpful. Thank you and stay safe.

What I gained by completing 'JavaScript Algorithms and Data Structures' in freeCodeCamp.org

Jyotirmaya Sahu — Sun, 16 May 2021 17:33:59 +0000

This is my personal opinion and I don't force anything on you.
So be calm and keep learning.

From the last few days, I have been obsessed with completing lessons in freecodecamp.org. Well, after my first certification of 'Responsive Web design', I wanted the next one which is 'JavaScript Algorithms and Data Structures'.

So what did I gain ?

Certainly, it was no loss to me. Practicing is never a loss. But here, it helped me with my weak points in javascript which otherwise I would never would have discovered.

Writing Regex
constructor functions
Prototypes
Reduce function of Arrays

And a lot more which would certainly help in my career.

And what did I lose ?

Almost nothing, apart from a little amount of time which I would call an investment rather than a loss.

My suggestion

It's obvious. My suggestion is to check freecodecamp.org and similar sites, especially if you are a beginner and never been there. Even if you are not a beginner, who knows, you might just stumble upon something new and that might help in your career.
Its never bad to discover things.

How to prevent exceptions when using google_sign_in in flutter

Jyotirmaya Sahu — Sun, 18 Apr 2021 05:58:57 +0000

I was building an app which requires me to link user's google drive in my application to store data. But doing that requires fetching the access token from google_sign_in.

Now, although it is not a very difficult task, many people like me struggle with the exception

PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 10: , null, null)

Well, this is something I banged my head for. Now, lets get to the point. How to avoid this ? The answer is really simple, by using firebase. But wait, not the google login provided by firebase, but only a firebase project with your android application added in it (Don't forget to add the SHA1 certificate though).

Google cloud console and firebase console share projects, so a project created in firebase can be accessed in the cloud console as well. Now, let's see this through screenshots.

1. First we go to the firebase console and click on create a new project.

2. Then we fill in the name and all other pages and create the project.

3. Wait for the project to get created.

4. Click on add android application button.

5. Fill in the package name, nickname and SHA1 certificate. The SHA1 can be fetched by running the following command in the android folder ./gradlew signingReport or gradlew signingReport.

6. Download the google-services.json file and place it inside your android/app directory and complete the process.

7. Don't forget to add the following to the respective files.

8. Now, lets go the google cloud console, and we can find our newly created firebase project there with all necessary things already added.

Now, here we can configure the OAuth consent screen, and add scopes. This can be used now and login will work smoothly. We can edit this project and add web applications as well.

Note
Don't reveal your SHA1 and secrets to anyone or ever push them to a public remote repository. They can be used maliciously.

Is Native development is really better than cross-platform frameworks like flutter & React Native?

Jyotirmaya Sahu — Tue, 09 Mar 2021 08:28:46 +0000

Today, I came accross a post in Medium where the author has explained why native development is better than cross-platform frameworks like flutter and react native, although they really help to increase productivity.

I would like to know what everyone thinks, and what should be choosen or preferred in certain cases.

Kindly provide your views on the topic.

Copying array of Objects is not that straightforward

Jyotirmaya Sahu — Sun, 28 Feb 2021 07:34:06 +0000

So, you want to copy an array to create another new array, and not just copying the array reference to another variable. In C#, there are several ways to achieve this.
Some of the ways are:

Array.CopyTo()
Array.ConstrainedCopy()
Array.Clone()

These ways provide you with a new array that is different from the original array and not just two variables with the same reference.

But, any object when created, is created in the heap and it's address is assigned to the reference variable.

For example:
Student s1 = new Student()

Here, new Student() is the creation of an Student object in the heap, and s1 holds its address.

Same happens in an array. An array of objects or any complex type consists of reference variables holding the addresses of the actual objects present in the heap.

As, we can see from the image, we can now understand that when we copy a similar array, we end up with a new array but with the elements holding addresses, or references to the same objects.

Now, if we want a new set of objects with the same data, we may need to recreate the objects linearly. We can use the Array.ConvertAll() method for that purpose.

Refer to this article by Peter Mbanugo for more details on the methods mentioned in this article.

Note: This only applies to array of complex types. Array of primitive types will contain values as opposed to complex types which have references. So copying an array of primitive types will have no issues to deal with.

A Generic table in React with MaterialUI

Jyotirmaya Sahu — Sat, 27 Feb 2021 16:24:26 +0000

Disclaimer
This component is built upon an example on the MaterialUI components section, and hence some part of code may be same. This is just for someone who wants to save some time without trying to figure out all that is done in there.

Introduction

We as react developers must have heard about MaterialUI. It's a fantastic UI library for react (not sure about react native) based on Google's material design.

Now, for dealing with visualizing data in tabular form, it provides a Table component. But configuring it to your needs may look like a pain if you are in a hurry.

A Generic Table component

Here I have a created a DataTable component on the top of the Table component.

DataTable has the following features:

Can infer column names if directly array of rows are provided.
Can handle sorting at single column level.
Supports pagination.
Supports custom elements or components inside a cell.
Most importantly, we can always customize to our needs.

As, this is a plain React component, you can find the source below, and can improve upon it.

Usage

Basic usage

<DataTable
    columnData={[
        {
            id: 'name',
            name: 'Name',
            enableSort: true,
            align: "center"
        },
        {
            id: 'desc',
            name: 'Description',
            enableSort: true,
            align: "center"
        }
    ]}
    rows={[
       { name: 'First', desc: 'First Item' },
       { name: 'Second', desc: 'Second Item' }
    ]}
/>

The DataTable component takes two parameters, columnData and rows.

The columnData is an array of configuration values for columns, id, name, enableSort_, align.

The rows is the array of objects or we can say it is our data to be displayed in the Table body.

The pagination is same as an example on the MaterialUI components page.

This is open to improvement in discussions and feedback.

Locking scroll of multiple containers simultaneously

Jyotirmaya Sahu — Tue, 16 Feb 2021 13:19:37 +0000

Hi Friends! Every one of us must have seen the commit comparer of Github or some other source control providers. There, we have two containers scrolling simultaneously so that we can have a look at
the same place of both the files at the same time.

I am talking of something like this...

Achieving this in the web is quite simple, with JavaScript and Css.

I have made an example but it's horizontal. Yes! It seems quite odd but the main thing I wanna showcase here is the scrolling.

Here, we can assign a scroll event listener to the scroll sections or containers and access the scrollLeft property of the scroll target.

f.addEventListener('scroll', (e) => {
    console.log(e.target.scrollLeft);
  }
});

Now we assign the scrollLeft value to our second container's scrollLeft, and we have a working demo. And yes, we can do the same for the first container as well so that scrolling the second container will also scroll the first.

f.addEventListener('scroll', (e) => {
    s.scrollLeft = e.target.scrollLeft;
  }
});

But, now we have an issue. We can surely notice the stuttering of the scroll-bar. It's not smooth anymore. This is because setting the scrollLeft value of any container will trigger the scroll event on it.

To tackle this, we utilize debouncing. We maintain two variables, isFirstScrolling and isSecondScrolling. We use this to track whether the other one is scrolling, and we can update the scroll position of that container. If it is scrolling, we should not update the scroll value, this causes the stuttering.

f.addEventListener('scroll', (e) => {
  if(!isSecondScrolling) {
    isFirstScrolling = true;
    customDebounce("first");
    s.scrollLeft = e.target.scrollLeft;
  }
});

s.addEventListener('scroll', (e) => {
  if(!isFirstScrolling) {
    isSecondScrolling = true;
    customDebounce("second");
    f.scrollLeft = e.target.scrollLeft;
  }
});

The customDebounce function helps to set the scroll trackers to false once scrolling is over.

let timeOut;

const customDebounce = (tracker) => {
  console.log(timeOut);
  clearTimeout(timeOut);
  console.log("cleared",timeOut);
  timeOut = setTimeout(() => {
    if(tracker === "first")
      isFirstScrolling = !isFirstScrolling;
    else
      isSecondScrolling = !isSecondScrolling;
  }, 700);
}

So, with this, we have our working example.

Kindly check out the code and give valuable feedback to improve my further posts.

Thank You.

A simple control panel for application admins to manage users and privileges using Firebase

Jyotirmaya Sahu — Sun, 31 Jan 2021 13:21:51 +0000

A simple control panel for application admins to manage users and privileges using Firebase.

Firebase admin SDK is a server side SDK that allows us to interact with our Firebase project with admin privileges and perform certain actions to monitor and manager our project in our own way without using the Firebase console.

We are going to create a web application through which we will try to perform the actions that the Firebase admin SDK provides us with.

For that purpose we will need a front-end application which will act as the control panel and a back-end where we will integrate the admin SDK.

We will walk-through the front-end in another Part.

This project is made using Ubuntu 20.04 OS.

Pre-requisites

Create a firebase project and turn on Authentication — email & password authentication, and Realtime Database.

Visit console.firebase.com to create a project and configure as above.

Part 1 — Making the back-end

We will be using node-js as the back-end for making a rest API that our front-end application will consume. We will be using Typescript as it provides us a better and error free way to write Javascript code.

In the first step we are going to set up a node project to use Typescript. We will use express for making the rest API.

After creating a new folder and opening the terminal, let’s run the commands to create the project.

npm init -y

Okay, now we have a package.json file. Let’s install the required dependencies for our project.

npm install express cors dotenv firebase-admin

Also typescript , tslint and the type declarations for cors and express as dev-dependencies.

npm install typescript tslint @types/express @types/cors

Now let’s make a few changes to the package.json to really integrate typescript in our build process. We will add a “start” key to the scripts object as follows.

“start”: “tsc && node dist/index.js”

With this we are making sure that we are running the Typescript compiler (or tsc) to transpile all the .ts files before running the application. We will modify the .tsconfig file to mention the dist directory as the output directory for the typescript compiler later in the article.

Let’s mention the “dist/index.js” as the value of the main property as this file will be the entry point for our application.

With these changes, the package.json file should look similar to this.

Now, let’s add a tsconfig.json file to the project root with the following values. This file is a configuration file for typescript specific to that project. Here we mention the “outDir” as “dist” which makes sure that tsc uses the dist directory as the output directory for the transpiled files.

Now to configure Typescript linting for the project, in a terminal running in the root of the project, run the following command to generate tslint.json.

./node_modules/.bin/tslint --init

Open the generated tslint.json file and the no-console rule accordingly.

Now lets start configuring firebase-admin sdk in our project. For initializing the firebase-admin sdk we need to configure a service account.

Follow this guide to configure service account, download the key and rename it as service-key.json. Place this file in the root of the project directory.

This file should not be pushed to any remote location where it is subject to the risk of getting exposed. This file should be added to the .gitignore file in case of git.

In this project we are using dotenv to simplify the task of setting and using environment variables in multiple environments. So, we will create a .env file at the project root to where we can define the several values that we require as environment variables.

Create a .env file and paste the following values:

GOOGLE_APPLICATION_CREDENTIALS=service-key.json

DB_URL=<Your DB URL>

Find your DB URL in the firebase console on top of your realtime database.

Now, we will create a directory structure as shown:

src

— models

—modules

— — admin

— — auth

— — users

Create an index.ts file under the src directory.

In the index.ts file, let’s import the required modules.

import express from 'express';
import * as admin from 'firebase-admin';
import * as dotenv from 'dotenv';
import cors from 'cors';

Now, before we initialize the admin sdk, we need to configure dotenv , in order to inject the values mentioned in the .env file as the environment variables.

const dotenvKey = dotenv.config();

Here you can remove the constant assignment as we are not going to use the dotenvKey constant in the project.

Now, to initialize the firebase-admin sdk.

admin.initializeApp({    
    credential: admin.credential.applicationDefault(),    
    databaseURL: process.env.DB_URL
});

Here, firebase-admin will use the environment variable mapped by us in the .env file to access the service-key.json file. Also, we provide the databaseURL as our application will access the realtime database.

Now, let’s add the boilerplate code to create an express app.

**const** port = process.env.PORT || 8080;
**const** app = _express_(); 
app._use_(cors({origin: true}));
app._use_(express._json_());
app._use_(express._urlencoded_({extended: false}));

We use cors to avoid the CORS error while consuming endpoints from a browser.

A great thing about Typescript is that it allows the use of Interfaces, which we can use in this case to define a schema for our user model. So, under the models directory, we will create a file named UserModel.ts , with the content as:

export interface User {
    uid: string,
    email: string | undefined,
    displayName: string | undefined,
    lastSignInTime: string,
    creationTime: string,
    emailVerified: boolean,
    admin: boolean
}

Before proceeding with creating the routes, we need to secure the endpoints to prevent unauthorized access. For this purpose, we will create and use two middlewares, one for Authentication and another one for Authorization, i.e, to ensure whether the user requesting the operation has sufficient privileges.

Let’s create two files, authenticate.middleware.ts , authorize.middleware.ts.

We will use authenticate to check if user has a valid idToken, and the authorize to check if the user has the required privileges.

Note: The authenticate filter requires an Authorization header with the value in the following form:- Bearer

Note: The idToken can be retrieved by signing-in to firebase using the REST API for firebase Authentication for the moment.

Proceeding further, we need to create a UsersController.ts file under modules →users that will contain the methods that our routes for “/users” path will utilize.

Here, “//RA” means the particular function requires admin privileges to perform its functionality.

This name of the methods define its functionality in this case.

getAllUsers() →Returns a list of all the users.

getUser() →Accepts an uid and returns the particular user.

updateUser() →Here we can perform many task, but in the current scope we will only set the displayName property of the user. You can play around with the function and find out all the fields that a user can have in firebase authentication.

createUser() →Creates an user.

createAdminUser() →Creates an user but with Admin privileges.

deleteUser() →Deletes the user whose uid is provided.

deleteUsers() →Deletes multiple users, uid array is fetched from body.

forceSignOut() →Forcibly revoke a users refresh token, so that their login can’t continue.

mapUserFromUserRecord() →An utility function, private to the file, which helps in extracting user from an UserRecord object returned by the admin sdk, returns a User _ object._

Here, we use customClaims to store the admin role for an user. These customClaims can only be retreived through the admin SDK. (I didn’t find any way to retrieve them from the client sdk, Kindly mention in the feedback if I am wrong.)

We need a router that can map different routes to the functions. For that purpose we create a file routes.ts in the same directory. The file contains the following.

Here, we define a configureRoutes function, which will take our express app and add the routes. We pass true to authorize where the route requires admin privilege to perform the task.

Similarly, we create two files, adminController.ts and routes.ts under modules →admin.

Finally, we add the following import statements to the index.ts _ _file.

import { configureRoutes as configureRoutesForUsers } from './modules/users/routes';
import { configureRoutes as configureRoutesForAdmin } from './modules/admin/routes';

We listen for the endpoints by starting the server using the following piece of code:

app.listen( port, () => {
    console.log('Server listening at port '+ port);
});

Finally start the server on localhost using

npm start

We can use Postman to test the endpoints. Ex: http://localhost:8080/users/.

We can add users to the project by using the firebase console or by using the REST API for firebase. And thereafter we can retrieve the uid from the firebase console.

Note: For the first time, to add an admin, we can normally add an user and call the /admin/:uid/make endpoint by passing false to its authorize filter. After that we can revert the value to true.

Kindly refer to the following Github repository for the complete project files.

i-am-jyotirmaya/Firebase-admin-demo-api