How to send Authorization Credentials with JavaScript Fetch API?

Sending Credentials with the Fetch API

To send authorization credentials using the Fetch API in JavaScript, you need to allow the credentials to be sent to the server by adding the «credential: 'include'» parameter when calling the fetch() method. Default Fetch API requests do not contain user credentials such as cookies and HTTP authentication headers. This is done for security reasons because user authentication data allows JavaScript to act on behalf of the user and obtain private information. If you want to send credentials only to the original domain, use the «credentials: 'same-origin'» parameter. To prevent the browser from sending credentials at all, use the «credentials: 'omit'» option. In this JavaScript Fetch API with Credentials example, we send a request with «credential: 'include'» parameter to the ReqBin echo URL using the fetch() method. Click Execute to run the JavaScript Fetch API with Credentials example online and see the result.

Updated: Jan 30, 2023 Viewed: 12173 times

Author: ReqBin

What is Fetch API?

The Fetch API introduces the new fetch() method, which allows network requests to be made similarly to the XHR (XMLHttpRequest) method but more powerfully and flexibly. The Fetch API offers better performance than XMLHttpRequest and is easier to integrate with other technologies, such as Service Workers. The primary difference between the Fetch API and XMLHttpRequest is that Fetch uses promises, which allows you to have a cleaner and straightforward API without nested callbacks.

What are Credentials?

The credentials are cookies, authorization headers, and TLS client certificates that clients acquire from services or users for future authentication. The credentials used in authentication are digital documents that provide evidence of a user's identity, such as a certificate or password.

JavaScript Fetch with Credentials Examples

The following are examples of using the fetch() method with credentials in JavaScript:

Sending Credentials using the Fetch

To send a credential to the server, you must explicitly set the «credential: 'include'» parameter when calling the fetch() method. This will tell the browser to send credentials for both: same-origin and cross-origin calls. The following is an example of sending credentials using fetch() in JavaScript:

Sending Credentials with Fetch API Example

fetch('https://reqbin.com/echo', {
  credentials: 'include'
})
   .then(resp => resp.text())
   .then(txt => console.log(txt))

If the server rightly processes the request with credentials, it will send two CORS headers in response: "Access-Control-Allow-Credentials: true" and "Access-Control-Allow-Origin: https://reqbin.com".

Server Response to Fetch API Request with Credentials

HTTP/1.1 200 OK
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://reqbin.com
Content-Type: text/html
Content-Length: 1000

Sending Credentials to Source Domain using the Fetch

To send credentials only to the origin domain (the URL is in the same origin as the calling script), you need to use the «credentials: 'same-origin'» parameter. The following is an example of sending credentials to the origin domain using fetch() in JavaScript:

Sending Credentials to Source Origin with Fetch API Example

fetch('https://reqbin.com/echo', {
  credentials: 'same-origin'
})
   .then(resp => resp.text())
   .then(txt => console.log(txt))

How to prevent the browser from sending credentials?

To prevent the browser from sending and receiving credentials, use the «credentials: 'omit» parameter when calling the fetch() method:

Prevent Browser from Sending Credentials with Fetch API

fetch('https://reqbin.com/echo', {
  credentials: 'omit'
})