6 tips for the perfect SaaS signup flow

Here are my 6 tips to have the smoothest SaaS signup/login flow :

Only ask for an email address.
If you need additional information, ask for it later.
Have your signup form on your homepage.
It's easy since you only ask for an email address now 😉
Block throwaway emails.
Actually, I built an open-source lib I can send you ask me in the comments). Ideally, show the error message before the user hits the submit button.
https://github.com/romainsimon/emailvalid
Merge your login and register.
When a user tries to create an account with the login page, don't show an error message but simply create the account. If he uses your sign-up to log in, simply connect him (and once again, it's easy because you are only asking for an email)
Remove passwords entirely.
Instead of asking for a password, send an email with a link. When the user clicks on it he is instantly logged in. Bonus: you don't need a "reset password" page anymore.
Give instant access after signing up.
Don't require the user to verify his email a second he creates an account. Instead, connect him and show him an alert message asking to verify the account in the next X days. After the delay, don't kick him out. Just make the message full-screen.

How many have you implemented yet?

I did all these with Beanvest, and I think it could be improved even more.
Do you have any other tips to create the perfect SaaS sign-up flow?

Romain Simon

on July 5, 2022

Say something nice to romainsimon…

Post Comment

4

Remove passwords entirely.

The problem with that is that, if your email is compromised, everything else is compromised. And without a trace too.

"Reset password" works differently because the password has to be changed before any access is given, which means a malicious/unauthorized user cannot gain access to your account without alerting you.

Also, is opening a new tab, typing "gmail.com," signing into your email (if you're not signed in), waiting for the login email to arrive, opening it, and then clicking on it, a better/faster process flow than just typing a password? 🙂

simplisticallysimple

·
2 years ago
·
Reply
4

Great tips.
If I may add one : add social login (google,facebook,twitter)
You will reduce the flow, and no need to check disposable email and email verification.

Tim12

·
2 years ago
·
Reply
1. 1
  
  This one is great because it's so simple and reliable for both sides.
  
  karsolek
  
  ·
  2 years ago
  ·
  Reply
2. 1
  
  Yes, I did not mention that but it's a good advice!
  
  romainsimon
  
  ·
  2 years ago
  ·
  Reply
1

Thanks for this, I used to always have a separate register and login page. Have been experimenting with a merged login & register and the results have been awesome.

siyabendoezdemir

·
6 months ago
·
Reply
2

Love most of this other than the MagicLink advice. They are a hot mess IMO and often I just find a different software if it's the only login option.

Give your users a choice - email/user + pw, Magic Link or whatever.

I do love the create account with only email idea though.. then capture pw later. Other than it might mess with saving PW using Mac/iOS and 1Password etc.

TonyDehnke

·
2 years ago
·
Reply
2

Well said!! All these points are great! May I just add that it would be even better if you add in biometric login (Fingerprint, FaceID etc...) to make it even better the next time they sign in!

It is exactly what I am offering with my passwordless SaaS OnzAuth https://tryonzauth.com. You can add magic link sign-up and login flow (in one) directly on the home page in minutes using my SDK, with WebAuthN (biometric - FaceID, FIDO2, Fingerprints, Pins device-centric) login support out of the box (with a flick of a button).

Only caveat to it is, there are 2 modes, a popup login or a iframe login that integrates directly on your page, at this point, the iframe login will not work with WebAuthN due to it's built in security/cross domain measures, what are your thoughts on that?

Also, for the very first login (registration) with Biometric login like fingerprint, a magic link confirmation is also required after registering your fingerprint prompt before the user is registered, but subsequent logins will only require your fingerprint for example.

Also, for those not familiar with WebAuthN, we are not storing any biometric information, your device is, we are only storing the device's key, to verify if they device authenticating your fingerprints etc... is valid, but using public-key cryptography exchange etc...

Please give us a try if you want, it is free as well, would love to hear more feedback regarding features and user experience.

OnzAuth

·
2 years ago
·
Reply
1. 2
  OnzAuth looks interesting! Some quick feedback after checking the landing page:
  
  the area with the video element needs better responsiveness for mobile
  
  IMO you need to explain more, I still don't know how it works exactly. My remaining questions: How do the flows (register & login) look from a user's view? Does it replace a password or simply fill in the password? Are they required to create an account in your system? You show some code in the video and in the GitHub; is the integration into frontend, backend or both? Do you store any user data on your side? I understand there is a popup window but can I style it to match my website? Or can I embed it into my existing register/login popups? Can they sign up with Google and then connect the fingerprint?
  
  HTH.
  Badestrand
  
  ·
  2 years ago
  ·
  Reply
  1. 1
    
    I do not store user data besides their email on my side, and their auth device key etc... to authenticate them.
    
    Also, is the missing styling a deal breaker to u? My next task to finish, probably next week, so seeking feedback on that.
    
    OnzAuth
    
    ·
    2 years ago
    ·
    Reply
    1. 1
      
      Missing styling definitely not a dealbreaker, just curious and think that more questions like that needs to be answered on the website! :)
      
      Badestrand
      
      ·
      2 years ago
      ·
      Reply
  2. 1
    Awesome thanks for the valuable feedback.
    
    Yes, someone else mentioned about the video, will fix it soon.
    
    Great point and awesome feedback. I will diagram up something somewhere soon. It is mainly for frontend, with the token, it's a standard oauth token you can verify with any standard libraries of your choosing per your framework, I will document them soon. Styling feature will come soon, getting it out there first.
    
    Again, thank you for your feedback!
    
    OnzAuth
    
    ·
    2 years ago
    ·
    Reply
