DEV Community: adetroja

Different types of security token

adetroja — Tue, 24 May 2022 11:50:18 +0000

Types of Security Token

This article demonstrates different types of tokens in OpenID Connect. At the end of this article, you will have a clear understanding of the below points,

About JSON Web Tokens (JWT).
What is an Access Token?
- Example of an Access Token.
- Why do we need an Access Token?
What is an ID Token?
- Example of an ID Token.
- Why do we need an ID Token?
What is a Refresh Token?
- Example of a Refresh Token.
- Why do we need a Refresh Token?

About JSON Web Token (JWT)

JWT i.e. JSON Web Tokens is an important piece in ensuring trust and security in your application.
JWT allows claims such as user data to be represented securely.
A JWT is represented as a sequence of base64url encoded values that are separated by a dot character. Its ideal format is like “Header.Payload.Signature”, where the header keeps metadata for the token. The payload is the claims of the entity (typically a user) and a signature for the signed token.
The Signed token is generated by combining the encoded JWT header and Payload and it is signed by using an encryption algorithm like HMAC SHA–256. The signature private key is always held by the server so it will be able to verify existing tokens as well as sign new tokens.
JWT could be used as an opaque identifier and could be inspected for additional information – such as identity attributes that it represents as claims.

Sample JWT token format could look like

What is an Access Token?

Access tokens are credentials used to access protected resources.
Access tokens are used as bearer tokens. A bearer token means that the bearer (who holds the access token) can access authorized resources without further identification.

Because of this, bearer tokens must be protected.

These tokens usually have a short lifespan for security purposes. When it expires, the user must authenticate again to get a new access token limiting the exposure of the fact that it is a bearer token.
Access token must never be used for authentication. Access tokens cannot tell if the user has authenticated. The only user information the access token processes is the user id, located in sub-claims.
The application receives an access token after a user successfully authenticates and authorizes access. It is usually in JWT format but does not have to be.
The application should treat access tokens as opaque strings since they are meant for APIs. Your application should not attempt to decode them or expect to receive a token in a particular format.
This token does not contain any information about the user itself besides their ID (“sub”). It only contains authorization information about which actions the application is allowed to perform at the API (“scope”). This is what makes it useful for securing an API, but not for authenticating a user.
An access token is put in the Authorization header of your request, usually looks like Bearer “access_token” that the API you are calling can verify and grant you access.

Example of an Access Token

Here is the sample response from the token endpoint! The response includes the ID token and access token. Your application can use the access token to make API requests on behalf of the user.

{

"token_type": "Bearer",

"expires_in": 86400,

"access_token": "vCwWSQiaYhMHN2IbnEijtDWJ-BpiHbPohI6tOVrkrUrL2MqlF05K84MhBzvoC6iShEdUXl7t",

"scope": "openid profile email photo",

"id_token": "eyJraWQiOiJzMTZ0cVNtODhwREo4VGZCXzdrSEtQUkFQRjg1d1VEVGxteW85SUxUZTdzIiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmcmlnaHRlbmVkLWhlcnJpbmdAZXhhbXBsZS5jb20iLCJuYW1lIjoiRnJpZ2h0ZW5lZCBIZXJyaW5nIiwiZW1haWwiOiJmcmlnaHRlbmVkLWhlcnJpbmdAZXhhbXBsZS5jb20iLCJpc3MiOiJodHRwczovL3BrLWRlbW8ub2t0YS5jb20vb2F1dGgyL2RlZmF1bHQiLCJhdWQiOiJpVnUwQUMyOFFHLXNwc1psWk1janFRY2EiLCJpYXQiOjE2MDQyMTY1MzgsImV4cCI6MTYwNjgwODUzOCwiYW1yIjpbInB3ZCJdfQ.ZoPvZPaomdOnnz2GFRGbgaW7PPWIMFDqSBp0gbN4An4a9F-Bc-4_T9EBGV8aGetyjZYAON0gjNV0p0NGFiwettePWKuxBzusuGCEd9iXWWUO9-WTF5e2AGr3_jkg34dbxfiFXy3KgH7m0czm809cMaiZ_ofLYgJHVD8lqMQoWifhoNhpjPqa19Svc3nCHzSYHUgTXQWvA56NmQvyVPh_OM7GMpc6zHopmihJqt3eREof8N-bOd7FL39jeam2-k1TFSDogyJE513aC0OssRADr_TWvtL8xoaPkXM_7bXYs9_7erXmzF9la0hvmOuasieetpLhOvFeoiOJWCU9xhxj4Q"

}


