DEV Community: Moin Akhter

Passwordless Authentication with AWS Cognito: A Step-by-Step Guide

Moin Akhter — Mon, 16 Dec 2024 21:45:16 +0000

Passwordless authentication is becoming a popular way to authenticate users, offering both convenience and enhanced security. In this tutorial, you’ll learn how to implement passwordless authentication using AWS Cognito, complete with Lambda triggers for creating and verifying one-time passwords (OTPs).

By the end of this tutorial, you’ll understand:

What passwordless authentication is
How to configure it on AWS Cognito

All code and related resources for this tutorial are available on this GitHub repository.

This tutorial follows the authentication flow illustrated in this diagram.

What is Passwordless Authentication?

Passwordless authentication eliminates the need for users to remember passwords, instead using alternatives like OTPs or links to authenticate. This approach not only reduces the risk of password theft but also enhances user convenience.

Here’s how it works in the context of AWS Cognito:

A user enters their email or username on the login page.
Cognito triggers Lambda functions to create a challenge (e.g., an OTP) and sends it to the user’s email.
The user provides the OTP, which Cognito verifies.
Upon successful verification, Cognito returns tokens (access, refresh, and ID tokens) to authenticate the user.
Although the concept is simple, setting up this flow requires careful configuration of AWS Cognito and Lambda triggers.

Prerequisites

To follow this tutorial, ensure you have:

An AWS Cognito User Pool: With an associated App Client configured for custom authentication.
An IAM User: With permissions to manage Cognito via the AWS SDK.
Here’s an example of an IAM policy with the required permissions:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "cognito-idp:*",
            "Resource": "RESOURCE_ARN"
        }
    ]
}

Lambda Triggers Overview

Passwordless authentication in AWS Cognito relies on three key Lambda triggers:

DEFINE_AUTH_CHALLENGE: Determines the type of challenge (e.g., OTP) and handles retry limits.
CREATE_AUTH_CHALLENGE: Creates the challenge (e.g., generates and sends an OTP).
VERIFY_AUTH_CHALLENGE: Verifies the user’s response to the challenge.
These triggers work together to implement the passwordless authentication flow.

Implementing Lambda Triggers

1. DEFINE_AUTH_CHALLENGE

This trigger determines the authentication flow logic, such as whether to issue tokens or present the next challenge.

Here’s a sample implementation for allowing up to 3 OTP attempts:

exports.handler = async (event) => {
  const { session } = event.request;
  const lastChallenge = session?.slice(-1)?.[0];

  if (lastChallenge?.challengeResult) {
    // User successfully authenticated
    event.response.issueTokens = true;
    event.response.failAuthentication = false;
  } else if (session?.length >= 3 && !lastChallenge?.challengeResult) {
    // User failed too many attempts
    event.response.issueTokens = false;
    event.response.failAuthentication = true;
  } else {
    // Present next challenge
    event.response.issueTokens = false;
    event.response.failAuthentication = false;
    event.response.challengeName = 'CUSTOM_CHALLENGE';
  }

  return event;
};

2. CREATE_AUTH_CHALLENGE

This trigger generates an OTP and sends it to the user via email.

Here’s a sample implementation using Amazon SES:

const { SESClient, SendEmailCommand } = require('@aws-sdk/client-ses');
const ses = new SESClient();

exports.handler = async (event) => {
  const userEmail = event.userName;
  if (!userEmail) throw new Error('Missing email');

  let otpCode = Math.floor(100000 + Math.random() * 900000); // 6-digit OTP
  await sendEmail(userEmail, otpCode);

  event.response.privateChallengeParameters = { secretLoginCode: otpCode };
  event.response.publicChallengeParameters = { email: userEmail };

  return event;
};

async function sendEmail(emailAddress, otpCode) {
  const command = new SendEmailCommand({
    Destination: { ToAddresses: [emailAddress] },
    Message: {
      Subject: { Data: 'Your One-Time Login Code' },
      Body: { Html: { Data: `<p>Your login code is: <strong>${otpCode}</strong></p>` } }
    },
    Source: process.env.MAIL_FROM
  });

  await ses.send(command);
}

Note: Ensure the Lambda role has ses:SendEmail permissions.

3. VERIFY_AUTH_CHALLENGE

This trigger validates the OTP entered by the user.

Here’s a simple implementation:

