5 Features Your Login System Must Have

By  on  

It seems like every website has some login system nowadays and half of the time the content provided in these protected areas should be freely available anyway. A bad login system can be a plague for your web app. If you do need to create a login system for your website, be sure to have the key features that will make your login system user friendly.

"Remember Me" Cookie Option

Don't make me provide credentials every time I hit your site. A remember me cookie function is extremely easy to create and the time spent creating the functionality will be more than worth it to your users.

Easy-To-Find Login Link / Box

One problem I see often is that websites don't make their "Login/Sign In" link or form apparent enough. There have been sites where I've had to do a page search to find the login box. How am I supposed to get to the special content if I can't find the place where I'm supposed to login?

Login Interrupter Redirect

If I'm trying to hit a protected page and my login cookie or session expires, I expect to be hit with a login screen. When I login, however, you better take me to the page I had requested in the first place. What an annoyance it is to be taken to a different page than the one I requested!

"Forgot Your Password?" Functionality

Even though a login system has a "remember me" script, that doesn't mean I'll remember my password when I have to sign on when using a different system. Give your users an easy way to retrieve their password if they forget it.

Non-Javascript Compatibility

I love an AJAX login as much as the next guy, but if your login system doesn't work without JavaScript then you're asking for trouble. If your JavaScript isn't cross-browser compatible or there's an error in your code, at least your users can still login without problems.

Is your login system missing one of these features? If so, you're at risk of losing users. What bugs you about some login systems? Please share!

Recent Features

Incredible Demos

  • By
    Create a Clearable TextBox with the Dojo Toolkit

    Usability is a key feature when creating user interfaces;  it's all in the details.  I was recently using my iPhone and it dawned on my how awesome the "x" icon is in its input elements.  No holding the delete key down.  No pressing it a...

  • By
    Flashy FAQs Using MooTools Sliders

    I often qualify a great website by one that pay attention to detail and makes all of the "little things" seem as though much time was spent on them. Let's face it -- FAQs are as boring as they come. That is, until you...

Discussion

  1. Excellent post – and awesome site you have!!

  2. Good ideas. Mine is pretty bare-bones right now, but it’s only for me and one other person at the moment. I’ll definitely implement these when I get around to revamping it.

  3. Nice list…. I thought of a few to add:

    For the development side

    Of course the input needs to be sanitized so users cant login with passwords like, “‘ or 1=1– “. This is a very common mistake for newbie PHP developers making their own authentication systems.

    I would also expect my password to be encrypted and not sent to me in plain text to my email after signing up to a service.

    On the Consumer side

    I want to see when the last time I logged in and by which IP address. Google recently added this to Gmail and I am really glad they do. I don’t know why everyone doesn’t do this.

  4. Lets not forget the SALT, a good article on this is here

    What is SALT?

  5. Mike G.

    #6, support OpenID….

  6. Good article and comments too. Some other thoughts:

    1) Building on what Mark says about encryption, there are really two pieces here: the credentials should be both transmitted from the browser to the server over HTTPS as Mark suggests, and the password should be stored in salted and hashed form as Phil says.

    2) If the login form is its own separate page, the initial delivery of that form should be encrypted, not so much for security reasons but rather just to communicate to the user that you’re taking security seriously.

    3) If the login form is embedded in some other page where it doesn’t make sense to deliver it over HTTP (say that your login form appears on every page as part of the page template for example), then it can be useful to use text like “Secure login” or use a lock icon or something like that, again to communicate the security piece.

    4) If you use redirect-after-post for your login (which probably isn’t really for a login form but some people just always apply redirect-after-post to their forms), consider delivering that target page over HTTPS as well, for exactly the reason given above.

    5) For sites that need to prevent against phishing, consider a user-selected security image like the Vanguard.com uses.

    I wrote a couple of articles related to this post:

    Login and remember-me

    Storing passwords securely

  7. Very nice list! I am currently building a new web application for my work and started with the login system. The only two features I forgot to implement are remember me cookies and the login interrupter redirect. Thanks for bringing it up! :)

    Anyway, I think it is VERY important that your login works with javascript disabled. I usually create my web applications without ANY javascript, just to make sure it works if disabled. Then I would go ahead and add javascript and ajax functionality. Just make sure it degrades gracefully.

    One thing that annoys me is when error messages are in two different places when javascript is disabled versus enabled. I think if you plan on putting error messages next to the related field in javascript, you should do the same in php. Just a development annoyance. Does anyone think the end user cares or even notices that?

  8. You forgot the all-important ‘Clear’ button that every good form should have.

    giggle

  9. @Mike: Sure, how could I forget that oh-so-valuable “Reset” button?

  10. You must be able to navigate thru the form using the ‘Tab’ key.

  11. Expanding on what Binny said, make sure the tab index makes sense! Make sure the field they think they are going to is the field they are going to.

  12. Nice article!

    However, I always encrypt passwords using one-way hashing so emailing a forgotten password is impossible. I do however provide a new randomly generated password that is sent to the stored email address.

    Allowing people to simply enter a username and an email address and have the password automatically reset and sent to the provided address is just madness!

  13. Random Guy

    Now you can do a post on 5 ingredients every sandwich must have… Will be yet another post on obvious things.

  14. Excellent points.

    @Random Guy: Maybe they look obvious but I am sure that not so many developer do this properly. Obvious things are easy to omit. Surf for a while, and you’ll see.

  15. luke

    random guy your comment is the only one worth nothing here, dude :)

    examine the infra-ordinary, not the extra-ordinary. You will learn much more. As Georges Perec wrote, “Interrogate your Teaspoons”.

  16. my two cents about the Login Interrupter Redirect: Not only redirect to the page the user tried to view, also submit any form data that might have come with the original request. A lot of times sessions time out when users are typing something long (e.g. in a forum). Also remember the user of the action that will be taken once he relogs in. This helps to prevent from unwanted actions and it also “unfrustrates” a user because then he knows that his changes have not been lost.

  17. Jacques

    Hi everyone, I am looking for a login system for my web site, anything you would recommend?

    Thanks,

    Jacques

  18. Thorpe Obazee

    I am still missing 2 for a application I am building. But of course, I haven’t really forgotten them. thanks for the list David

  19. some login systems implement captcha or at least after 3 login failures captcha pops up.
    when logged in, the user’s name and logout button should be visible

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!