We Keep Coding

Using GitHub's REST API to list public repos from my external site deletes my token

I am trying to list my GitHub public repos on my public website using their REST API. I have been creating personal tokens so far. In localhost it works.
When I do the request from my site it responds a 401 and it deletes my token.
To get the repos I am doing this simple request:
async function loadRepositories() {
const token = 'my_token';
const response = await fetch("https://api.github.com/users/tauromachian/repos",
{
method: "GET",
headers: {
Authorization: `Bearer ${token}`,
},
}
);
const repositories = await response.json();
return repositories;
},
How can I get this done?

Github is trying to protect you from someone stealing your identity here. There are ways to detect if a HTTP request is sent from the browser or a server (it's not 100% reliable though).
As you make the request from the browser which is a public client, meaning everyone can read the code and hence secrets you use within the code you are exposing your Personal Access Token (PAT). This PAT identifies you against Github, therefore if someone else could get hold of it, they can impersonate you and e.g. delete repos, steal code etc. (if the token has the correct scopes).
As Github wants to prevent that from happening, they delete tokens which are publicly exposed (they know it's exposed as the the request comes from a browser). Therefore attacks like that are not possible anymore.
To make your website work however you can simply make the request from your server as you can securely store secrets on the server-side and call the endpoint of your server from your website. Once you do that, Github won't delete the token, your token is save and you can display the data on the website.

List pods in a GKE cluster using REST api from the browser

Suppose I want to do operations on Kubernetes objects from a client-side web app.
The app logs the user into Google using OAuth2 and obtains cloud-platform auth scope.
Now the app can call Google Cloud APIs such as GKE APIs.
The app can now enumerate the GKE clusters: https://cloud.google.com/kubernetes-engine/docs/reference/rest/v1/projects.locations.clusters/list
What I do not understand is how to call Kubernetes APIs now. I need to connect to master, authenticate and use Kubernetes' REST APIs.
So, I have the following questions:
How do I connect to the master? How do I get the address?
How do I authenticate with the master?
I've researched and I think I can get the master endpoint by calling the https://container.googleapis.com/v1/projects/XXX/locations/us-central1-a/clusters API and taking the endpoint attribute. The master authorization information seems to be in masterAuth. I need the token thought...
I've tried to connect to the master with the known-good token, but the browser's fetch function rejects my request with ERR_CERT_AUTHORITY_INVALID.
// Error: net::ERR_CERT_AUTHORITY_INVALID
const response = await fetch(
"https://IP/api/v1/pods/",
{
headers: new Headers({
"Authorization": "Bearer <token>",
"Content-Type": "application/json; charset=utf-8"
}),
}
);
I'm able to get the Certificate Authority information from the MasterAuth, but I do not know how to use it to make an HTTP GET call.
So, my most pressing part of the question is: Given the master endpoint API and MasterAuth (clusterCaCertificate and clientCertificate), how can I call the Kubernetes API from the browser.

Correct way to store this token

I'm writing my first flask app and using the spotify api. I want to pass the access token from this api into java script like so
var token = "{{ token }}";
fetch('https://api.spotify.com/v1/me/player/currently-
playing', {
headers: {
'Authorization': `Bearer ${token}`
}
I'm doing this outside the flask app so I can frequently update the json data to the webpage easier. This method doesn't seem secure so I was wondering what is the perferred method in a situation like this.

Since your example is almost literally straight out of the Spotify Authorization Documentation and it is in relation to accessing the Web API, you're good.
If you were auth'ing on behalf of a user for more serious actions then you wouldn't be making client side requests.
Since the token you're using can be revoked and does in fact expire, you can store it in your db in plaintext.

You can store keys/secrets using Microsoft's Azure Software. Once you register you'll have access to those resources. You can set the secret in the secrets file in your azure portal and reference the secrets from there in your application source code.

Vimeo API GET request in javascript

I'm trying to get information about videos hosted by Vimeo (from my client's channel, so no rights issues). I'm using Javascript, specifically d3.js.
The request works fine when using the old API, with this type of url :
http://vimeo.com/api/v2/video/video_id.output
For instance, this works in d3.js :
d3.json("http://vimeo.com/api/v2/video/123456789.json", function(error,data){
console.log(data);
}):
But I can't get the new API to work as easily in a simple request, using this type of url for instance :
https://api.vimeo.com/videos?links=https://vimeo.com/123456789
What do I need to do ? Authenticate ? If so, how ? I'd be grateful to get examples in either jQuery of d3.

Vimeo's API documentation is not the best, so you have to dig a little around to actually get the information you need. In your case, you do not need to go through the whole OAuth2 loop if you are simply requesting data from endpoints that do not require user authentication, such as retrieving metadata of videos, as per your use case.
First, you will need to create a new app, by going to https://developer.vimeo.com/apps:
You can simply generate a Personal access token from your Vimeo app page under the section that says Generate an Access Token:
Remember that this token will only be visible once (so copy it when it is generated): and you have to keep it secure! The access token should be part of the Authorization header's bearer token. If you are using cURL, it will look like this:
curl -H "Authorization: Bearer <YourPersonalAccessToken>" https://api.vimeo.com/videos/123456789
Therefore, while you can do the following on your page to retrieve video metadata on the clientside, note that you are actually exposing your private token to the world:
d3.json("https://api.vimeo.com/videos/123456789/")
.header("Authorization", "Bearer <YourPersonalAccessToken>")
.get(function(error, data) {
console.log(data);
});
However, I strongly recommend that you proxy this request through your own server, i.e. create a custom endpoint on your server, say /getVimeoVideoMetadata. This API endpoint will receive the video ID, and will add the secretly stored access token you have on your server before making the request. This will mask your access token from your website visitors.

Google OAuth2 - Exchange Access Code For Token - not working

I am currently in the process of implementing a server-side OAuth2 flow in order to authorize my application.
The JS application will be displaying YouTube Analytics data on behalf of a registered CMS account to an end user (who own's a channel partnered with the CMS account). As a result of this, the authorization stage needs to be completely hidden from the user. I am attempting to authorize once, then use the 'permanent' authorization code to retrieve access tokens as and when they're needed.
I am able to successfully authorize, and retrieve an access code. The problem begins when i attempt to exchange the access code for a token.
The HTTP POST Request to achieve this needs to look like this...
POST /o/oauth2/token HTTP/1.1
Host: accounts.google.com
Content-Type: application/x-www-form-urlencoded
code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
client_id=8819981768.apps.googleusercontent.com&
client_secret={client_secret}&
redirect_uri=https://oauth2-login-demo.appspot.com/code&
grant_type=authorization_code
I am using this code to achieve this:
var myPOSTRequest = new XMLHttpRequest();
myPOSTRequest.open('POST', 'https://accounts.google.com/o/oauth2/token', true);
myPOSTRequest.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
myPOSTRequest.send('code=' + myAuthCode + '&redirect_uri=http%3A%2F%2Flocalhost%2FCMSAuth3.html&client_id=626544306690-kn5m3vu0dcgb17au6m6pmr4giluf1cle.apps.googleusercontent.com&scope=&client_secret={my_client_secret}&grant_type=authorization_code');
I can successfully get a 200 OK response to this Request however no access token is returned, and myPOSTRequest.responseText returns an empty string.
I have played with Google's OAuth Playground - and can successfully get a token using my own credentials.
Am i missing something here?

You cannot do this, because there is the same origin policy. This is a security concept of modern browsers, which prevents javascript to get responses from another origin, than your site. This is an important concept, because it gives you the ability, to protect you against CSRF. So don't use the code authorization flow, use instead the token authorization flow.

Try and build up the full URL. Then dump it in a webbrowser. If its corect you will get the json back. You have the corect format.
https://accounts.google.com/o/oauth2/token?code=<myAuthCode>&redirect_uri=<FromGoogleAPIS>&client_id=<clientID>&client_secret={my_client_secret}&grant_type=authorization_code
Other things to check:
Make sure that you are using the same redirect_uri that is set up in google apis.
How are you getting the Authcode back? If you are riping it from the title of the page i have had issues with it not returning the full authcode in the title try checking the body of the page. This doesnt happen all the time. I just ocationally.