2. 1
  
  Could you fix the "security/cross domain" issue with registering vanity domains for your customers?
  
  The signup flow with webauthn has a little akward bug. After closing the popup i confirmed my email. And nothing really happened after. That would be when i usually leave the page. Is the email confirmation on your side really necessary?
  
  Maybe you could leave that to you could add a flag "confirmed": boolean to your claims, and your customers could act as the OP reccomends:
  
  Don't require the user to verify his email a second he creates an account. Instead, connect him and show him an alert message asking to verify the account in the next X days. After the delay, don't kick him out. Just make the message full-screen.
  
  pixtron
  
  ·
  2 years ago
  ·
  Reply
  1. 1
    
    After closing the popup? did u run the demo? The demo does not do anything but just shows the token on-screen after authenticating, ideally in the real world u would redirect the user anywhere.
    
    I cannot fix the security/domain issue due to how the default security model built into the browser works, for webauthn/biometric.
    
    Not requiring user to verify his email is a big security flaw in my opinion, I could potentially put in [email protected] to get access everytime for 3 days? Won't I get tonnes of spam accounts?
    
    OnzAuth
    
    ·
    2 years ago
    ·
    Reply
    1. 1
      
      i click the button "login" -> popup opens
      
      i enter my email and click the button "Web Auth Login"
      
      i confirm with fingerprint
      
      i close the popup window
      
      i click the confirm link in the email -> "Your email is confirmed, feel free to close this window"
      
      i close the window
      
      on the original page where i started the flow, i'm still not logged in
      
      If i click on "Login" again, fill in my email and click the button "Web Auth Login" again i'm able to finish the flow.
      
      The consent screen should not be necessary in my opinion. "I just created an account for fancystartup.com, why i have to give consent for 'offline' and 'openid'? And what the heck is 'offline' and 'openid'?" A user might ask himself.
      
      Technically "fancystartup.com" is the first party (onzauth is just an intermediary) that "owns" the accounts created for it's service - therefore the user does not need to give consent to "fancystartup.com" accessing that account information. Only if "fancystartup.com" decides to open it's API to third parties, the user should be asked for consent to give his data to "thirdparty.com", so they can access the "fancystartuo.com" API's in the users name.
      
      Regarding verifying email addresses, see the other discussions in this thread. At least i would leave it to your users if the want only verified email addresses, or if the like to make it easier to initially sign up. You could provide an API where your users can confirm email addresses at a later point in time (eg when the user wants to access pro features or decides to convert to a paying user). Although not confirming emails might be a risk in combination with webauthn, eventually only allow users to activate webauthn once they confirmed ownership of the email address.
      
      pixtron
      
      ·
      2 years ago
      ·
      Reply
      1. 1
        
        oh, I see what u mean, if you close the popup before confirmation, yes, you will lose your ability to get the token, hence actually logging in, technically a user problem, akin to cancelling the log in. Should probably add a message saying "Do not close the window"?
        
        With regards to consent screen, technically you are logging in to OnzAuth, giving you permission to share your info with fancystartup.com, akin to logging in with Google/github/twitter etc..., they will prompt you for consent as well, like ability to read your name etc... I can probably display it clearer and simpler... but the consent screen is a standard oauth flow industry standard... but good point...though the consent screen will only be upon registration, not subsequent logins. openid and offline I agree makes no sense to common users, they are mainly claims for sharing your idtoken and getting refresh token for single page apps flow, industry standard terms again.
        
        Really awesome to read your perspective, some more things to think about and improve, thanks for the awesome feedback and time you take to give me these concerns, as most of my testers are developers who mostly know what they are doing atm haha.
        
        OnzAuth
        
        ·
        2 years ago
        ·
        Reply
        
        1
        
        Eventually you could send a confirmation code instead of the link? Then you could prompt the user with an input field for the code, and a message like "we sent you a confirmation code to [email protected], please enter the code to verify your email address" - Like this it is clear for the user when closing the popup he will be lost.
        
        pixtron
        
        ·
        2 years ago
        ·
        Reply