exports.handler = async (event) => {
  const expectedOtp = event.request.privateChallengeParameters.secretLoginCode;
  const providedOtp = event.request.challengeAnswer;

  event.response.answerCorrect = providedOtp === expectedOtp;
  return event;
};

Configuring Triggers in Cognito

After deploying the Lambda functions, link them to your Cognito User Pool:

Navigate to the Triggers section of your User Pool.
Assign the Lambda functions to their respective triggers:
- Define auth challenge → DEFINE_AUTH_CHALLENGE
- Create auth challenge → CREATE_AUTH_CHALLENGE
- Verify auth challenge → VERIFY_AUTH_CHALLENGE

Backend API Implementation

Once Cognito is configured, create two backend endpoints to handle authentication.

1. Initiating Authentication

This endpoint starts the custom authentication flow by invoking theCUSTOM_AUTH action:

const { InitiateAuthCommand } = require('@aws-sdk/client-cognito-identity-provider');

const initiateAuth = async (userName) => {
  const command = new InitiateAuthCommand({
    AuthFlow: 'CUSTOM_AUTH',
    ClientId: process.env.AWS_COGNITO_APP_CLIENT,
    AuthParameters: { USERNAME: userName }
  });

  const response = await cognitoClient.send(command);
  return response.Session; // Save this session for verification
};

2. Verifying the OTP

This endpoint verifies the OTP provided by the user:

const { RespondToAuthChallengeCommand } = require('@aws-sdk/client-cognito-identity-provider');

const verifyOtp = async (session, userName, otp) => {
  const command = new RespondToAuthChallengeCommand({
    ChallengeName: 'CUSTOM_CHALLENGE',
    ClientId: process.env.AWS_COGNITO_APP_CLIENT,
    Session: session,
    ChallengeResponses: { USERNAME: userName, ANSWER: otp }
  });

  const response = await cognitoClient.send(command);
  return response.AuthenticationResult; // Contains tokens on success
};

Conclusion

With this setup, you’ve successfully implemented passwordless authentication using AWS Cognito. This method enhances both security and user experience by eliminating passwords. For a complete implementation, visit the GitHub repository.

Feel free to leave a comment if you have questions or suggestions!

CloudFront Caching for AWS S3 Objects

Moin Akhter — Tue, 07 Nov 2023 21:51:14 +0000

In this blog, we will learn about caching s3 objects by using another AWS service called Cloudfront.

Storing images and files on s3 is a very common and cost-effective solution. But cost-effectiveness is not everything but the performance of the object that your client accessing does also matter. Now by default, AWS uses very good approaches to give back your object (In the S3 world any file or image that you upload on it is an object). Now we can also optimize by caching the most frequently accessed object on CDN servers managed by AWS. Now for this purpose, AWS gives us another service called Cloud Front.

Now let's see how we can create an s3 bucket and use Cloud Front in order to cache our objects.

CREATE YOU BUCKET FIRST:-

Go to s3.
Click on Create Bucket.
Give an appropriate name for your bucket.
Leave your bucket as private as we will use cloud front in order to get objects.
Enable version if you want versioning.
Then click on the Create Bucket button.

CREATE A CLOUD FRONT FOR CACHING PURPOSE:-

Go to cloud front service.
Click on Create Distribution.
For the Origin domain select the bucket name for which you want to add this distribution.
For Origin access select Origin access control settings (recommended). A dropdown will appear click on create access control setting button. Select recommended for Signing behavior and also check the do not override header check box, select origin type as s3, and click create.
For Web Application Firewall (WAF) select Enable Security Protection for security purposes.
For the Default root object use any default image name that will be shown when you hit the base URL of this distribution.
Click on the Create and Copy policy. We will attach this policy to the s3 bucket which will block everyone from accessing objects of the bucket and only allow this distribution to access s3 objects on behalf of the user which is a kind of an extra layer of security.
Go to your intended bucket and in the Permissions tab go to Bucket Policy paste the copied policy of Cloud Front distribution there and click on save changes.
Now upload an image with the same name and extension that you set for the Default root object while creating the cloud front distribution. Now go to your cloud front distribution and go to the General tab. In general tab you will be able to see the Distribution domain name. Copy this Distribution domain name and hit on your browser you will be able to see the Default root object on the base URL. That's it now you can access your objects on "distributionUrl/objectName". Object will also be cached on some CDN server by aws so whenever you access this file aws will give you back the cached file in order to decrease latency.

