I'm trying to integrate a MailChimp checkbox opt-in feature on an existing React form. The entire site is a React web application. I've been checking around for solutions for hours, but still can't find anything. Any ideas?
You should use Mailchimp 3.0 API
Create an API key here: https://admin.mailchimp.com/account/api/
Send a POST request to the following endpoint with your user data
Endpoint:
https://<data_center>.api.mailchimp.com/3.0/lists/<list_id>/members/
Structure of data to send:
{
"email_address": "urist.mcvankab#freddiesjokes.com",
"status": "subscribed",
"merge_fields": {
"FNAME": "Urist",
"LNAME": "McVankab"
}
}
You can get the data_center for your Mailchimp account when you enter to your dashboard, in the web browser check the URL. If for example, you have https://us7.admin.mailchimp.com/account/api/ your data_center will be us7.
And to obtain the list_id of the list you want your users to subscribe, check the following link as there are several ways to obtain it: Find your list ID
After that you just have to handle the data for your subscriber into React state and send it on your form submit.
For more details, check Mailchimp API 3.0 documentation here
Related
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/
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 a frontend that I designed in ReactJS on AWS Amplify with my Senior Project team and am looking to bring in data from API Gateway. I have a link I deployed that I tested in Lambda on the AWS console which works correctly. I am looking for some guidance on pulling in the data from that url to the frontend to use for a list. I can supply more information if you would like, please let me know what you need and any tips would be great! Thank you.
Assumption :
As mentioned in your question i assume that you already aware how to create API Gateway,deploy API and now you have API gateway url to access rest API.
Fetch data into react :
Example you have following cruds API
GET /students List all students
GET /students/1 Load a studentsby id
POST /students Create a students
PUT /students Update a students
DELETE /students/1 Delete a students by id
Fetching data:
import { API } from 'aws-amplify';
API.get('students', '/students', {}).then(result => {
this.todos = JSON.parse(result.body);
}).catch(err => {
console.log(err);
})
Security :
You need to secure rest API either use API key or Authorizer
https://github.com/vaquarkhan/aws-amplify-workshop-react
https://www.freecodecamp.org/news/going-serverless-with-react-and-aws-amplify-part-2-creating-and-using-serverless-services-d401ba346eeb/
https://gerard-sans.medium.com/create-a-rest-api-integrated-with-amazon-dynamodb-using-aws-amplify-and-vue-5be746e43c22
I have two separate apps, a Rails only API and a react App. I am trying to authenticate the user with a link in an email (which has a token).
What I have so far is:
1 In the React App, user presses a login with fb button, which logs in with fb.
2 With the fb response, I send a request to Rails API and I save the user in the Rails API database.
3 In the Rails API, after that, I send an email to the user so that he can click a link with the token
4 User clicks the link in the email and Rails API receives this request with the token, and activates user in the database.
Now comes my question. Since it's an api, I can not respond with an html page saying, now you are authenticated, please login again or sth.
What should I do?
1) Is there a way from an API to send the user to a react URL? I mean, that the user goes to a page of my React App
2) Should the Rails API generate the link with token, but based on the React domain, and once the user clicks the link in the email, somehow go to the react app, and not to the rails api, and then from the react app, send the request to the rails api with this token? this way, when Rails Api response, I can navigate with React to another page because I am in the React app
The confirmation of the email looks like this:
resources :users, only: [] do
member do
get :confirm_email
end
end
and the action does this at some point, after having found the user:
def email_activate
self.email_confirmed = true
self.confirm_token = nil
save!(:validate => false)
end
And the link in the email looks like this:
<%= confirm_email_user_url(#user.confirm_token) %>
I don't have any knowledge of rails but here's a generic answer.
I would create a UI for your activation page in your react app. The url could be as follows: myreactapp.com/activate?token=<insert_activation_token_here>.
This path will serve a nice UI. Either on the front-end or back-end of this path (whichever more convenient), you can communicate with your API and pass on the token. The url could be as follows: myapi.com/activate?token=<token_from_react>.
This page could show a success or failure screen or whatever you like after receiving a response from the API.
Edit: This seems like a more architectural and subjective question so there's probably a wide variety of solutions.
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.