2

Those are good suggestions, but they are not without flaws.

I actually implemented most of them on a project a couple of years ago. However, after implementing them I realize there are a few negatives you have to deal with.

For example, putting an email-only form on the home page for login/registration is a huge attraction for bots because it looks like a newsletter sign-up form. This led to a lot of accounts being auto-created with the bots leaving the site directly from the "Account Created" page.

Blocking throwaway emails is a good idea though in my experience, most bots use real-looking email addresses with random numbers added from gmail, outlook, etc. rather than "+strings" added.

Merging the login and register process is a good idea, but it can be confusing to a user if they make a typo when entering their email address. Even I ended up creating a new account by accident once. :)

I also created a passwordless system like you mentioned and it worked great when the user was only using one device to access the site. However, it made logging in on multiple devices or browsers a pain, especially if it was on a device where you did not check your email. I found that entering a password was not only easier but also a much faster process.

With my current project, NewsReadery, I ended up removing the passwordless login and home page login form. I did however leave the combined login/register process.

I also provide immediate access after signing up but the free trial does not start until the user verifies their email address.

Those are good suggestions though and are worth considering.

zeras

·
2 years ago
·
Reply
1. 2
  
  Thanks for the comment, you pointed out some of the real issues with what I mentioned.
  
  Do you block entirely the trial until the email is verified? Or just the premium features?
  
  I'm currently not blocking anything with Beanvest, but I want to something to avoid some of the junk emails created.
  
  romainsimon
  
  ·
  2 years ago
  ·
  Reply
  1. 1
    
    For + emails you could use something like
    
    const email = requestEmail.replace(/\+[\S].*@gmail.com$/, '@gmail.com')
    
    so '[email protected]', '[email protected]', '[email protected]' all become '[email protected]'. In fact they are the same email addresses.
    
    pixtron
    
    ·
    2 years ago
    ·
    Reply
    1. 1
      
      If you have your own domain name, you can also have unlimited email addresses without using the + tricks.
      
      Like:
      
      [email protected]
      
      [email protected]
      
      [email protected]
      
      ...
      
      All are valid and can be verified ;)
      
      mattketmo
      
      ·
      2 years ago
      ·
      Reply
  2. 1
    
    Users can use the free version indefinitely without verifying their email address but to gain access to the Pro/Premium version free trial, they need to verify their email.
    
    There is no perfect answer of course, but personally I believe if someone is truly interested in checking out your Pro/Premium features they should be willing to verify their email address.
    
    zeras
    
    ·
    2 years ago
    ·
    Reply
2

Definitely good advice! I slowly knocked away all the required signup fields for PodQueue until I got it down to email-only with devise-passwordless, though you can still add an optional password after signup (I wrote a blog post here about how to do that). I'm also using the valid_email2 gem for email MX/throwaway validation in Rails.