Deploying Nodejs App To Heroku

Moin Akhter — Fri, 18 Aug 2023 18:51:19 +0000

In this blog we will learn how we can deploy our nodejs app on heroku.

Goals
We will try to deploy our nodejs app.

Prerequisites
You just need to have a heroku account.

Deployment is one of the difficult part for developer.But, heroku made it very easy just few commands and your app deployed.In this blog i will teach you how we can easily deployed our nodejs app on heroku.

How To Deploy On Heroku.

First of all login to your heroku account and create an app.
While creating app heroku will ask for buildpack which use to build your nodejs app code for nodejs we can select nodejs.

Now donwload heroku-cli for your system.You can download from here https://devcenter.heroku.com/articles/heroku-cli#install-the-heroku-cli
Initialize your repo with nodejs app.
After downloading heroku-cli login to your heroku account.For that you can use this command.

heroku login

It will take you to browser to login your account.

After login add heroku origin.Be remember heroku also uses a git repo on their linux system/machine inorder to store your code after storing into it's repo it will use buildpack to build your code and generate minimized and more compressed version of your code to make it more efficient and faster than make it available to all over the world.You can find heroku remote origin on settings tab.

You can add heroku origin by using this command.

git add remote heroku https://git.heroku.com/<your_app_name>.git

Here i set heroku origin name as heroku you can also provide any intended name to your heroku origin.

After adding heroku origin add your files to staging area and commit your files and than push to heroku origin using this command.

git push heroku <your_branch_name>:main

Above command will not push code to your vcs repo but only heroku's repo.
After that you can also push code to you git repo as well.

Once code pushed successfully on heroku origin heroku will start building your app and than deploy your app at the end of logs you will get a deployed url.You can use this url inorder to check whether you app deployed successfully or not.
To see logs you can use this command.

heroku logs --tail

NOTE:-
Heroku by default uses main branch to deploy your code from where it should copy code you specifiy like in below command

git push heroku <branch_from_where_to_copy_code>:main

For more detail you can visit https://devcenter.heroku.com/articles/git

That's it, happy coding😉.

Creating event on google calander with google meet link.

Moin Akhter — Sat, 05 Aug 2023 15:06:11 +0000

In this tutorial, we will learn about how to create event on google calander with google meet link.

Goals
By the end of this blog you will have idea about:
How to create event on google calander.
How to inject google meet link as well.

Prerequisites

