So I am quite new to this, and have a tight timeline, so here goes nothing. I am trying to create a login system using express and passport for the backend, and react redux in the front end wrapped into electron. I have the login working for the backend when using postman, but when I am using react the session cookie is not being passed to the frontend, so it is not allowing me to login or stay logged in.
I should add I am also using isomorphic fetch.
So essentially Electron doesn't play nice with cookies by default, so the cookie was being passed to the FrontEnd, but electron wouldn't see it.
There are two ways to solve, one for more up to date versions of Electron and one for other versions.
For newer versions, include this in your main render path. (Not in the one with the browser info).
const {session} = require('electron')
It should allow from there. Otherwise refer to
Where to place electron-cookies?
Have a hack is not and can post later if someone can't get either to work. Thought I would comment so others know.
Related
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
I want to make partially SSR web application and looking for best solution for that. I need SSR for SEO and that will only serve dynamically rendered products pages - this will be handled by NextJS.
Other part of the app is only for logged users and I don't want anybody not logged to accidentally display it (but only users data have to be secure, if anyone access by a hack those restricted pages without any user data that's ok) - for that part I've already implemented React Router with proper redirections and few routes (it's using Redux too).
Whole project was made with create-react-app. Is there a way to easily combine those two functionalities? Do I have to move everything from /src to /pages? Maybe best way would be to serve them independently and just redirect to one or another using Apache configuration?
If anybody wonders about it - currently the best solution would be to use NextJS for all of it, cause Next provides a clean way to handle static pages, CSR and SSR alongside each other.
By the default all pages are static generated or pre-rendered with partial CSR, while using getServerSideProps method allows to handle SSR, without any extra configuration.
I have a React app that is deployed in amazon aws. Whenever i update the code, i need to force hard reload manually on the client side(on Chrome ctrl+f5).
Is there a way to not have to do this manually in React?
I've noticed some posts about setting a query string param with a versioning system, and many solutions for angular CLI, but nothing on React.
Is there i flag i can pass in the build of the code?
I'm developing a react application that will be slighty different in different situations.
The app will be used on third party web services as plugin loaded in an iframe. In this case I must know who request the app because:
I must rebrand (load a different css)
Disable or enable different services.
Moreover the app will be used as our service and in this case must load the default configuration with our brand and all the services.
I'm wondering how to do that. The simplest things that came in my mind is use the localStorage and save a setting variable just before load the iFrame and in the react app I can use the localStorage to understand what to do. Is this a reliable solution?
Also, the iFrame load the website using a request, maybe I can pass a query parameter and set the style and some other values based on that.
Not sure which is the best way to do that.
You can also set cookies based on who is going to use it, see https://www.npmjs.com/package/universal-cookie, but make sure to have the secure flag switched on.
An example, this is client side
import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('requestedParty', 'Google', { path: '/' });
console.log(cookies.get('requestedParty'));
In my web app, I don't want to use hash-based routing, I don't want to see any # appear in my URLs. I want to use RESTful URLs, e.g., http://www.example.com/blog/id.
react-router can deal with client-side routing quite well, but if a user hit enter on the browser address bar or refresh the page, the request will be sent to the web server and then the web server has to understand the URL and handle the routing.
Isomorphic is a good solution to this situation since it can render any page on both client-side and server-side. Actually there are many react starter kit projects on Github which claim to be isomorphic.
In my opinion, isomorphic looks beautiful but it's too expensive to write code: you need to make you react components render successfully both on client-side and server-side, which needs developers to make great efforts.
So here is my question, can I just make the react-router be isomorphic, not the entire code?
Yes. You can use react-router for a purely front-end (non-ismorphic) app with HTML5 history.
The routing is determined client side, so react-router will spit out the expected page.
However, whilst you don't need to write any server side code, you will need to configure the web server to point your routes to the correct place. This usually means pointing every single request - or every single valid request - to the same HTML file or entry point. Exactly how you do this depends on what you're using to serve your pages - Express, Apache etc.
I hope that makes sense.