Once I was done with that, I even knocked away the email requirement for signup to add a "Live Demo" function, so you can press a button and try the app immediately.

I still gate some things behind adding an email address, but with both of these techniques combined I've seen tons of improvement in my landing page signup conversion rate!

ryanfb

·
2 years ago
·
Reply
1. 1
  
  Thanks for sharing the ideas you tried!
  
  I'm also thinking of removing the email requirements and have a sort of live demo.
  
  I like that there is less incentive for putting a junk email after you already tried some of the features. In my case it could also be beneficial from a SEO standpoint.
  
  Doesn't that reduce the number of signups though?
  
  romainsimon
  
  ·
  2 years ago
  ·
  Reply
  1. 1
    
    Nope, I see pretty good conversion of demo accounts to real accounts, or also where someone tries a demo account then logs out of the demo and signs up immediately. I even see better conversion rates of people just signing up from the landing page just from having the demo button there. That's just my experience, though!
    
    ryanfb
    
    ·
    2 years ago
    ·
    Reply
2

Good suggestions Romain, how would you deal with those incomplete accounts which may be a typo or a fake email address?

dearroy

·
2 years ago
·
Reply
1. 2
  
  I do not have a good solution right now for typos, but I built this library to check disposable emails : https://github.com/romainsimon/emailvalid
  
  romainsimon
  
  ·
  2 years ago
  ·
  Reply
1

What metrics or feedback do you use to measure the success of your signup flow?

miguelcdpm

·
6 months ago
·
Reply
1

Great tips! One additional tip I'd suggest is implementing social media login options. It can simplify the sign-up process further for users who prefer using their existing social accounts. Don't forget to A/B test these changes to gather data on what works best for your audience.

F_Asadi

·
6 months ago
·
Reply
1

Hi. I too am a big fan of OTP or Magic a link auth. I’m interested in your throwaway code.

SwissArmyMike

·
6 months ago
·
Reply
1. 1
  
  https://www.npmjs.com/package/emailvalid
  https://github.com/romainsimon/emailvalid
  
  romainsimon
  
  ·
  6 months ago
  ·
  Reply
1

Guys, a slightly different angle but still in the same bag..

I'm launching a global members club for music events in beautiful places around the world. 25+, no phones, curated energy.

The number one goal right now is to build the member applications. Currently building a webflow website with a CMS and data capture at the bottom.

Is that the best way to go? Or any other ideas for building the member list, and then communicating with members afterwards

Appreciate any thoughts!

RitchieTakayama

·
7 months ago
·
Reply
1

Great actionable advice.
Thank you 🙏🏻

Gladly stumbled upon this post as I was thinking about the best way to build a frictionless signup flow for my next project.

Product_Toni

·
8 months ago
·
Reply
1. 1
  
  Thanks, hope this helps. Since this article, I've had users complaining about the passwordless thing. Some prefer a password, so take that into account ;)
  
  romainsimon
  
  ·
  8 months ago
  ·
  Reply
  1. 1
    
    Thanks @romainsimon
    Did they explain why ? Is this because the feel "safer" having a password ? or is there some other reason ?
    
    Product_Toni
    
    ·
    8 months ago
    ·
    Reply
    1. 1
      
      Yes, that's exactly why. They feel safer with a password :D
      
      romainsimon
      
      ·
      8 months ago
      ·
      Reply
1

Additionally, use clear and prominent call-to-action buttons for signup and login actions. Use language that clearly communicates the action users will be taking, such as "Sign Up," "Login," or "Get Started." Ensure the buttons are visually distinct and easily clickable, enhancing the overall user experience. Finally, tracking plays a vital role in all the work you do... Use a best keyword rank tracker to measure your website performance in a short span of time instead of manual calculation... Then, by knowing your rank, you can have an effective plan for reaching your goal...Thank you..

Ashlyn_03

·
10 months ago
·
Reply
1
Hi @romainsimon, interesting take!

I believe you need to ask yourself first what is the goal of the sign up flow?. Based on the answer, there's different approaches to designing the flow.