You must have knowledge about javascript,nodejs and a little bit idea how does google calander apis works.
You must have google admin account (We need some advance feature which can't be available in regular google account).

All code will be available on this link.
https://github.com/MOIN-AKHTAR/google-calander-event-with-meet-link

So before starting first login you google admin account as google developer account and create your project.You can create project by following these steps.

After you have created project you have to enables Google Calander APIS.You can enable by following these steps.

After you have enabled calander apis now you need to create a service account.json so that we can use that on our backend as authenticated machine/user.You can create service-account.json by following these steps.

After clicking on service account you will see below screen fill all necessary information.

After you fill all necessary info and click on done you will be redirected to a page where there will be three sections API Keys,OAuth 2.0 Client IDs and Service Accounts.Select you service-account which you have just created and go to Keys click on ADD KEY button and create this will create and download a service-account.json in your machine save this for use in our backend code.

Now after created and downloaded service-account.json file copy client_id which is in your service-account.json.Than go to google admin console and login your google admin account and follow these steps.

In above pop up image paste your client_id which you coppied from downloaded service-account.json and add https://www.googleapis.com/auth/calendar as scope in above image.

That's it that was full configuration part now let's go to coding part.

google-auth-library [For authentication purpose].
@googleapis/calendar [For calander apis purpose].

In code i have created a createEvent function inwhich we configure everything which will create event on google calander og participants and google admin account.In this function we just authenticating ourself via service-account.json properties and than creating event with all basic info like title,description,start and endtime with participants.

SUMMARY:-
In summary what we have done first of all we created a project on google developer conolse using google admin account,enabled calander api and than created and downloaded service-account.json in our machine.After all this we log in to google admin console using google admin creds and added our service-account.json's client_id as domain wide delegation.On our backend we created a createEvent function which creating calander event and also google meet link with it.That's it happy coding...

Creating appointment and sync with google calander.

Moin Akhter — Thu, 27 Jul 2023 18:47:16 +0000

In this tutorial, we will learn about how to oauth via google,schedule appointment and sync appointment with our google calander.

Goals

By the end of this blog you will have idea about:

How to oauth with google.
How to schedule appointment using onsched service.
How to sync our appointment with google calander.

Prerequisites

You must have knowledge about javascript,nodejs and a little bit idea how does google oauth works.

Techs

Mongodb (For storing records like user,appointments,services).
Redis (For storing google's tokens i.e. refresh and access token).
Onsched (For appointment)
Google developer console project with enabled people and calander services and gogole oauth.
Reactjs

All code will be available on this link.
https://github.com/MOIN-AKHTAR/onSched-Implementation

Working with timezones and creating appointment is a kind of a pain for devs if you have experienced with these kind of scnerios you must know how its difficult to deal with,now not anymore there are plenty of services you can use like calcom,nylas and onsched.In this blog i will guide you how we can use onsched service inorder to overcome all these availability and timezones issue if you are intending to create an appointment type of web/app.
Before go a little bit more in depth i want to discuss few thing which make it easier to understand upcoming things.

How does onsched work?
If you got idea about this question you will be able to understand overall flow, basically there are four core concepts which onsched uses behind the scene.

Location
Resource
Service
Customer

Location:-

Location is the main object whenever you create an onsched account you must create a location and inside this location you have to set business hours.
Onsched takes these working hours inorder to provide availability of resource and services.Now resources and services also have their own availability but if their availability goes beyond the boundary of location working hour you will not get any resource or service available for making appointment.

Resource:-

A resource is nothing but a person with whom you want to make an appointment.Let's say you want to make an appointment with a doctor here doctor is a resource for onsched.While creating a resource you set their availability as well but in my code i have made it available for all days 24hrs you can set that via availability property while creating resource.

Service:-

A service is self explanatory let's say a doctor can provide service for psychopath,geocologist and plastic surgeon so these are services for onsched.Each service also have availability while creating service but in my code i have made it available for all days 24hrs you can set that via availability property while creating servce.

Customer:-

A customer is nothing but a person who is making appointment with a particular resource for a specific service for a specifc dates time slot.While creating appointment we are making onsched customer as well.

These above terms seems to be kind of difficult to understand but these concepts which onsched uses behind the scene.

Ok, now let's move to the practical part instead of theoritical part.

First of all we need to use google services like people and calander so create a project on google developer console and enable services like People API and Google Calendar API.You can enable by following these steps.

We are using google oauth so for that we need to create CLIENT_ID and CLIENT_SECRET you can generate by following these steps.

Since we will use onsched service for scheduling and appointment purpose also create account on onsched and set business hours of primary location you can do this by following these steps.

To use onsched apis on our backend we gonna need CLIENTID and CLIENT_SECRET.You can get these by following these steps.

HOW DOES AVAILABILITY WORKS:-

So on onsched availability depends on availability of locations's busniess hours,service availability and resource availability.
So, in simple we can say that onsched takes a kind of intersection among these three objects (Location,Resource and Service) availability and convert according to your timezone.

NOW HOW CODE WORKS HERE:

HOW LOGIN WORKING:-

Initially you will get a login page when you click on Login With Google you will be redirected to oauth screen.After you entered correct creds you will be asked for permission of your calander so that we can add or remove any sort of event in your calander.In response you will be redirected to redirect screen which you setted up in oauth conscent screen setting. In simple you will be redirected to url like http://localhost:30000/?code=someCodeGivenByGoogle.
We than sending this code on our backend on /auth/tokens endpoint and getting access and refresh token from google and savig these tokens in redis so that we can use these tokens inorder to create event.Because for any event to be created on your calander we need to be authorized and those tokens which we saved in redis is a sign that we are authorized we will attatch these tokens when we will create any event to make us to be authorized for using google calander apis.

CREATING APPOINTMENT:-

After login you will be redirected to /dashboard screen where you i'll be able to see list of resources.
By clicking on view service you will be able to see a list of all services realted to that particular resource.
By clicking on create appointment a calander will be appear in front of you.
To create appointment you first need to select date on clicking date you will get a list of time slot available for that particular date.
By clicking on a specific time slot you will create appointment and this appointment will be available on /appointments route.
On /appointments route you will be able to see list of your appointment by clicking on go to call button it will redirect you to google meet where you can talk shalk that's it.

SUMMARY:-

In simple by using onsched we create location,resource and services and each object have there availability.To make availability according to you timezone we provide timezoneId,resourceId and serviceId.Onsched will do all heavy lifting behind the scene for you and give us availability and than by clicking any suitable time slot we have created our appointment while creating appointment we are creating customer and than appointment and this appontment become available to our calander as we are using oauth and also saving access and refresh token provided by google.That's it...

Creating a stripe connect account.

Moin Akhter — Wed, 31 May 2023 22:40:33 +0000

In this tutorial, we will learn about how to create stripe connect account.

Goals

By the end of this tutorial, you knew about:

What is stripe connect account.
When we should use.
How to create stripe connect account.

Prerequisites

You must have knowledge about javascript and nodejs for this.

All code will be available on this link.
https://github.com/MOIN-AKHTAR/stripe-connect.git

Last time i was working on a backend and the application was like we have advisros and those advisors can give advices and customer can pay to advisor for their services.Now for collecting payment we have multiple payment gateways like stripe,paypal and much more but stripe is more reliable and recomended because it provides multiple ways of collecting payment and make easier for developers to deal with these scnerios.Now stripe provides multiple ways to collect payment now for my scnerio i have used a feature called stripe connect.

Now what's this stripe connect account.In simple words you can think of as a stripe account which will collect money on others behalf in our scnerio advisors.Now for each of my advisors i have created a stripe connect so that we can put payment to their account.

But before of that make sure you set up a business in your platform stripe account(mean account who's secret key you are using).You can set by going to this link.

https://dashboard.stripe.com/login?redirect=%2Fsettings%2Fconnect

Now follow these step to setup your business.

Go to branding section.
Set business name
Than go to Appearance section.
Set icon,logo,brand color and accent color and than click on save branding changes button which will next to "Branding Section Heading". After all steps you may see this type of result.

Now aftre setting up business first we need a secret key of stripe platform account you can create your account on stripe and use test or live keys for this purpose.

To get secret key you can go to Home tab and there you can find keys.

For creating stripe connect account we need to create a url which will redirect you to a prebuilt form of stripe where you have to provide all necessary information about your business,personal information and bank account info which stripe will use to payout.

BACKEND PART:

Before starting our backend we have to install few dependencies.

1. express (For setting up our server).
2. dotenv (To read environment variables from .env file).
3. cors (To resolve cors issue).
4. stripe (To deal with stripe related tasks).
5. nodemon (Install as dev dependency it will auto restart your 
            server whenever any changes occur in your code).

Now this piece of code will create that url which will redirect you to prebuilt from provided by stripe for collecting necessary info.

const account = await stripe.accounts.create({
        type: 'standard',
      });
const accountLinks = await stripe.accountLinks.create({
        account: account.id,
        refresh_url: `${process.env.ORIGIN}/verify-wallet?account_id=${account.id}`,
        return_url: `${process.env.ORIGIN}/verify-wallet?account_id=${account.id}`,
        type: 'account_onboarding',
      });

Now when you will redirect to url you will see this kind of screen.

Here we also have used ORIGIN this origin is nothing but your web page such as http://localhost:3000 stripe will redirect you to this page with accountId as we set in refresh_url and return_url.So, you can do some sort of action on this page like we can check whether user has provided all info which stripe was expecting and than save this accountId to database.

After all this setup if all required info provided to stripe so we can pay to this account using stripe charge api for that you can visit to https://stripe.com/docs/api/charges/create.

Gcp Resumable Upload With Reactjs And Nodejs

Moin Akhter — Sun, 13 Nov 2022 10:09:34 +0000

In this tutorial, we will learn about resumable upload.

Goals

By the end of this tutorial, you’ll know:

Creating GCP Bucket.
How to upload large files resumable.

Prerequisites

You must have knowledge about javascript and nodejs for this.

Now a day users upload a large file to buckets. Now during uploading, if any error occurs, the user must upload that large file again, which can be irritating for the user.This is where resumable upload comes in to picture.Many service providers like gcp and aws gives ability of resumably upload large files into chunk using something called "signedUrl".

A signedUrl is a kind of url which is valid for a restricted time after that this url will be discard automatically by service provider.

All code will be available on this link.
https://github.com/MOIN-AKHTAR/Resumable-Upload-To-GCP

BACKEND PART:

Before starting our backend we have to install few dependencies.

1. express (For setting up our server).
2. dotenv (To read environment variables from .env file).
3. cors (To resolve cors issue).
4. @google-cloud/storage (This sdk will help us to work with gcp 
                          bucket).
5. nodemon (Install as dev dependency it will auto restart your 
            server whenever any changes occur in your code).

Inorder to work with gcp bucket first you have to create a bucket inside a project.So go to https://console.cloud.google.com/ and create a new project.

Now follow the steps which i have shown in above image after step 3 you will be redirect to another screen which will ask you above service account details fill the details appropriately than submit the form.After submitting you will get a list of service accounts.
Click on intended service account and go to keys tab than click on Add Key button and download json file.
Now, this file will be used as secret for authentication and to verify whcih account of google developer console you are using.

After that we need to create a bucket for our this newly created project.For creating new bucket follow steps shown in below snapshot.

After following above steps click on create bucket button.Give some name to your bucket.After creating you gcp bucket you will be redirect to a page where you i'll be able to see a list of buckets you slected project have.

NOTE:- Inorder to get access to uploaded files i have made my bucket as public you can set persmission for your bucket suits your scenario.

https://cloud.google.com/storage/docs/access-control/making-data-public

Inorder to upload files we need to configure our cors config for resumable upload for bucket.These cors config is basically for security purposes.You can follow below code to config your bucket cors.

const { Storage } = require("@google-cloud/storage");

const storage = new Storage({
  keyFilename: "google-storage-key.json",
});

async function configureBucketCors() {
  const [metadata] = await storage
    .bucket(process.env.BUCKET_NAME)
    .getMetadata();
  if (!metadata.cors) {
    await storage.bucket(process.env.BUCKET_NAME).setCorsConfiguration([
      {
        origin: [process.env.OTHER_ORIGIN], //Such as 
 http://localhost:3000
        responseHeader: [
          "Content-Type",
          "Access-Control-Allow-Origin",
          "X-Upload-Content-Length",
          "X-Goog-Resumable",
        ],
        method: ["PUT", "OPTIONS", "POST"],
        maxAgeSeconds: 3600,
      },
    ]);
  }
}

configureBucketCors().catch(console.error);

exports.storage = storage;

Now in above code snippest you must keep responseHeader && method as it is other wise it will not work because these responseHeader and methods are necessary in config.

After this config we need to create an endpoint which will give us a signedUrl which we can use on front end to resumably upload files to ou configured bucket.Now below code snippest is doing that.

app.route("/getSignedUrl").get(async (req, res, next) => {
  try {
    const [url] = await storage
      .bucket(process.env.BUCKET_NAME)
      .file(req.query.fileName)
      .getSignedUrl({
        action: "resumable",
        version: "v4",
        expires: Date.now() + 12 * 60 * 60 * 1000,
        contentType: "application/octet-stream",
      });
    return res.json({
      url,
    });
  } catch (error) {
    return res.status(500).json({
      success: false,
      error,
    });
  }
});

FRONTEND PART:-

Now in front end part i'm not going to deep just giving idea what's we are doing on front end.So here what we have done on front end.

First we added an input which will pick file.
After we selected file we hit our enpoint which will give us a signedUrl.
Using this signed url we will get a session url.
This session url will be used to upload file resumably.
For that i have created a function postNotificationService.This will upload file chunk using session url.
Whenever chunk uploaded successfully we will get a status of 308 which mean that chunk uploaded to bucket successfully but some chunk of file are still remaining.So we have called postNotificationService function recursively.
When whole file will be uploaded successfully we will get status code of 200 and url of uploaded file will be in data.request.responseURL.split("?")[0].

That's it..

Let’s Recap

We learned about what is resumable upload.
What are signedUrl.
Created Google project and also created bucket.
We configured cors for bucket which we will use for resumable upload.
Created an endpoint which will generate a signedUrl which we can use on frontend to resumably upload file to bucket.
On front end we hit signedUrl to get signedUrl.
Using this signedUrl we got session url.
We used session url for resumable upload.
We uploaded file chunk by chunk using session url.
Whenever chunk uploaded successfully and we got status of 308 it's mean that chunk of file uploaded successfully but not the whole uploaded yet.
If we got status code of 200 it's mean whole file uploaded to bucket successfully.
Than data.request.responseURL.split("?")[0] we will get url of whole uploaded file.