I am working on a project where after successful login, I dispatched an action to redux state and setting Redux state to LoggedIn. But when I refresh the page, all the values in the redux state become null. Is there any way to stop this?
Redux is an in-memory store. If you want to persist it over page refreshes, you have to add a library such as redux-persist
Related
I am building an ecommerce app and using Redux to persist the state of the user as well as the state of the cart. My user's state is not getting captured on login. It appears that a payload is generated on login, but that payload is not getting saved to state. When the user goes to make a purchase, the POST request fails since no information on the user is available when the request is made.
Here is the user reducer handling the change of state when the user logs in:
I think a potential issue might be that I am trying to mutate state directly and that I should push in a new state with the payload instead. I'm not sure however. Please let me know if you have any ideas or if you need to see the dispatch, etc.
Your action.payload doesn’t have a currentUser property that then encapsulates your user properties. Instead your payload has all the properties so your “const { currentUser, accessToken } …” function will set “currentUser” to null since it doesn’t exist in the action.payload object.
The documentation of Firebase Auth for iOS regarding the addAuthStateDidChangeListener function states:
Registers a block as an "auth state did change" listener. To be invoked when:
The block is registered as a listener,
A user with a different UID from the current user has signed in, or
The current user has signed out.
The block is invoked immediately after adding it according to it’s standard invocation semantics, asynchronously on the main thread.
The first point above and the last paragraph confuse me. If I add a listener immediately after having initialized Firebase, is it possible for the listener to be called before Firebase Auth have restored the user from a previous session?
In such case, how can I distinguish if the call of the listener with a null user occurs because there is no user or because the user has not been restored yet?
It is indeed possible for the auth state listener to be called before the authentication state has been restored, in which case the listener will be called with a "user is not signed in" state initially, before being called with a "user is signed in".
The Android SDK these days actually hides that first auth state, but I don't think the iOS SDK does the same. You might want to give it a try though. Simple sign in to the app, close the app, wait for at least an hour (so that your access token has expired) and start the app again.
I'm not sure how most developers handle this, but I know of these two ways:
Make the redirect to the sign-in page explicit. So if you get an auth state without a user, show a link to the sign-in page. In the scenario with the initial "not signed in" that means the user will see this page for a moment, until the sign-in state is restored.
Make the redirect wait for the refresh. This is essentially just a time-out with something like "detecting sign-in state" or something similar. You might want to include a explicit redirect link in there too, for users who know they won't be signed in.
I agree that neither if these is ideal in a mobile app, so I am curious to see what others do.
Recently I have started implementing Firebase on Vue webpack project.
In order to check for user login on must do:
firebase.auth().currentUser
and receive either the User or null.
This is explicit for first time login but is it also the correct way to check for user login status throughout the session, to show/hide DOM elements depending on login status for example?
It works but is it the most efficient?
I also tried to save a flag to sessionStorage but that flag can be deleted with page refresh and can be bypassed. Am I correct to assume that for any check that requires security I should do firebase.auth() and for any check that is necessary for UI I can use session storage flag?
Is there any third, better option?
In my opinion, it depends what are you looking for. If you are looking at watch and dispatch an event if the user is logged or not, I think is better use this listener.
firebase.auth().onAuthStateChanged(function(user) {...... }
Where, user is the user logged or not. Maybe, it's a little similar to what you're saying. However, this Is the way I do when I need to play with this kind of operations. Also, it's a little more clean than just use firebase.auth().currentUser
I am currently trying to use redux-persist to persist state after page refreshes. The problem is that, since my application uses OAuth flow for authentication, going to the 3rd party server for authentication persists my logged in state because leaving my website counts as a refresh.
For example, I go to my website and I am not currently logged in. So, even though I successfully log in via the 3rd party serve, when I get redirected, I am still "logged out" because I was logged out because going to the 3rd party server. Vice versa, if I am logged in and try to log out, I am still going to be logged in even though I successfully logged out.
Does anyone have any ideas how to get around this? Thanks
Redux Persist comes with whitelisting and blacklisting of the reducers. So you need to blacklist your auth reducer, or make a nested persist depending upon your use case. As mentioned in the example docs here
const persistConfig = {
key: 'root',
storage: storage,
blacklist: ['auth'] // your reducer name
};
This is a very noobie question, but there is something I don't really understand.
Whenever I have an authenticated session with emberfire, I'm able to stay logged in, even if I do something like refresh the page or go hit the back button on my browser. The reason I find that strange is because Ember is a single page application. That means by hitting refresh I'm essentially restarting the app and I feel like I should be losing all my sessions and states. How is it then that my login state is preserved even when I refresh the page? Shouldn't my login information be lost when refreshing?
Firebase Auth persists the auth state in web storage (localStorage/IndexedDB). This is the expected behavior in most apps. Many users expect their state to persist and not be forced to login each time even for single page applications. If you wish to persist your state per session (until the window is closed), sessionStorage is ideal for that. Firebase Auth team is looking into that.