Is it a cause for concern that SWR reveals client-id and Bearer tokens with each API call?

After building an application using NextJs, NextAuth, and SWR, I encountered a concern. I utilize SWR to call multiple Twitch APIs, authenticating with my Twitch applications Client-Id and the user's Bearer token from the NextAuth session object.

The issue arises when SWR interacts with the API to update or populate the page data, as the request headers are easily visible in network calls captured by browser dev tools like Chrome or Firefox https://i.sstatic.net/ptYii.png. This poses a significant security risk, especially in a production environment, violating Twitch developers' guidelines which advise against exposing tokens publicly without proper protection.

Is there a way to conceal this sensitive information?

My primary question now is how can I prevent this exposure and if any solutions exist?

Answer №1

There is no need to worry. Including Bearer tokens in the request's Authorization header is perfectly fine - actually, that's how they are typically sent. Trying to conceal it from Chrome's Dev Tools would be counterproductive.

The suggestion you came across to never use access tokens in any public URL could mean refraining from displaying them in a URL like mywebsite.com/?token=[abcd] since this could make them accessible through browser history, or avoiding sending a token intended for one service to a different website.

This advice pertains to standard HTTP behavior and has nothing to do with SWR.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position the Material-UI AppBar and Tab on the far right of the screen

I am trying to achieve a specific layout where the Links for "Homepage Login Settings and etc.." are placed at the right edge of the AppBar, while keeping the "Website" aligned to the left edge of the screen. Here is what I have: https://i.sstatic.net/Wvo ...

Enhance the output of an array by incorporating additional text into the values

I'm diving into the world of Apps Script and I have a task at hand - adding some text to each value in an array. However, the code I currently have simply moves those values to another column: function getData() { var sheet1 = SpreadsheetApp.getAct ...

Having trouble with jQuery not recognizing onclick events on dynamic ids?

I've created a dropdown that generates dynamic IDs when 'add' is clicked, such as option-1, option-2. However, I'm facing issues with implementing an onclick action on these dynamically generated IDs. I require the onclick action to be ...

Redux state not reflecting changes until second click

My redux store has a simple boolean setup to track whether a sidebar is expanded or not. However, I'm encountering an issue where, even though the default value is false, clicking the toggle button outputs false first. Ideally, if it's initially ...

Display the appropriate selection choices based on the knockout condition

In my HTML page, there is a dropdown with certain conditions that determine which options should be rendered in the select element. My attempt at achieving this: <select> <!-- ko if: condition() --> <option value="1">1& ...

I encountered an issue in reactjs where I received the error message: TypeError: this.state.coords.map is not functioning properly

Here is the code snippet I wrote: import React, { Component } from 'react'; class LocationApp extends Component { constructor(props){ super(props) this.state = { coords:[], error:[], } } ...

Incorporate JSON data into an existing array within Angular that already contains JSON data

I have a problem with adding new jsonp data to an existing array while loading more content near the bottom of the page. Instead of appending the new data, it replaces what's already there. function AppCtrl($scope, Portfolio, $log, $timeout, $ionicSl ...

Display HTML components as JSON data using AngularJS

Recently, I started exploring angular js and faced a challenge in formatting json data with the help of angular js. Below is a snippet of my json data: [ {"field_add_link": "<a href=\"/drupal3/drupal3/\">Home</a>"}, {"field ...

Comparing Redux Presentation Components with Container Components

As someone new to React development with Redux, I find myself intrigued by the concepts of Presentational Components and Container Components. How can components be classified as either Presentational or Container? What distinguishes one from the other ...

What is causing this console to output twice?

My Objective: I aim to utilize Node.js to launch two child processes sequentially at a specific time, displaying their `stdout` as it streams, occasionally alternating between the two processes. The Desired Output: `Proc 1 log # 1` `Proc 1 log # 2` `Pr ...

Deciphering Google location data using JavaScript

It appears that this code is not functioning properly for unknown reasons let url = "https://maps.googleapis.com/maps/api/place/search/json?"; url += "location="+lat+","+lng+"&"; url += "radius=500&"; url += "types=&"; url += "name=&"; url ...

Unlock the power of jQuery chaining with the val() method

My selected background color is set to: var _back = "#FF0000"; Why doesn't this code change the input field's background color: $("#input").val( _back ).css("background-color",$(this).val()); But this one does? $("#input").val( _back ) ...

Is there a way for me to bypass adding the label if it already exists in my state, but still include the new value?

I am currently facing an issue with a dropdown select field where I can choose various attribute values. The problem arises when attempting to save the selected data in the state, as the label appears twice and I only require it once. My goal is to exclude ...

Is there a way to delay rendering the html until all the content has been fully downloaded?

Whenever I visit my webpage, I notice that the content starts loading without the animation applied to it. It seems like the CSS hasn't finished downloading yet. To solve this issue, I added a preloading bar overlay to signal that the content is still ...

Strategies for monitoring user login activity in NextAuth to display a button

After exploring, I discovered that Next Auth offers various methods for tracking user authentication. By utilizing useSession (Client-based) Through getServerSession (Server-based) Now, suppose I want to display login and logout buttons based on the user ...

In search of inspiration to create a recipient list similar to Gmail using Vue3?

Recently, I've been trying to create a recipient list similar to that in Gmail using Vue3 but I'm stuck and unable to find helpful resources online. recipient list I have an array of email addresses that I can loop through and display in a div. ...

Parsing JavaScript JSON using PHP's json_decode method is a powerful feature

In my current scenario, I am encountering situations where I extract a JSON string from an HTML page and pass it to the `json_decode` function. Sometimes it succeeds, but other times `json_decode` returns null. How can I enhance my solution to ensure that ...

swapping out the text of a link for mobile viewing

This piece of code is responsible for generating the back and next links on my Wordpress website. function.php " class=""> <?php if ( is_single() ) : // navigation links for single posts ?> <?php next_post_link( '<div class=" ...

How can I integrate vue-cli output into a PHP project?

One benefit of using vue-cli is that it automatically sets up a local server for you. I'm curious, can I utilize the output from vue-cli in a PHP project (such as app.js )? Another question I have is related to the local network - How does it suppo ...

retrieve the value of a specific key from an array

How can I extract key-value pairs from an array in JavaScript where the data is structured like this? jsonData = [ {"dimensions":[5.9,3.9,4.4,3.1,4.8],"icon":0,"curves": [false,false,false,false,false],"id":"p1","color":"0x000000"}, {"dimensio ...