i'm trying to learn redux and i'm not sure what is best way to structure my app state when the app is used by multiple users.
App flow:
on every login {userid,username,token} is stored in localStorage.appUsers
now if my app initialState looks like following
{
appusers:[],//Array of app users, i only keep the token and id and username and i fetch the full user info from server when user is selected as current logged in.
currentUser:{id,fullname,picture,...etc} //current user
blog:[],//array of blog posts of current logged in user
chat:[],//array of chat messages of current logged in user
}
i use localstorage also to save the user state so that next time he open app, it present initialState from localstorage until it refresh the cache from server.
problem is that currently the blog and chat keeps array of posts for the current logged in user, when user switch users he is presented with someone else data.
so what is the correct approach to maintain separate store for every user ?
i tried to modify my initial state so that the blog and chat arrays become a property of appUsers, then i faced problem with react combineReducers which expects a key for every reducer in the initialState.
Related
I have managed to setup a custom login system using Firebase. The user enters email/password and is redirected to the main page(which is private). I am having issue with onAuthStateChanged after logging in. When I check the auth state after logging into the main page, i get invalid user (null). The firebase dashboard shows I have logged in successfully but onAuthStateChanged is the opposite.
I am trying to check if a user is logged in to my html pages, if not I want to redirect them to the login page. I like how the authentication works in firebase but I need to protect my html pages not my divs (which is what the vast majority of firebase auth tutorials show).
If anyone has an easier way to password protect a web directory that looks nicer than HTaccess, please advise (I am not crazy about using wordpress for password protection, but its an option). Otherwise, I guess I will have to do this in PHP. Thanks in advance!
(function () {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
console.log(user);
console.log('A user is logged in.');
} else {
// No user is signed in.
console.log('Invalid user. Redirecting to root.');
window.location.replace('../index.html');
}
});
})();
If you navigate to a new page, Firebase will have to initialize again. As part of that it will try to restore the user's authentication state, but this requires a call to the server which takes time.
For that reason the onAuthStateChanged listener will initially fire with null as the current user (and auth.currentUser is set to null). Then once the user is signed in, the listener fires again with the user object for that user.
If you want to detect this initial state, you can either store some token value in the browser's local storage that you can check for yourself on the new page, or you could set a time-out for when you expect the user to be re-signed in and only then navigate away to the index.html page.
Good day guys,so i am trying to implement a feature in my react native app....After a user has logged in and later logs out of the app,i want to add a feature on the login screen to ask if the user wants to continue as the previous user that was logged in,please how do i go about it?
Sample User interface
i'm new in react-native. but i think i have some solution:
Using local storage, store user id or somthing for login.
When user login, you can get device id and store it to your database. When user into app: check device id, detected previous user logged.
When ever a new user logs in try to save details like email or username in Async storage(which is one way to store values in React native). And when the user logs out you can show the details which you had stored in Async storage.
Hope, this helps!
I am creating a multiplayer game website. I am using three features of firebase.
Firebase authentication
Firestore
Real time database
The data which is permanent is stored in firestore. Like profile image, username etc. The data in firestore is stored in collection users and the key is same as the authentication id which we get from user.uid
The second data is temporary data which contains the chat messages and current game situation and player turn etc. This data is stored in real time database.
There are two base objects in real time data base. One is rooms and other is users. When a user logs in to website the permanent data is taken from the firestore and placed with temporary data(because we might need to display the permanent data again and again). The function I am using to get permanent data and create combination with temp data is
//'uid' is the permanent id which is used in firestore and also in authentication.
export const addUser = async (uid: string) => {
//gets the permanent data from firestore
const data = await getUserData(uid);
//Set it to realtime database my adding one more temp prop
return await dbUsers.child(uid).set({...data, messages: []});
};
Till now everything is fine problem comes when I have to remove the user on disconnection. I used t
export const removeUser = async (uid: string) => {
return await dbUsers.child(uid).remove();
};
The above way doesn't work for multiple tabs. Consider if user had opened multiple tabs and he just closed one server then realtime database will consider it logged out.
Do I need to create realtime data on the basis of another id using push() method. Kindly guide me to correct path.
If I understand correctly you're trying to track the user's online status using Firebase's onDisconnect handlers. To do this:
You write a value for the user's UID when they connect.
You then delete that value using an onDisconnect handler.
This indeed will not work when the user opens the app in multiple locations (tabs, browsers, or devices). The reason is that a user can be online in multiple locations, and your code and data structure needs to cater for this.
The idiomatic approach is the one outlined in the sample presence app in the Firebase documentation, and works with a data structure like this:
"OnlineUsers": {
"uidOfUser1": {
"-LKeyOfConnection1": true,
"-LKeyOfConnection2": true
},
"uidOfUser2": {
"-LKeyOfConnection3": true,
"-LKeyOfConnection4": true
}
}
In this structure, if a user has two open connections (on different tabs, browsers, devices), they have two nodes under their UID, each with its own onDisconnect handler. When both connections are closed, with connection keys disappear, and thus their /OnlineUsers/$uid node also disappears automatically.
So to detect if a user is online in the above structure, you'd check if there is a node under /OnlineUsers with their UID.
On my login screen, the user logs in through facebook and a unique UID is generated for the current logged in user. I then store the information I need in firebase with a child called user and then each child within user is in the form {uid: {name:blah, email:blah, phone:blah}}
After storing this data in Firebase, I want to redirect the page to my form.ejs page. However, I want to have access to the UID so that I can query the db for the current user later in the application.
How do I have this UID persist throughout my application because the moment I do location.href = './form' I lose access to that global variable UID that I have saved.
Secondly, I am doing all this saving to data and redirecting from the client side in the .js file. Should I instead be doing this all from the server (app.js)?? I am currently creating a json object with the data I need from FB and then simply calling firebase and saving the child. Should I create an ajax request instead and send it to my server with a post request and then navigate to the form.js page?
I'm creating an app using Ember.js. This application allows to book an appointment at the doctor.
You have a booking process with a few steps.
After step 1 (booking/start), you have a screen that shows up if the user isn't connected (booking/user). On this page, I have two links: one to the login page, another one to the registration page. All steps "needs" booking controller.
The link to login is basically a link to the next step (booking/confirmation), but since user isn't logged in, he's automatically redirected to login page by AuthenticatedRouteMixin. When I log in, everything works fine, I'm connected and redirected to booking/confirmation.
BUT, I lose all the data from my booking controller. It's obvious, since login doesn't have any connection with my booking controller.
I believe this is not a pure Ember Simple Auth question, but more a general Ember.js question. Do you have any idea about how I should change the login behavior to keep the data or change the logic of the app to save the data before going to the login page, then retrieve it on booking/confirmation?
My code is available here: https://github.com/lionelrudaz/wellnow-frontend
Let me know if you need more information.
I found a workaround. When I enter the process, I create and save a booking object, allowing me to have an id and to save the progress at every steps.
If you need more details, just let me know.