I'm using Django on my backend and React on my frontend. I want to consume the OpenWeatherMap API. For security reasons, I want to keep my API key on the backend. Currently, I have this working on my Django app. When a POST request is made, the Django view renders the information required from OpenWeatherMap. How can the user type the query in React, send the query to to the backend and get the results on the frontend?
I have a very hacky way of doing this currently:
I POST (using axios) the city that the user enters in React to a REST API that I built in Django.
The backend queries the OpenWeatherMap API with the city that the user enters and POSTs the data that it gets from OpenWeatherMaps back to my API.
After this, the frontend uses a GET request on my API to show the information to the user.
I'm pretty sure this isn't the correct way to do this but I couldn't find any other questions on this, and I'm pretty new to web development.
First two steps are just fine. Instead of step 3. return the response from OpenWeather as a response to POST request from step 1. and resolve it in your React code.
On the second thought and to be fine with REST guidelines:
use GET to call your API with user's provided city name (POST is usually called to create a new resource - it's just a convention)
inside your API call OpenWeatherMap API with the city name
return the result to your React app as a response to GET from point 1.
More on REST API guidelines: https://restfulapi.net/
Related
I'm a newbie with authentication! I'm building a web app where users can log in, and the data shown in the web app is different for each user. I'm using Reactjs as my frontend with Firebase authentication. After a user logs into my web app, I'm storing their user ID (UID) and other information into Firestore. I have a collection usersCollection where each document is labelled with the UID. For the backend, I'm using Flask as mostly a REST API with a Postgres database, but I am not storing user credentials there (UID, password, etc.).
For some of my backend functions I need to change the output based on which user is signed in, but I'm not sure how to retrieve the current user's UID. I'm able to make an axios request to send the current user's UID from the frontend to the backend, so I've tried 2 methods with that:
Saving the axios request output as a global variable - this has led to Flask errors like runtimeerror: working outside of application context. and I don't think this is the best solution.
With each GET request that the frontend is making to the backend (every time there's a function whose output changes based on user), I am passing the UID as a parameter, which causes latency problems.
What is the simplest way for me to request the current UID from Firestore from the backend?
Is structuring our frontend, backend, database, and authentication like this recommended? Or is there a simpler way or better system for our situation (JWT?)? We selected Firebase authentication in the first place because we are using a React MUI template that already set up Firebase for us.
Thank you in advance! Happy to provide more information if needed!
I don't know reactjs, but I have the same setup with flutter (iOS / Android apps).
What I did and what worked out well is:
authenticate your client against firebase (which it looks you already achieved)
extract the idToken from the firebase response
send the idToken to your flask backend, which verifies the id token (see below)
in flask backend, log in the user with login_user() from flask_login. This creates a cookie session which is sent back to the client in the response headers
the reactjs client stores the cookie and needs to attach it to every subsequent API request to flask (this might come out of the box for reactjs, but for flutter I needed some custom code for that)
As for the token validation you can…
use the python sdk
use a jwt library such as pyjwt, see documentation
There is flask-firebase which does a good job for the token validation. I wrote a blog post which gives an example how you would use this.
I have an api method on the backend that confirms the user email (POST request), how can I consume this api with react-admin? I am new to the framework and all I see is consuming CRUD operations(create, list, update and delete).
Nothing stops you from accessing your API with fetch from your own component. If you want you can use some helpers the react-admin team has provided as fetchUtils.
Already shown how here under the EDIT 2 part.
I am struggling to fully wrap my head around the flow for Signin with apple - trying to implement it on a React frontend /PHP backend app.
What I find confusing here is that the redirect_uri directly makes a post call to an endpoint in my back end. From there, how do I process that data and then in turn regain control on the react side once it's complete?
Sorry, I know nothing about React, but I've just dealt a lot with Apple Sign In. From what I understand, the flow should do the following:
Front End => Apple (redirect users to login with Apple)
Apple takes user input, logs them in
Apple => your backend (sends a POST to your server, where you do stuff like verifying id_token, exchanging authorization_code for refresh_token, saving refresh token and e-mail address)
Your backend => Apple (I'm assuming you return a response to Apple)
Apple => Front End (Apple returns your response to your front end)
The issue I've found with Apple is they're returning a POST request (if you add scope to your Apple request). If you're using an SPA (React) the server running React won't accept POST requests so if your callback URL is to your React frontend this will fail.
I think there are two ways to get around this:
Point the callback URL to a web hook on your server which will do a HTTP redirect to your React URL (and just include the auth_code and id_token in the query params)
Intercept the Apple POST request before it gets returned by setting the usePopup to true (this library is a good example: https://github.com/patelmayankce/react-apple-login#readme)
I have a working rails RESTful api-only app.
I use Postman to consume that api. Now, to use the api the user have to login to http://localhost:3002/authenticate first by setting content-type to application-json in Header then Email and Password's value in body. After sending the POST request to the server I get auth-token as a json response. Then after successful login I have to pass that auth-token as a Authorization key in each GET request to get respective data.
Now, I want to build a UI for that back-end api as I learn React js. But till now all tutorials I could find was how to send GET requests without any authorization factor. And they are using axios, redux etc.
Can any-one please guide me on where should I start or how to
approach this problem?
Do I necessarily have to use a third-party library for this purpose?
If so which will be better axios or redux??
Any beginner friendly tutorial link would be of tremendous help
How start
Securing React Redux Apps With JWT Tokens - Rajaraodv explains how you get a jwt token and how to keep it in the front end app. I think this way will fits for you.
Keep the auth-token
Rajaraodv uses localStorage to keep the jwt token, you can use the same or keep directly in redux store, it's your choice, the best manner that fits you.
Ajax call
You can use Axios to make Ajax calls, or use fetchApi from the browser as Rajaraodv did, it's up to you.
Explains
"If so which will be better axios or redux??" these two libraries are totally different, each with it's own purpose.
I have have trying to communicate to third party application from react app. Whenever user tries to browse say : http://somesite.com/ , user is redirected to http://authenticationsite.com/ . This application then responds back with POST data in first site if the user is successfully authenticated. I have routes for handling get request. How can I possibly handle POST request from third party apps which contains information like token in the react app?
You basically want to implement sort of token based authentication?
When you load your app (or a component within your app), make a POST request to the authorization website using some ajax library, like axios, fetch or jquery ajax. Depending on the response from the 3rd party server, save the token somewhere (localStorage for example) and proceed with the rest of the flow.
Hope this helps! If you have any questions, or I misunderstood your question, please let me know, and we will proceed from there.