I don't get it, I see all these people talking about localStorage or sessionStorage yet in my React project I have undefined. How are they getting that object from a real Web API?
Examples:
persistent-state-reactjs
redux-sessionstorage
react-redux-jwt-auth-example
each one of these shows calling localStorage or sessionStorage but how? I don't see them using any libs to get to that. The only thing I can figure is they're using something like phantom or casper?? I only see phantom in the package.json of that third url. Even so, I don't see how he's pluging up Phantom and if not how does he have an instance of localStorage?
localStorage and sessionStorage are built-in objects from the Web API, so you don't need any libraries to use them IF you are using them in the front end. My guess is that, localStorage and sessionStorage is not available because your react app is server rendered. You can test them by running the code below somewhere in your app. If they don't exists and you still want your app to be server rendered, you may use a library such as this one: https://www.npmjs.com/package/web-storage.
try {
// localstorage or sessionstorage init
// ...
} catch (e) {
// they are not defined, use a library
console.log(e); // look at error
// if localStorage is not defined, use a library
window.localStorage = require('web-storage')().localStorage;
}
Hope this helps.
Related
I used redux and I want to fetch my API using the cookies item like this:
import cookies from "js-cookies";
api/get_liste/${cookies.getItem("moncentre")}
when I run my app, ${cookies.getItem("moncentre")} is null.
My codesandbox: https://codesandbox.io/s/ecstatic-rubin-tf56r?file=/src/App.js:157-212
How can I fix it ?
So the problem here is, you never set a cookie in your app and then try to get the cookie that never exists so it will return null since there is no value for it in the browser cookies.
In order to set a cookie, you should do this (according to the package provider):
cookies.setItem('_code_sandbox_key', 'Cookie did set.')
The other thing that you facing is the warning that you get in your dev tools, so according to this doc, this console warning is not an error or an actual problem — Chrome is just spreading the word about this new standard to increase developer adoption. To fix this you should add SameSite="none Secure" (and then clear all your cookies with the dev tool) to let the browser know the script is not related to your site and that it is a third-party library that you are using.
<script src="https://kit.fontawesome.com/a076d05399.js" SameSite="none Secure"></script>
NOTE: You can follow this thread for more information.
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'));
What is a good way to handle redirects in React Native with OAuth? There are external APIs I need to call, so I’ve registered my app, but I’m unclear what the redirect URI should be. For a web app, it would make sense how to handle this, but I’m not sure with React Native.
What you need to do in React Native is setup your application for deep linking. A deep link is a way for another application or in this case your browser/WebView to say "Hey! I'd like to pass this information back to a native app".
Setup:
Setup a url scheme in Xcode. This will allow you to redirect to url's formatted something like this myApp://oauthLogin
Setup Linking
From there you should be able to create an event listener for the Redirect URI that you pass to the oauth service, in this case your deep link.
componentDidMount() {
Linking.addEventListener('url', (url) => {
console.log(url);
// => myApp://oauthLogin?authCode=abc123
});
}
You will have to add extra code the make sure the url is in the correct format but i hope that gets you closer!
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.
I'm working on e2e tests for a web app and I would like to log in a user and persist their session.
Specifically the following scenario:
The log in form is posted with valid credentials.
Angular routes the user to a landing page.
I call browser.get( /* the current url */ )
I expect the current URL to be the same, instead of my user getting kicked back to the log in screen.
We're using HTTP header based auth and I don't know how to configure this scenario for testing purposes.
Is it as simple as activating cookies somewhere? Or maybe supporting the auth headers via a config?
I managed to solve this be simply adding browser.sleep(1000) in before calling browser.get( /* the current url */ ).
Basically Protractor was hammering on the router to fast and my app was kicking me out before auth creds were set. Or, perhaps, might be the HTML5 routing takes a little time to process (our deep links are hashed, but then angular converts the hash to HTML5 routes).
You can use browser.waitForAngular(); too.
You can use promises like this
goAfterLogin: function(){
browser.get('http://www.example.com').then(function(){
return this; //or other return
}).then(function(){
return this;
});
}
Its up to you how will you use it (you as well can create promis with waitForAngular() )