If the answer is:
1. Optimise the number of users creating an account - then yes, this minimal flow is good.
2. Minimise the number of bots/fake accounts/unverified accounts - then this flow is very poor due to the missing email verification, passwordless sign up etc.
3. Optimise the number of users becoming active users - quite a poor flow due to the missing context during the sign up flow of what users can expect, optimising onboarding experience based on persona based segmentation questions etc.
I guess my point is that adding some friction to a sign up flow can be a good thing if you're optimising for another metric than just number of sign ups. Optimising for increasing activation or retention might need some added steps into your flow. I'm a huge fan of Product Led Growth onboarding in which the screens are extremely important to provide context to the user, educate them on how to use the platform, provide persona based onboarding, create viral loops by allowing them to invite more people etc.

Happy to connect and nerd out on the topic.
Cheers,
Amo 🍒
Amo

·
a year ago
·
Reply
1

Great tips. Love to see that you've implemented it on your own website too

kurby

·
2 years ago
·
Reply
1

Hello Guys,

I am not be able to Make post on IH(not sure why)

I have one question for IH community

Can i make it SAAS? or just free in first phase..

https://sampledataapi.com

simcdev

·
2 years ago
·
Reply
1

Absolutely love this.

I think a great general rule in product dev is:

Every second you save your customer positively correlates with the success of your product.

IndyDevDan

·
2 years ago
·
Reply
1

Great advices! Thanks!

grettabayron

·
2 years ago
·
Reply
1. 1
  
  You're welcome!
  
  romainsimon
  
  ·
  2 years ago
  ·
  Reply
1

I've done passwordless login for quite a few things I've built over the years, but found that larger companies are sometimes resistant for whatever reason, but I do love it as a user. The other thing is to allow authentication with third parties like google accounts, twitter, facebook etc...amazing how many people opt for those given the choice and it makes signup incredibly easy.

blunicorn

·
2 years ago
·
Reply
1. 1
  
  Yes third-party authentication is great. As for larger companies, I'm not sure they are so resistant to going passworldless?
  
  romainsimon
  
  ·
  2 years ago
  ·
  Reply
  1. 1
    
    Yeah really they are, it's dumb and it's not actually to do with the end user needs. Basically I've seen this in 2 separate companies I've worked with where the compliance team wouldn't let us use tools that only offered passwordless signup because their company policy was that you had to be able to to set a password for any tool you were using. You don't need to tell me how crazy that is 😂
    
    I think this is the same reason that Notion had to introduce passwords several years after launch as they tried to move up market https://www.notion.so/releases/2019-11-22
    
    blunicorn
    
    ·
    2 years ago
    ·
    Reply
1

Would this advice stand for both B2B and B2C? It strikes me there is a natural filter for B2B prospects if you are offering a valuable service and they don't want to give basic info. Welcome your thoughts. Best, V.

BigHireio

·
2 years ago
·
Reply
1. 1
  
  Yes it works for both. I you need more info to qualify B2B prospects you can ask them after the signup. (But in my experience you cannot force anything if a user does not want to give information he will just type junk)
  
  romainsimon
  
  ·
  2 years ago
  ·
  Reply
1

Great advices! Just one thought: if you don't put at least first name in a welcome email, won't some email services move it automatically to spam? I had this problem once. Also implementing a password is something that enterprise customers may look for but I might be wrong:)

msporna

·
2 years ago
·
Reply
1. 1
  
  This can be one of the factors, you are right, but it's not the only one and I guess Gmail is intelligent enought to see two emails are identical except the first name.
  I think the issue comes probably from your sender setup (where are you sending from, are you using a dedicated IP, did you setup SPF/DKIM/... properly, etc...)
  
  romainsimon
  
  ·
  2 years ago
  ·
  Reply
0

Adding tip to above tips: use e-mail verification API like bouncebadger.com to avoid fake/ non-existing/disposable/spam email addresses.
This way, you can save your domain/IP from getting bad reputation due to email bounce.

Cheers!

nitin_k

·
6 months ago
·
Reply
0

Teatime Results Draw takes place at 5:49 pm (UK time) from February to October, and 4:49 pm throughout the rest of the year. UK49s Teatime Results here: https://thabani.co.za/uk49s-results-today/

johmemily

·
2 years ago
·
Reply