Implementing Typescript for HTTP header typing

Question

Implementing Typescript for HTTP header typing

I find myself in a state of confusion regarding Typescript and its suggestions for type definitions. Currently, I am working on a Graphql API with Apollo Server and attempting to implement authorization using JWT via request headers (I am rewriting an existing API). To start, I am extracting the token from request headers like this:

const token: string = req.headers.authorization

However, this results in an error stating "type string | undefined is not assignable to type string", so I adjusted it to:

const token: string | undefined = req.headers.authorization

After making this change, I noticed that the original API attempts to retrieve the authorization property from either req.headers.authorization or req.headers.Authorization. Although I do not understand why, I decided to follow suit by trying:

const token: string | undefined = req.headers.authorization || req.headers.Authorization

This led to a new error message: "type string | string[] | undefined is not assignable to type string | undefined".

So, I made another adjustment:

const token: string | undefined | string[] = req.headers.authorization || req.headers.Authorization

Now, I have some questions:

Why do req.headers.authorization and req.headers.Authorization have different data types?
After searching online, I see that all tutorials on authorization use req.headers.authorization, but what about req.headers.Authorization?

typescript express header apollo-server

Answer 1

Answer №1

1: The disparity in data types between req.headers.authorization and req.headers.Authorization

To uncover the reason behind this distinction, refer to the TypeScript definitions for node's http library found here.

The definition for req.headers.authorization is:

'authorization'?: string;

Being optional allows it to be undefined, otherwise, it's a string.

On the other hand, req.headers.Authorization does not have a specific definition listed, requiring reference to the type definition for req.headers:

interface IncomingHttpHeaders extends NodeJS.Dict<string | string[]> {
  ...other stuff
}

This indicates that any undefined strings fall under the category of undefined, string, or string[].

2: Utilizing req.headers.authorization over req.headers.Authorization based on HTTP specifications

HTTP headers are case-insensitive according to the spec. Express and related frameworks typically handle lowercase conversion automatically, making req.headers.authorization the preferred choice.

Bonus

When using apollo-server-lambda, where capitalization is retained, opt for event.headers.Authorization. This flexibility accommodates differences across ApolloServer implementations by allowing for handling of undefined | string | string[] types.

Unrelated Tip on Semantics

const token: string | undefined | string[] = req.headers.authorization || req.headers.Authorization

Note that technically, naming the variable token may not align with the standard format of the Authorization header (

Authorization: <type> <credentials>

). Consider parsing out the specific "token" part if needed, typically located after the word Bearer .

Answer 2

1: The disparity in data types between req.headers.authorization and req.headers.Authorization

To uncover the reason behind this distinction, refer to the TypeScript definitions for node's http library found here.

The definition for req.headers.authorization is:

'authorization'?: string;

Being optional allows it to be undefined, otherwise, it's a string.

On the other hand, req.headers.Authorization does not have a specific definition listed, requiring reference to the type definition for req.headers:

interface IncomingHttpHeaders extends NodeJS.Dict<string | string[]> {
  ...other stuff
}

This indicates that any undefined strings fall under the category of undefined, string, or string[].

2: Utilizing req.headers.authorization over req.headers.Authorization based on HTTP specifications

HTTP headers are case-insensitive according to the spec. Express and related frameworks typically handle lowercase conversion automatically, making req.headers.authorization the preferred choice.

Bonus

When using apollo-server-lambda, where capitalization is retained, opt for event.headers.Authorization. This flexibility accommodates differences across ApolloServer implementations by allowing for handling of undefined | string | string[] types.

Unrelated Tip on Semantics

const token: string | undefined | string[] = req.headers.authorization || req.headers.Authorization

Note that technically, naming the variable token may not align with the standard format of the Authorization header (

Authorization: <type> <credentials>

). Consider parsing out the specific "token" part if needed, typically located after the word Bearer .

Implementing Typescript for HTTP header typing

Answer №1

1: The disparity in data types between req.headers.authorization and req.headers.Authorization

2: Utilizing req.headers.authorization over req.headers.Authorization based on HTTP specifications

Bonus

Unrelated Tip on Semantics

Similar questions

Showing container element only if certain condition is met but display the children in Angular 2+

Sending multiple POST requests at the same time, but not sending any if one of them fails

Refreshing a Variable's Value in NODE.JS

What is the best way to insert CSS code into a custom Vue directive file?

Is there a way to expand the color options of mui using Typescript?

Every time I click on a single button, all the text inputs get updated simultaneously

What is the process for displaying a webpage using Node.JS and hogan-express?

Utilize Jest to import HTML as a string for testing purposes

Having trouble configuring a basic express server to host a static JavaScript file

When in production, Express and NextJS do not allow origin for CORS

The React-widgets DateTimePicker is malfunctioning and displaying an error stating that it cannot assign to the type of 'Readonly<DateTimePickerProps>'

Attempting to use checkboxes and the useState hook to filter an array, the checkbox loses its checked status

The findAll method is being provided with a response that includes [{'primaryKey':null}] by Sequelize

Expo + tRPC: Oops! Looks like the application context couldn't be retrieved. Don't forget to wrap your App inside the `withTRPC` HoC for

The response body contains the right number of objects in the array, however, they are all blank

Retrieve data from an API using parameters

The key is not applicable for indexing the type as expected

When we mention TypeScript and CDK, we are actually talking about the very foundation

Can a number value in a JSON object be converted to a string?

To access the value of a DOM input in an Angular component, utilize the "renderer/renderer2" method