<figure align="center">
  <img
  src="https://cdn.svc.oneadvanced.com/engineering-blogs/types-of-security-token/access_token.png"
  alt="Describe the access token" 
  width=800>
</figure>

### Why do we need an Access Token?

> Access tokens are used to inform an API that the bearer of the token has been authorized to access the API and perform a predetermined set of actions specified by the scope. It is used to authorize API access.
## What is an ID Token?

- OpenID Connect always issues ID tokens along with access tokens to provide compatibility with OAuthand match the general tendency for authorizing identity.

- ID token carries personal information about end-users that authenticate on an OpenID Connect flow. In addition, this security token contains claims data about the user as saved with the authentication server.

The ID token represents JWT. For example, 

- If there is an app that uses google to login into users and syncs their calendars, google sends an Id token to the app that includes information about the user.

- This token authenticates the user to the application. The audience of this token is set to the application’s identifiers, which means a specific application should consume the token.

- Identity token payload contains “auth_time” (when the end-user authenticated), “iss” (who has issued the token), “aud” (Intended audience), “sub” (unique identifier of the user), “idp” etc.

### Example of an ID Token (JWT)

> Here is the sample response from the token endpoint! The response includes the ID token and access token.


### Why do we need an ID Token?

> The ID token is used to retrieve the user’s basic profile information like name, DOB, email, and phone, which is present in the authentication server. ID token should not be used to gain access to an API.

<figure align="center">
  <img
  src="https://cdn.svc.oneadvanced.com/engineering-blogs/types-of-security-token/why_id_token.png"
  alt="Describe why Id token is required." 
  width=800>
</figure>


## What is a Refresh token?

- This token is long-lived compared to the access token and is used to request a new access token in cases where it is expired.

- It can be considered as credentials used to obtain access tokens.

- It's allowed for long-lived access and is highly confidential.

- Refresh tokens can be used for grant types – authorization code and password credentials grant.

- Refresh tokens are intended for use only with authorization servers and are never sent to resource servers.

You will receive this in an encoded format only that cannot be decoded. An example could be 494c427ace9e04dea03c7234cea96c5ca53e0ce4ea95147e961fd9ebcf8feb84

### Example of a Refresh Token

> Here is the sample response from the token endpoint! The response includes the access token along with the refresh token.

{

"access_token":"ya29.a0AfH6SMARVjPq6G2y_P3hn3mbDdnRVrTGwO1ZkTXvUHye9wcpAPyiRKilq6Wh20TRbVx0nA1Nn8z1cpk_Jjs6qRwDvbOFNZhpA8e2GxDRcJ_PlrhlMnauvxktSDkjUyG-NWwuckHpiaOfr_uITriM0aS2t3HbGIKQJiU",

"scope":"https://mail.google.com/",

"token_type":"Bearer",

"expires_in":3599,

"refresh_token":"1//0419Pth1mYFyBCgYIARAAGAQSNwF-L9IrcV8zK4wHDznJqUbeXrcEoE2O-Tmz7ryNpztTrLOiYOvs-0z4hxddGBpcKc0pEzLcWFI"

}


### Why do we need Refresh token?

> As access token has defined lifetimes, there could be a possibility that the current access token becomes invalid or expires. This is the token used to request new access tokens without user interaction.
<figure align="center">
  <img
  src="https://cdn.svc.oneadvanced.com/engineering-blogs/types-of-security-token/refresh_token.png"
  alt="Describe reshesh token" 
  width=800>
</figure>

#### Requesting an access token using a refresh token
> While requesting a refresh token, the scope should be set as offline_access to the scope parameter.

Method: POST

Content-Type: application/x-www.form-urlencoded

Authorization: Bearer “access token”

https://authorization-server.com/token?

grant_type=refresh_token

&refresh_token =<>

&scope=offline_access

> Application receives an access token with redirect URI.

{

"token_type": "Bearer",

"expires_in": 86400,

"access_token": "QKY08tqDO8aeNebZbfgUFs1PH-cjerK2WBvE9FZpYGgZHnS_nLfhKYTECMBmPF_chz5GipOA",

"scope": "photo offline_access",

"refresh_token": "8V2dMpzRqB5cQDvoTb6X_Msl"

}

## Last Minute Summary

- Below is a quick reference of all the tokens at a glance,

- Access tokens are used in token-based authentication to gain access to resources by using them as bearer tokens.

- Refresh token is a long-lived special kind of token used to obtain a renewed access token.

- ID token carries identity information encoded in the token itself, which must be a JWT. It must not contain any authorization information, or any audience information — it is merely an identifier for the user.

Webpack module bundler

