I'm new in the back-end world and I'm trying to create an admin backoffice with React-Admin, except that I have trouble choosing the dataProvider.
I have a MySQL Express API, which I developed locally so I use Simple REST Data Provider, but it doesn't support HTTPS protocol?
I try to put in production my back-office linked to my api in https://___.org but I have "a communication error with the server".
Isn't it not advisable to use http for such sensitive requests? How can I make requests to my API in a secure way while remaining in harmony with React-Admin?
Related
I have been studying OAuth and trying to use OAuth for my web application.
I'm developing web with React and Express hosted by different ports.
Express exports REST APIs and React sends HTTP Requests and receives HTTP Responses using Axios.
I've been searching the example which explains the way to use OAuth, however, most of examples explain the web hosted by one port. I wonder how to use OAuth in this kind of web application. I can't know clearly about the flow until the web gets the AccessToken from Authorization server.
What is the OAuth flow with the web using REST API server on another domain?
There are 2 main parts to this:
Your React app will use Authorization Code Flow (PKCE) to log the user in and get an access token, then make cross domain API calls
Your REST API will need to validate access tokens - either in memory or via introspection
If it helps I have a tutorial and code sample that explains this step by step, including the OAuth messages.
I would start with the above sample, which uses plain Typescript. My blog also has a React sample you can look at, though it is a little more advanced.
I have a react web application with a flask api (I used to use express). The product of this app is the data that it displays. I don't want other people to be able to take that data easily from calling the api.
I want to secure the api such that it can only be accessed by my react app and nothing else. How can I do that?
The only way to truly secure your API is by authenticating your app's user with something like Oauth2 and verify that credential on server-side with something like passport, and make the authorization expire with sessions. AND use SSL so none of that is easily visible through a protocol analyzer.
Sure, you can hard-code some sort of "secret key" with the app, but anyone who want it bad enough will read it off your app or sniff the packets through a packet logger until they find the key.
EDIT: Oh, and as a part of the authorization upon login, provide them with a uniquely generated "API-KEY" as part of identity, so you can validate them upon submission, and if they violate your trust, mark their API key invalid in the server so they can't use them any more.
First, if your client code and API server are running on different domains or ports, configure CORS on your API server to only honor requests that originate from the client code's domain. Second, authenticate legitimate users so that only authorized requests for data are honored. There are lots of 3rd-party libraries to help with authentication.
I understand that React app is only client side application running in the client browser.
However I have the backend with REST API I need to consume, and the API in under mutual TLS (https), so I need client certificate in order to be able to authenticate and get something from the backend.
But the issue is that the React Front End is running locally in the browser so I do not know how it could be possible to securely store certificate and its private key, if it is even possible.
I was trying to google approach and it seems that the React app cannot consume services which require client certificate for authentication, and there should be at least another backend as proxy, which will be handling both parts, with the React client, and the REST API backend. This proxy can be configured with the certificate and private key and user would not have access to it.
But it requires another component as proxy.
I can also put the React app behind proxy like Apache and setup the mutual client certificate based authentication, however this can help me to identify user inside the React app, not to securely establish mutually authenticated channel with the REST API backend.
It seems that WebAuthN could be the way, however it seems to be designed only for authentication, not the SSL/TLS.
What should be the correct approach? Is it possible to do it with React based app, or this technology is not suitable in that case?
I did research on the same topic, the only solution that I found is to store the certificate on the api and request the certificate using AXIOS.
On the api level you need to test from where the request is coming from and only serve the certificate if the request comes from an authorized IP (your front end).
I couldn't find any other solution.
I am building a project with both a web app built with React and Next.js and a native app built with React Native. I am looking for a second opinion on the best practice to handle Authorization for the Spotify API that will work on both platforms.
Option 1: Use the Authorization Code Flow with a proxy server to protect the client secret.
Native app passes authorization code to proxy server on heroku using GET request
Proxy server passes code, redirect_uri, grant_type, client_id, and client_secret to Spotify API
Proxy server passes back access_token, refresh_token, and expires_in to either web app or native app
Option 2: Use the Implicit Grant flow and accept that there is no
refresh_token. I would like to avoid this option if possible because the app will be making many requests and it would be more convenient to operate with a refresh_token.
My main concern is keeping the client_secret safe since my understanding is that React and React Native do not make requests server-side. Is it safe to pass back the access_token and refresh_token for a proxy?
I have developed an AngularJs website, Android & IOS mobile apps. I am using https protocol to make my web service calls more secured. I am using OAuth flow for user authentication process. Once authentication process completed, OAuth token will be sent as a response to client apps.
Anyone can get access to server resources (upload/download user files) using this OAuth token from API response. So the system is not fully secured because it is difficult to check whether the request coming from my app or outside of the app.
If someone found the OAuth access key returned from my service, they can use them to upload/download resources from outside of the app. Server resource should be more secure as it contains more sensitive user records. Please check the below image to understand the workflow. Other programs section refers to custom batch scripts, other client apps, 3rd party tools etc..
How can I restrict my REST web service to send failure response if anyone tries to access it from outside of my app?
Please provide me the way to secure my web service and server resources by resolving these security issues.