Sveltekit how to call an api with a token - api

I currently have an API running on Nodejs Express where you can get or upload all types of files (images, videos...) as well as simple json responses.
I would like to connect Sveltekit to this API but it is secured with a SSO so I need to provide an access token for each request.
I already get the access token from the SSO (oidc) on sveltekit.
Solution 1:
a service workers intercept requests to the API and add the access token.
Problems: I don't want to build every time but as the documentation says: service workers only work in the production build, not in development
Solution 2:
send requests to the svletekit backend and then pipe them to the API with the access token
Problems: Works only for basic requests but not for stream, it seems that it is supported recently (https://github.com/sveltejs/kit/issues/5344) but there is no documentation or example and this solution requires more resources (requests should be from the browser to the api)
Solution 3:
Hooks externalFetch
This function allows you to modify (or replace) a fetch request for an external resource that happens inside a load function that runs on the server (or during pre-rendering).
Problems: It doesn't work for requests like the src of an image
Any idea ?
edit: Solution, with the new version of sveltekit node-fetch has been replaced by Undici and the streams are functional, so it is possible to pipe requests from the backend.
For the dev it work well but it's not the best solution for production so you can use both depending on the environnement.

Related

allow request from the code of one website only

I am building a private API which provides some data, I have already set CORS to only allow requests from my website, and that works, but there is a problem: a user can make the request with the chrome console from my website to the API and that request will succeed since the API has no real way to tell if the request comes from the code i have written.
So my question is: is there any way to tell that? is there any way to prevent users from making that request from my website to call the API and bypass the CORS?
You need to update your request model so that requests to the API come from the web server itself, rather than from a users client.
That way you can add authentication to the API and only allow requests that come directly from your web server. Then web server can then display those results to your users.
CORS is not a method for checking/enforcing authentication or authorisation. It is purely an additional security control to protect against browser-based security vulnerabilities (XSS etc).

Nextjs centralized authorization

I'm building an app where I need to authorize the users based on 'mode' queryParameter & apikey that comes from the consuming applications.
It will then send an api request to backend and confirm if the user has the authorization. Also want to ensure that apikey is not exposed to outside.
Just wondering how am I going to approach this in Next.js?
I was thinking to build a local api and fetch the backend response and then call the local api from the pages. Because this has to happen in the _app.js (centralized), where getServerSideProps is not permitted, I'm bit confused on my approch.
Really appreciate your feedback
Next.js is used to build client-side app. General rule of thumb for client-side authentication is "don't authenticate / authorize on client-side".
Applications must place authorization outside client-side code, since it could be arbitrarily modified by any party
source : https://www.staticapps.org/articles/authentication-and-authorization/
So, centralized authentication is out of Next.js scope. It's in the scope of microservices (following Jamstack architecture https://jamstack.org/).

Storing and using personal access tokens in an electron app

I am using electron to build a little desktop app to interact with my laravel backend. Im using laravel sanctum here so I can easily get a personal access token via https and then make authorized api requests with it. The token will be stored using node-keytar (main process). I am also using vue.js on the frontend of the electron app.
Now my question is: Do I need to make all authorized api requests in the main process and send the received response via ipc to the renderer process? Or is it safe to make authorized requests (with the personal access token as Bearer token) in the renderer process? Because on the one hand I ve read that as much as possible should be done in the renderer process to ensure performance. But on the other hand I don't know if the token could be intercepted somehow and I can't find much information on this.
Can someone help Thanks in advance!
It is pretty standard for a native client to send tokens directly from the UI to APIs - that is how non Javascript desktop apps would work - eg if coded in Java or C#.
Of course, for an Electron app node integration should be disabled in the renderer process, so the privileged code to use keytar has to run in the main process.
SOMETHING TO COMPARE AGAINST
There is a sample of mine here that uses OAuth for desktop apps with Electron, and keytar for token storage. I call APIs directly when getting data for views, and need to call from the renderer to the main process to deal with token storage.

How to authenticate calls to a plumber API from an app hosted on shinyapps.io?

I want to build an app with the following architecture:
The frontend would be deployed on shinyapps.io and would make call to an API written with plumber to interact with data.
The app would be private so a user would have to authenticate with the shinyapps.io auth module. The API would be hosted on a cloud platform.
I would like to know if it is safe to authenticate calls to the API by adding a secret key to the header on all HTTP requests.
The secret key would be defined in a .Renviron file deployed on Shinyapps.io and also on the API server.
This plumber filter should ensure that the secret key from the front and from the API match before sending the appropriate response.
Define safe? It is going to work for sure. If it is exposed to the public web, assume nothing is safe.
The filter you mentionned is there specifically for this use case. But it is still not safe against DDOS attacks.
Good luck.

obtain a Google OAuth 2.0 Bearer token from a client and secret [duplicate]

This question already has answers here:
How do I authorise an app (web or installed) without user intervention?
(2 answers)
Closed 5 years ago.
I have a client id and client secret for my Google Container Engine app obtained via Credentials and I just want to do some local testing of the JSON API endpoints.
How can I convert this into a Bearer token so that I can just get some work done? Is there a Google page where I provide these things and get a token that I can use in my app?
I don't want to have to write an entire OAuth handling mechanism at this point in time (which would use the flow described in oauthplayground). It's an app to be run only for my account, in headless mode, on a trusted machine, to manage my cluster.
NOTE: must not require any proprietary software installations (e.g. the Google SDK).
Google provides an API Client Library for Java, which itself depends on an OAuth client library.
For the project of 9Cards launcher for Android, within the back-end, we had to use this library to fetch applications usage statistics from Google Analytics. In our code, because it is a case of "server to server" authentication, we use a Service Account's credentials. The code issues a request from Google a short-lived OAuth2 Auth Token. The library may provide similar features if you use a Client-ID and Client-Secret.
Regarding the issue of licenses, the library is published under Apache License v2, so in that regard it is not too proprietary.
I have a client id and client secret for my Google Container Engine app obtained via Credentials and I just want to do some local testing of the JSON API endpoints.
Good start. I guess by "the JSON API endpoints" you mean the Google APIS. Make sure you created OAuth Client IDs and not one of the other options.
How can I convert this into a Bearer token so that I can just get some work done? Is there a Google page where I provide these things and get a token that I can use in my app?
Yes the OAuth Playground will do that for you. The detailed steps and sample code to consume the token is at How do I authorise an app (web or installed) without user intervention? (canonical ?)
I don't want to have to write an entire OAuth handling mechanism at this point in time (which would use the flow described in oauthplayground).
Follow the steps linked to above and you will see that you don't need to write any code at all. Once you have the refresh token (a one time procedure), you're all set. I exaggerate slightly, you do need one line of code to post the refresh token to the Google Oauth endpoint to fetch an access token. See the bottom of the linked answer for an example. Or you could just compose a curl to do it from the command line and put the Access Token into an environment variable.
I just wanted to avoid the whole thing and get a code printed on the screen
A bit like https://youtu.be/hfWe1gPCnzc?t=198