adetroja — Tue, 15 Mar 2022 11:42:32 +0000

Overview

In this blog post, we will show you, what developers are facing problems earlier with libraries and frameworks, how the webpack bundle is solving the problem, and use case of the webpack bundle for typescript base applications.

Also, we will show you, core concepts with help of examples and functions of webpack bundle.

What was the Problem before webpack.

We are as JS developers, have a huge dev community, involved in the constant quest of improving the overall user and developer experience around using and building JavaScript/web applications, therefore we are creating new libraries and frameworks.

A few design patterns also evolved to give developers a better, more powerful yet very simple way of writing complex JavaScript applications.

Gradually, they started getting bulky, with the introduction of JavaScript modules, eventually, all of this led to a situation where we had 4x or 5x files in the overall application package.

So, the overall size of the application is a challenge. Now, question is, how to manage the dependencies and size of the application.

What is Webpack Module Bundler?

Webpack is a JavaScript library, built and maintained by Tobias Koppers and the team. It is an aggressive and powerful module bundler for JavaScript applications.

It packages all the modules (files like CSS, HTML, Typescript, .env, etc..) in your application into one or more bundles (often, just one file, main.js or index.js or index.html(browser)).

Webpack is taking the help of loaders and plugins, then, it can transform, minify and optimize all types of files before serving them as one bundle to the browser or server.

How webpack is worked internally ?

In brief, Webpack goes through your package and creates what it calls a dependency graph which consists of various modules which your application/project would require to function as expected.

Depending on this graph, it creates a new package which consists of the very bare minimum number of files required, often just a single bundle.js or index.js file which can be plugged into the HTML file (if react Application) or main.js (Server-side application) easily and used for the application.

Core concepts

Entry
Output
Loaders
Plugins
Mode

Entry

The entry object is where webpack looks to start building the bundle. The context is an absolute string to the directory that contains the entry files.

single entry file

module.exports = {
  entry:'./src/index.js'
}

multiple entry file

module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
}

Output

Configuring the output configuration options tells webpack how to write the compiled files to disk. Note that, while there can be multiple entry points, only one output configuration is specified.

module.exports = {
  output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, 'dist'),
    filename: 'main.js'
  }
}

Some libraryTarget options, which version of ECMAScript you want to output.

libraryTarget: "umd", // enum
libraryTarget: "umd-module", // ES2015 module wrapped in UMD
libraryTarget: "commonjs-module", // ES2015 module wrapped in CommonJS
libraryTarget: "commonjs2", // exported with module.exports
libraryTarget: "commonjs", // exported as properties to exports
libraryTarget: "amd", // defined with AMD defined method
libraryTarget: "this", // property set on this
libraryTarget: "var", // variable defined in root scope

Loaders

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them.

Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.css$/,
        use:
          [
            'style-loader',
            'css-loader',
          ]
      }
    ]
  }
  /*...*/
}

Few examples of Loaders,

sass-loader: Loads a SASS/SCSS file and compiles it to CSS. It requires node- sass to work.
node-sass: This library allows you to natively compile .scss files to CSS at incredible speed and automatically via a connect middleware.
css-loader: The css-loader interprets @import and url() like import/require() and resolves them.
style-loader: Add CSS to the DOM.
file-loader: Instructs webpack to emit the required object as a file and to return its public URL.
image-webpack-loader: Minify PNG, JPEG, GIF, and SVG images with imagemin.

Plugins

Webpack contains default behaviors to bundle most types of resources. When loaders are not enough, we can use plugins to modify or add capabilities to Webpack.

Plugins are like loaders but on steroids. They can do things that loaders can’t do, and they are the main building block of webpack.

module.exports = {
  /*...*/
  plugins: [
    new HTMLWebpackPlugin(),
    new CleanWebpackPlugin(['dist']),
  ]
  /*...*/
}

HTMLWebpackPlugin plugin has the job of automatically creating an HTML file, adding the output JS bundle path, so the JavaScript is ready to be served.

CleanWebpackPlugin can be used to clear the dist/ folder before creating any output, so you don’t leave files around when you change the name of the output file.

Mode

This mode (introduced in webpack 4) sets the environment on which webpack works. It can be set to development or production (defaults to production, so you only set it when moving to development)

Production

Development

Installing webpack

Global install

with Yarn:

yarn global add webpack webpack-cli

with npm:

npm i -g webpack webpack-cli

Once this is done, you should be able to run webpack-cli in cmd and add this to your package.json file:

{
  //...
  "scripts": {
    "build": "webpack --config webpack.prod.js"
  }
}

then run npm run build

Example

Console output

JFrog deployed npm package: