I am trying to make an app for my billiards league using React and Firebase. I want to have users log in and THEN be able to see the full app (calculator for determining races, schedules, teams, etc.). I am storing the status of whether someone is logged in or not in the parent component's state (e.g.: this.state = { loggedIn: true }). The Firebase login/logout works just fine, as does the React conditional rendering of components based off the aforementioned state. The state defaults as false and changes to true based on firebase.auth().onAuthStateChanged (which also functions just fine).
The problem I'm having is that there's currently nothing stopping an enterprising individual - one who has no account with my app and is not logged in - from opening the React dev tools and toggling loggedIn to true, and thus revealing all the goodies.
I've viewed a number of tutorials (like this CC-Tricks one) for React and Firebase that say to do exactly that - store the authentication status in the component state. I also think there is an easy way to do what I need my app to do, but I probably am just overthinking/ too noob. Any pointers?
Related
A while ago I made an app using React Native and was not able to store data like token and user ID for future use. Currently I am making a Point transaction app in React Native using Expo and was wondering if there is a way of storing required data to all the pages just like the web has a localStorage.
App Functionality:
Users can login to their account and the response has the token, user ID, user Name and member No. On the dashboard it shows points gained, redeemed and points available.
Still on the dashboard it can show the last five transactions and if one is clicked, it navigates to a transaction details page which its API requires the token, user ID and member No.
A profile page to edit user details or logout.
I was able to achieve all that by passing those details as route params but after adding a bottom tab navigation the app crashed since stack Navigator differs from Tab Navigation.
P.S. I have tried Async Storage but the app requires a page refresh to get those data (ie. token, id, memberNo)
If I don't misunderstand what you want is to be able to share the AsyncStorage values with the rest of your application, for cases in which you want to share states (such as tokens or values of a user's identity) use parameters navigation becomes deficient and uncomfortable to use when wanting to send states or state values from a higher level to a lower one, even more so in large applications that already have many layers. For this you have two options, the use of Redux to make it easy to access your data throughout your application, or you can also use the useRef hook which is a quick output that is already plugged into the react native libraries useRef hook
I have a ReactJS front-end app mixed with a Laravel back-end app.
I'm facing a problem with auth. I'm authenticating the user with Laravel auth but I have some trouble on displaying components. I have some posts (/posts/1 or /posts/2 etc...) and when the user visits the page, he can modify the post if he is the author.
I'm storing as a state the id of the user and checking like this :
if(this.props.user.id === this.props.posts.id_user) ...
But this is really unsafe since the state can be modified by anyone with the dev tool. By modifying the state, the user could modify a post even if he is not the author because all displayed components managing the edit would be accessible for him.
Is there a "magic" trick to prevent it?
First of all, the state you are talking about is the app state, the one that resides in the browser, if the user change that state, the effects will only be affected by the user itself, in his browser, theoretically, is not changing the data or state in your backend/database, unless you don't implement the same validation you are talking about.
If you do if(this.props.user.id === this.props.posts.id_user) in your front, you absolutely have to do it in your back, that is the place where the real validation counts, that's where the user can't change the user id, because, for example, you will be using the one in the user session that is stored in cookies or a Redis server.
Always validate in the backend
I have two components. One component that the user must use to login and one component to show some content.
I was thinking of implementing my application by having one component that has some react state that tells it to render either the login component or the other one.
If I do this, would it be possible for on the client-side to manually set the state so that the login screen is bypassed and the content is shown?
EDIT: Added some example code.
render () {
if (this.state.authorized) {
return <Content />
} else {
return <Login />
}
}
With this code in mind, given that only the <Login /> component is capable of setting the authorized state to true, is it possible for the client-side to simply get around this by manually setting the state somehow? For example through the chrome react dev tools or something?
Client-side JavaScript isn't secure by design, i.e. user has full control over the script that runs in user's browser. Considering that a user has enough access rights locally, the code always can be read and modified. Security measures that are applicable to client-side code only make this process more complicated.
This isn't unrelated to security, as long as the access to sensitive data is controlled by the backend.
It's certainly possible to change component state and show a component that wasn't supposed to be shown. For instance, React dev tools can be used for this demo to set authorized to true:
A user basically ruins own experience with the application. A blank component will be shown without sensitive data because a user skipped backend authentication process.
currently looking in to making a new web app with Firebase, React and re-base or reactfire. I understand that Flux when used with Firebase does not make complete sense, and they don't work well together. My question is, if I do not use Flux or Redux, but instead just re-base or reactfire how do I control the page's state? For instance, knowing a drop down is active.
IMO, knowing a drop-down is active is perfectly managed by using React, without the use of redux or flux and regardless of what backend you are using.
For example (and I'm making some assumptions here what functionality you want precisely):
Set your initial state to { ddActive: false }
Then setState({ ddActive: true }) on clicking the dropdown button
Then, on clicking anywhere, setState({ ddActive: false }) again
Hope this helps!
I'm working a React Native app using ExNavigator and I want to use Redux. I want a basic login flow, by which I mean:
User clicks "Log in" with correct info
Redux does a usual async flow through redux-thunk or something
When the user is logged in/request was successful, move to Profile route
I've done Redux login in the web, but I am sort of confused as to how to move ExNavigator to the Profile route when the login works because the Navigator object seems to be contained completely in the components and not Redux.
Any pointers?
A pattern I use often is detecting state changes in my component's componentWillReceiveProps, and triggering the navigation transition from there.
Let's say your state contains a property isLoggedIn, which you set to true when the login is successful. The property is also passed as a prop to your component. You can then:
componenWillReceiveProps({isLoggedIn}) {
if (isLoggedIn && !this.props.isLoggedIn) {
this.props.navigator.push(nextRoute());
}
}
This might not be the most elegant way of solving the problem, but it works. The React Native Navigator, and consequently ExNavigator built on top of it, does not lend it self easily to the Redux architecture.
React Native team is working on a new navigation API, currently known as NavigationExperimental, which ships with latest versions of RN. It works nicely with Redux (example), but as its name indicate, it's still very much experimental.