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!
Related
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'));
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.
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 am just starting with ReactJS and trying to integrate with Stormpath for user login. They provide default behaviors for /register and /login path.
I want ReactJS to redirect to those local links for now rather than creating new routes and components. How can this be achieved.
Thanks!
I also work at Stormpath and just a few days ago I released the Stormpath React SDK. With this you'll be able to integrate Stormpath into your React application with very little effort.
To get started checkout our example application or read the blog post I wrote for it.
And if you have any questions, feel free to hit me up at robin [at] stormpath [dot] com.
Cheers!
I work at Stormpath. We're recommending that you try to use our express-stormpath module. But we do have some issues that we're working on fixing.
It is not yet possible to disable the default HTML views, but still retain the JSON API. We will be fixing this in a future release. This creates a problem for React Flux applications that want to use the /login route in their browser application, but not use our default HTML views.
To work around the problem, you can change the uri of the route to a different URL than /login. For example:
app.use(stormpath.init(app, {
website: true,
web: {
login: {
uri: '/api/login'
}
}
}));
Your browser code will need to make it’s login POST to /api/login
Can you give this a try and let me know if is helps? Thanks!
I will be glad if someone could answer the following questions
How does it work?
Why is it necessary?
What does it improve?
Client side routing is the same as server side routing, but it's ran in the browser.
In a typical web application you have several pages which map into different URLs, and each of the pages has some logic and a template which is then rendered.
Client-side routing simply runs this process in the browser, using JavaScript for the logic and some JS based template engine or other such approaches to render the pages.
Typically it's used in single page applications, where the server-side code is primarily used to provide a RESTful API the client-side code uses via Ajax.
I was trying to build a Single page application and came to know about client side routing.
By implementing client side routing I was able to achieve the following
The front and back buttons in the browser started working for my single page JavaScript application. This was very important while accessing the page from a mobile browser.
The user was able to Bookmark/share a URL which was not possible earlier.
I know that it's late but I have some information about how the client side routing (CSR) works. This answer does not try to provide a full js implementation of client side routing but rather tries to shed some light on what concepts will help you implement one of your own. It's true that when user click an anchor tag, the browser sends a request to the server. But we will be able to intercept the event and prevent it's default behavior, i.e sending a request to the server by using "event.preventDefault();". Below is snippet from React routers web page.
<a
href="/contact"
onClick={event => {
// stop the browser from changing the URL and requesting the new document
event.preventDefault();
// push an entry into the browser history stack and change the URL
window.history.pushState({}, undefined, "/contact");
}}
/>
Also listening to forward/backward button click is important. This can be done by,
window.addEventListener("popstate", () => {
// URL changed!
});
But looking at the above two snippets you can imagine how a CSR could be implemented. There is much more to it. That's why libraries like React Router exists and web frameworks like angular provide CSR by default.
If you want more information please visit the link below, it will take your the concepts page of react router.
https://reactrouter.com/docs/en/v6/getting-started/concepts
Also if you want to get more depth into the topic your could check out the code of Angular router. Comparing the two implementations will give a much more insight.
What :
In react the history object takes care of that what it does..it keeps track of all the addresses and the Router defines all the different routes. So Router takes the help of this History object to keep a track of various addresses / History of the current URL and based on that location it serves the appropriate content.
Why :
To reduce unnecessary reloads.
For better user experience.
It's internally handled by JS.