I have a widget which users integrate on their website and the request from the widget comes to our nodeJS backend. I want to implement auth mechanism so that I will verify those requests and then only process it.
PS - JWT token will not be helpful as anyone can check network tab and send requests using Postman or any API client
Related
I have built my frontend on React JS and Backend on Fast API (Python). I do a google oAuth login after which I lazy load the pages on the browser. What I am concerned about is that once someone succeeds google oAuth then they can perform other operations and inspect the requests to see how the backend API is working. (I am parsing an APIKey into the Authorization header of the request body).
My concern is that if someone logs in through google oAuth and inspects the networking tab:
They can view all the content and then be able to make API calls on their own and do any malicious operations. Is there a way to encrypt the Authorization header so that the user could not get access to my backend API?
I don't quite understand the workflow of Third-Party Authentication.
I am trying to create an SPA application with back-end on express and front-end on React.
The application should handle webhooks from GitHub API.
I've managed to authenticate the user on my back-end but how do i send the access_token to the front end? (So i can do ajax on front-end).
GitHub allows to send ajax requests with token bearer.
Example:
curl -H "Authorization: token OAUTH-TOKEN" https://api.github.com/user
Do i send the JWT token instead to the front-end via query string? But then what do i do?
You can add an endpoint to your web back end such as GET /token. However, this would need to be protected via an authentication cookie that your web back end issues.
If you are building an SPA then an alternative option (which I prefer) is to be entirely cookieless. This is done via the following steps:
Implement authentication via the oidc-client library
After login the browser will receive an access token and can send it to GitHub
Use Express only to serve web static content
If interested in this approach, have a look at these resources of mine:
SPA and API Code Sample
Blog Post
React SPA Code Sample
I've been studying the OAuth 2.0 authorization code flow and am trying to write a React application with an Express backend that displays what a user would see on their own Instagram profile. I'm trying to do so with minimal external libraries (i.e. not using passport-js) and without bringing a database into the mix.
This is my flow as of now:
Resource owner clicks an <a> tag on the React application (port 3000) which redirects them to the /auth/instagram endpoint of my Express server (port 8000)
res.redirect(AUTHORIZATON_URL) sends them to Instagram's authorization server
Resource owner consents and the authorization code is sent back to the predefined redirect-url /auth/instagram/callback with the authorization code set as a query parameter
I strip the authorization code off the url and make a POST request to https://api.instagram.com/oauth/access_token to grab the access token
Now that I have the access token, how do I reach out to the React frontend to let them know that everything worked and that the user was successfully authenticated?
From what I've read, this is where the idea of sessions and cookies come into play, but I haven't had luck finding documentation on how to achieve what I want without bringing in third party libraries.
In the end, I would like for my app to support multiple users viewing their profiles simultaneously. Since I imagine passing the access token to the frontend defeats the purpose of securely retrieving it on the backend, I'm guessing I will somehow need to pass a session id between the frontend and backend that is somehow linked to an access token.
Any ideas as to what my next steps should be are greatly appreciated, as well as any articles or documentation you see fit. Thanks!
Since you're doing the OAuth authentication on the server side, you have to pass some parameter to the redirect_uri, identifying the user session (see: Adding a query parameter to the Instagram auth redirect_uri doesn't work? );
When the redirect uri is called from the authority server, you will know which user was authorized. To notify the browser there are two options: 1) Notify the client using web sockets; 2) Pull the state from the client using a timer triggered function;
Currently we are looking to develop oauth authentication for my API.
So basically our UI will be in reactjs which will show TV Grid schedule using nodejs API At backend which will return JSON. We will handle UI changes via ajax.
On ajax or on page load we will call API to display TV Grid.
So we want to secure API using oauth.
Lets say I have passed APP ID & client secret key and received the "auth_token" with callback URL and everything (like fb, google has it)
that will stored on localstorage or cookies.
If attackers get access to that token and he can call API get access to data.
How can I avoid data theft?
Is there something I am missing in oauth? please let me know.
I'm trying to authenticate with a third party API using OAuth 2 via a NodeJS + Express REST api. We're doing this through a ReactJS webapp
The current flow is that we send a request to our Express API from the front-end with the Fetch API, with a username as parameter
This request builds an authUrl object containing a redirect_url and then responds with
return res.redirect(authUrl);
When we initiate this endpoint straight from the browser, we get redirected to the Third Party API, and after authenticating a user is successfully created.
But the problem lies when we try to send a request to this endpoint from the front-end.
We added CORS headers to our Express app so we can reach this endpoint, but it still gave us the following error:
Fetch API cannot load OUR ENDPOINT. Redirect from 'OUR ENDPOINT' to 'THIRD PARTY API' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect.
When we just do a res.json(authUrl) instead of res.redirect(authUrl) we retrieve a proper response containing the URL. But redirecting doesn't seem to work.
We experimented a bit with different headers but can't seem to find a suitable solution.
So we were wondering does res.redirect() handle requests differently? Are we implementing the OAuth flow properly? Do we need specific headers?
Any help would be welcome!
Summary of our flow:
Browser receives request for front-end
User enters his name and clicks the signup button
Our Rest API receives the request and builds an authentication url
Rest API sends a response that redirects the browser to the authurl.
After successful authentication, third party sends a confirmation to the callback endpoint of our Rest API.
With the confirmation, the Rest API then sends another request to the third Party API.
Rest API sends a response back to ReactJS app with the token.