Firebase verify post dimensions before uploading - reactjs

I have a Cropper component on my client side (React Native app) which lets the user to crop an image before posting it to my Firebase database. But, what about hackers? I think that if someone gets the apk and see the code, maybe will modify my Cropper and rebuild the app, breaking my bussiness rules.
So, what I want to know is if there is a mechanism to check the dimensions of a picture on the backend (firebase) and decide to post the photo or return an error message to the client.
Thank you.

You can save the images through a Cloud Function or Firebase Function and check it there. It is not necessary that the Function is from Firebase.
The image will be uploaded as the body in the http request, then, you load that image and check its size using a frame work https://www.npmjs.com/package/image-size. If the checks are passed, you can store it where it was supposed.

Related

I want to make a User to User Private Live Chat App with React & Django

I'm really confused about that. I want to make a user to user chat app on my project with Django and React. I've tried create a model and fetch messages with Rest Framework API. But that's not what i need.
I need to live chat between just two users. When a user send a message to me i want to display that instantly (without click anywhere) like Whatsapp. When i try this with DRF i can get messages and save them inside to useState. But i must to refresh page for display new messages. I don't want to this. I don't want to refresh to page.
How can i do that? I saw Django Channel but i don't know can i use this for just between two user's private messaging. Also i don't know how to set this on React JS.
Can anyone help me? I just need your opinions. I can try your opinion. You don't have to write code for me.
You have to use web sockets if you want to display data live.
So, for example, someone sent a message to the server and the server instantly send it to the socket target.
Here is the simple chat application wrote with socketio, you just have to follow it step by step https://socket.io/get-started/chat

Open React Component into Personal Tab

I created a custom team app, this app is split into 2 parts, one is a personal tab and the other is a messaging extension.
How can I open a React component of my app from a messaging extension Adaptive Card action?
I tried Action.OpenUrl but I have to pass some data from the messaging to the personal card and inside it retrieve the authentication token with the received data and it works but is not strongly authenticated by the browser.
With the link everyone can open and view the item and that's not what I have to do.
I thought about using Action.Submit and passing some data (token or data to get it) into it,
but I don't know how to retrieve the data passed from sending the messages and then pass them to the personal card with http post (if possible) or how to pass the token to the tab.
I think this flow is safer. Can someone help me?
Currently Teams does not support passing parameters without using query parameters.
Could you please raise a user voice.

How to pass query string from Shopify to an embedded app?

I'm building a Shopify app with Next.js and I need to grab the query string so I can check in getServerSideProps the identity of the merchant (bear in mind that Cookies are not recommended for Shopify apps)
When visiting some apps I noticed some of them are getting the query string passed down from Shopify in each request.
This image shows how it should look on each request
This image shows how my app behaves
In this image you can see that when you hover the routes no query strings are present, meaning that are passed somehow by the parent app.
As of right now I'm using a Cookie to pass the shopOrigin but I feel like it's not necessary if somehow I'm able to get the query string in each request, also with the HMAC I will be able to verify that the requests are coming from Shopify.
Any calls to your App originating from Shopify properly provide the shop parameter when they make requests. In your own App calls to itself, you would also likely be using the shop name as a query string value.
Note that you are still able to validate your sessions internally using a cookie, you just don't do it via the third-party route, outside the iframe, like we used to. Shopify has plenty of documentation on how to properly authenticate, and construct Apps, check them out. They even give you a working Node App to play with, so you can ensure you get it right.
The solution was pretty straightforward.
Shopify provides a TitleBar AppBridge component that you can use to to handle the App's navigation. What it does is that on each route change it reloads the iframe and the hmac, shop, code and timestamp are coming in the request. It's a tad slower then client side routing but it works as expected.
In order to use it you just need to go to:
Partner's dashboard / Your App / Extensions / Embedded App (click Manage) / Navigation (click Configure) and add navigation links, then you just need to import TitleBar from app-bridge-react and put it in index.js

React Native app to load data on startup for offline

I want to build an app that would load all the data on first startup so app can be used offline. I also want to refresh the data periodically.
Does anyone have any experience designing that kind of application? I thought of using Firebase/AWS appsync but they don't load the data on startup. They cache the data once you load the page.
The data i have is from wordpress custom posts as well as some documents, images etc. How can I create a functionality to load the data on startup and keep it sync with the server.
Any link to example opensource/github/npm project would be helpful.
Thanks.
You could use that pattern,
start by loading your content using a hook, display a loading screen. Once content has loaded, just display the app.
Therefore you can rely on some cache, this is working pretty well with apollo client JS or things like https://github.com/tannerlinsley/react-query
This article can help your for your app start:
https://medium.com/javascript-in-plain-english/how-to-handle-and-design-the-startup-of-a-react-application-da779f3727e5

How to export or preview page content `onClick` as pdf/xls in the browser in ReactJs?

What is the best practice to export or preview page content onClick as pdf/xls in the browser?
From my inexperienced understanding, I have to create an action/function that generates a static page content to pdf. Please correct me if I'm wrong and help me with implementation.
Assuming this is not the File-> Print page function, if you are talking about actually generating a file, there are a couple of libraries out there to do that. That problem is not specific to React.
A good JavaScript library to generate pdfs is pdfmake. I have used it in a project, although I used it in a backend Nodejs server. It may also work in the frontend directly. I suggest you try leaving the pdf generation to the backend though, then you need only download the file after making a request with some data from the frontend.

Resources