I'm using React on the front, nodejs + express for the back, mongodb , and passportJS for the auth, and express sessions to store the session information.
Whenever someone joins my website, react is sending a request to the backend to check if the user is logged in, and then if the user is logged in it will show adapted content. The problem is that whenever someone is logged in it will first show in the nav bar a button that says "log in" and only half a second later will it be updated to "log out" because the post request that says the user is logged will resolve. What is the best practice to solve this issue? at the moment I check if the user is logged in every single time that the user navigates to a new page and it does not sound like a best practice to me.
Try adding a loading state to your component. So instead of two states of login and logout, you will have login, loading, and logout.
This will allow you to add a new UI state for loading. Now it up to you to decide the UX.
UX Solution:
Some sites just put a giant loader and blocks the site till the app is loaded which works but is not that appealing.
A more modern solution is to use a skeleton loader. This will display a fake component while the application is loading (Note: NOT the whole sight needs to be in this skeleton state. It can be only the navbar while the rest of the application is displayed).
See AntD skeleton: https://ant.design/components/skeleton/
Related
I write a flutter web sample app that uses bloc as many samples on the internet.
Imagine a simple flutter project with the bloc to the login user. Get a username and pass and pass to bloc and UI automatically show home page now the problem is: this is web project after login when the user refreshes the browser login page popup again.
How to manage to load the main page even after the page refresh?
I use localStorage with a token cached. Refreshing a page on a web is basically re-rendering all resources(maybe that's why Flutter Web only supports hot restart but not hot reload).
For me, when I need to check login status or user data, I use a cached token(in case I use server), or a Firebase auth listener(if I use Firebase) before showing any UI.
I make it work with State Management
there are many solutions for state management
I use Change Notifier State management
I am looking to replace a toolkit that does social auth through a seamless popup, where the entry point is a javascript function and there are javascript callbacks that you install that pass the results of the authentication back to you once everything has asynchronously been processed.
The socialbootstrap example shows how to perform posts to /api/auth/{provider} and this causes the browser to redirect to the login screen of the social provider and then back to a redirectUrl in the original app.
I would like to have this work in some kind of popup and the result be passed back to me as some kind of ajax result or a javascript success or failure handler.
Is this possible and if so do you know of any code examples that show this?
My understanding is that iframes are not a universally good way to do this as some social providers have iframe busters...
Thanks
If you only need to support Credentials i.e. UserName/Password Authentication you could do this via a HTML from in a Popup and ajax.
The https://httpbenchmarks.servicestack.net Live Demo shows an example of this when you click on Login with your email button or Sign In link (on the top right).
The Authentication/Login process is documented in detiail the repository, e.g it uses a modal bootstrap form and ss-utils bindForm to ajaxify the HTML Form and provide automatic form and validation binding.
On successful authentication, the success callback is fired where you can hide the modal form and run any other post-authentication scripts, e.g:
$("#form-login").bindForm({
success: function (r) {
$('#modalLogin').modal('hide');
localStorage["UserName"] = $("[name=UserName]").val();
$(document).trigger('signed-in');
}
});
Now that the Users Session is authenticated, every subsequent ajax request is sent in the context of the users authenticated session.
If you want to use OAuth then you would need to stick to full-page reloads since often the page will be redirected to the 3rd Party site where the user needs to explicitly allow authentication via your app.
Any Xpages application update in design causes the application refresh which removes scope variables, session etc. When this occures and there is a page opened in users browser with some partial refresh action buttons ... such buttons simply do nothing when clicked which is quite confusing. No message that's warning the user that the page is stale or something. Is there a way how to detect such situation in general so I can inform user in browser with some dialog that he should reload the entire page?
For all scope variables above request (which gets initialized when you send a request and is always shiny and new) you never can take their existence for granted. Best example: user leaves a form open, locks the PC, goes for lunch, lets the session expire (which also deletes the view scope). (S)he comes back, opens a new tab and logs in - so there is a valid (new) session, hits submit in the first tab -> bum all your code fails.
This is the same scenario as an updated design short of the scenario Panu was pointing to.
So in your code check for the existence of your scoped variables and force a full refresh. Or (I like that better) add an error to the page so that gets displayed with an appropriate action.
Is there any way to store state, basically to have a "keep me logged in" functionality like browsers do?
I've been looking into the CookieManager, and search a lot but haven't been able to find anything on this.
I have a social feeds reader, in which if a user clicks on a link it is opened on a WebView. The thing is, that on every run of my app, when they click on a link pointing to a private facebook post, they need to log in to their accounts in order to view it, which is quite uncomfortable.
Appreciate your help.
I found this How do I persist cookies when using HTTPUrlConnection?
and this http://docs.oracle.com/javase/tutorial/networking/cookies/custom.html
which allowed me to create a persistent cookie handler.
Our lab makes many web experiments, all of which have a similar flow:
The user fills a form and submits. The form is validated, if it is OK then the posted values are logged and the user is sent to #2; otherwise the user is asked to fill it again.
The user answers a quiz. If the answers are correct then go to #3; otherwise fill again.
The user enters the actual experiment, which is a web-app - a chat-room, a flash game, etc. After the game is finished, go to #4.
The user fills another form and submits.
In the past I did this with JSP, but now we've moved on to NodeJS and Express, and I wonder if there is a general way to handle this and similar control-flows.
The question is very general, so in general the answer is Yes - you can do all that with node and express. Just register your routes with express (e.g. using app.get(URI, func)) and serve your dynamic and static content from node. There is ample material in the web on using express.