Mastering Signup Systems: A Developer's Guide to Building Secure and User-Friendly Login Experiences

Nblocks
March 18, 2024

Users, Subscriptions and Feature control
- All in one place

Try Nblocks for free

We all do it, Signing up and logging in to services. According to Dashlane the average internet user has 250 online accounts. I don’t know how many I have but I know I have signed up for more than I actively use. 

Signup and login procedures have gone through very big changes the last few years in both user experience and security. In the early days a straightforward username, password, and then straight to app was enough. However, current standards have higher demands on our applications. Which in turn takes longer time to develop and maintain. 

I and Oscar have built 60+ applications during our 10 years of working together. And in this article we will guide you through the current expectations of users and the considerations for developers when crafting a signup and login system.

Our focus will primarily be on the necessary functionality, particularly in the contexts of B2B and B2C scenarios. While we will touch less on design and UI/UX specifics, our emphasis will be on the essential knowledge required before beginning the coding phase. We will delve into both the user-visible functionalities and the internal aspects relevant to your team, covering security features and more.

By the end of this article, you'll have learnt our best practices for implementing a signup flow and  you are ready to reason and plan the tasks to build a signup and login experience for your app.

A great signup experience for your users and great user management for you.

Signing up and logging in is probably the very first interaction your users have with your app. In this article we will touch related aspects such as roles, subscription management and user management thus covering a broader concept of the ‘Signup Experience’

Our end goals for the ‘Signup Experience’ is to:

  • Give users a smooth and secure way to log into our app. 
  • Ensuring the security of our users. Which includes the technical aspects of protecting our users information as well as building a sense of trust
  • Managing users efficiently. After users have signed up we need functions in place to manage their accounts and help them with potential issues or inquiries they may have.
  • An efficient implementation that is easy to maintain. A great implementation will benefit users and make it easy for developers to maintain the code, keeping the security up to date, and evolve with new security protocols and authentication methods. 

Now let’s have a look at what is needed to reach our goals.

What is needed from a Signup Experience today

At its essence, the processes of signing up and logging into an application may seem straightforward. Users need to register to establish their identity within the app before they can log in and use it. However, from a developer's perspective, crafting this experience involves numerous considerations to ensure it is both seamless for the user and upholds high security standards.

The baseline expectations for signup processes have evolved significantly from the simple account name and password setup of the past. Modern best practices include:

  • Sign-Up and Verification: The verification step is crucial to prevent issues like bot registrations, fake accounts, and account identity hijacking.
  • Being able to leave and pick-up in the middle of sign-up process
  • Handling errors with clear and simple instructions. Or eEven better, just do what you instruct the user to do. For example, if I try to login but do not have an account. Send me straight to the account verification step of your signup flow.
  • Multiple Sign-Up Options: Providing various methods for signing up is essential. A mere password-based approach is no longer sufficient. Incorporating options to sign up via social account providers, such as Google, Facebook, Apple, or Microsoft, not only enhances security but also lets users get started with one click. This is especially beneficial in B2B contexts, where a company admins can manage user accounts in one place.
    You need to also consider newer and more secure alternatives such as Passkeys. And if you have Enterprise users you need to consider SSO integrations.
  • Login procedure. A very obvious step but this is what will protect your app in the end. You need to consider protecting both the frontend and backend.
  • User Account Management: This includes functionalities for a user to reset passwords and account deletion options all by themselves.
  • Post-Login User Management: You and your team will need to manage users post-login is critical. This encompasses handling their payment plans, roles, and equipping customer success teams with the necessary tools for user support.
  • Role management. So your users can limit access to functionality for different roles in their company.  This element is very important for both protecting your users and your app and limiting data access. Role management  needs consideration in the whole stack, from the frontend to your backend endpoints, and when you pull data from your database. 
  • Subscription and Payment Integration: Most apps aim for monetization, requiring users to choose payment plans and enter credit card details, and you will need to integrate with a payment provider as well as building logic for selecting plans and managing them.
  • Compliance with Regulations: Compliance is a vital aspect, especially in different regions and you need to consider laws such as GDPR, CPRA and DPDP depending on the regions you operate in. This is something that has to be embedded in your development process and your software design. 

All of these elements require knowledge of security protocols, and you will need to read up on a lot of different documentation before you can start implementing them. And that is just the start. You will need to regularly review the security and stay up to date with possible exploits that are identified and ways to prevent them. For some languages and frameworks you might find open source software that will help you out. Make sure that they are regularly updated and that there is a community that can help out when you get stuck.
Expect to have to learn the package you use and learn the ways you can modify it to fit your needs.
You will also need to put in some time on the backlog to update it, which might sound straightforward, however, most packages are tied to a framework and in turn might require a framework update that introduces breaking changes. We have experienced this numerous times in different tech stacks and it takes a lot of painful time to remedy all the obscure bugs due to breaking framework changes. 

Protocols and Technologies for User management

There is some language and framework agnostic knowledge you will need to learn and stay up to date with. 

For authentication and authorization these protocols and technologies are the essentials

  • OAuth: This open standard is used when applications want to access another application on behalf of a user.
  • SSO (Single Sign-On): A service that permits a user to access multiple applications with only one set of login credentials.
  • SAML (Security Assertion Markup Language): SAML use (XML) for standardised communications between the identity provider and service providers. Also commonly used in enterprise applications.
  • JWT (JSON Web Tokens): A compact way of securely sending information and used for authorization.

There are many authentication methods and you will need to look into how they work. Most of them are based on a standard so knowing your fundamentals makes this step easier

  • You have all the different authentication methods from the major providers such as Microsoft, Apple, Google and Facebook.
  • Multi factor authentication(MFA) by sending a One Time Password (OTP) to another device. There is so many different ways to do this for example with an authenticator app 
  • Passkeys. The new kid on the block. The hope is that this will be the beginning of the end of passwords

There are many more than i listed here but these three points can be considered essentials to know

Account Verification Tools:

  • Email Service Integration: You need to integrate with a reliable email service for account verification. Ensure that your emails are trusted and delivered effectively to avoid ending up in users' spam folders.
  • Text Messaging Service: You can also use text messaging for account verification and OTP:s  

Roles and permissions

  • Learn about the concept of Role based access control, RBAC. There are other methods but RBAC is a good entry point to start for authorising users 

There are implementations of all of these things for various languages and frameworks. Take your time to explore them and try them out and see if they fit your needs. Sometimes you need to combine a few packages and stitch together some code to get it to the level you wish for

Getting inspiration from other peers

There are a lot of great examples we can draw inspiration from. We will take a look at three examples that cater to different types of audiences and see if there are some common elements and learnings that we later can apply to a unique context .

  • Netflix: A household brand serving the everyday consumer. A typical B2C product. Netflix's login process is uncomplicated, requiring just a username and password. Users then select a payment plan and enter their credit card details. Notably, Netflix skips account verification due to the inclusion of credit card information.
  • Canva: Popular among individual creators, enterprises, and large companies. An app that has a B2B focus but caters to a wide array of businesses.  Canva adopts a modern signup approach. It offers multiple signup options, culminating in an account verification step. Once inside the app, the onboarding process continues, requesting additional user details. Canva also allows users to add new team members post-login.
  • Twilio. Used by us developers to send text messages. In Twilios signup process you have to verify your account over mail and phone, you will then receive a recovery code and then you get the option to create workspaces. After this you immediately go to the onboarding phase. 

At their core, these services share similarities and have adapted it to their context. Netflix asks for payment upfront while Canva and Twilio let you try out their apps in trials or limited forms. All sign ups require minimal information and have different ways to get user accounts validated.
Canva provides the multiple login options, twilio offers two and Netflix relies only on password based login. The rationale for netflix could be cost savings and being able maintain a high standard with only password based login. It could also be that they have challenges associated with adding new methods into a big established system. While this isn't a necessity, for smaller or less recognized brands, providing multiple login options can enhance both security, user convenience and save you loads of development time. 

The key takeaway is that all these services offer a smooth user experience, despite the underlying complexities in their implementation. The ideal approach for you would be to have the flexibility to try out different approaches without the added development overhead. 

After exploring these examples, you'll likely pay more attention to the signup processes of different services, appreciating the nuances in their design and draw inspiration that you can apply to your context.

Additional considerations when designing a signup Experience for B2B

When developing an app or service tailored for businesses, several key factors require your attention, especially in the realm of user authentication and management.

  • Using alternative login options that businesses use: For business applications, it's advisable to integrate login options from Google and Microsoft. Many businesses rely on tools from these tech giants, and offering a unified login experience across different services can significantly streamline their processes. This unified approach is particularly beneficial when employees transition between jobs, as it simplifies account management for company administrators.
  • Addressing Subscription Fatigue: Even a small business has 20+ services that are being used. Managing users individually in all of them quickly becomes an administrative burden we call 'Subscription Fatigue'.  Giving your client options to use login alternatives will increase the appeal of your app and reduce their pain.
  • Enterprise-Level Requirements: Large enterprises often have specific demands, such as the need for SAML (Security Assertion Markup Language) or SSO (Single Sign-On). Incorporating these features can be a decisive factor for these enterprises when choosing your service. A minor company might feel the pain of subscription fatigue but a company of 1000 employees will not be able to manage unique accounts and passwords for all their employees
  • Customization for B2B Clients: It's important to acknowledge that not all B2B users will sign up or make purchases directly via the web. Larger clients may require custom contracts and personalised management. You will need  ways to create accounts  and manage them for your clients.
  • Flexibility in Security Measures: Different clients may have varying security requirements. For example, one client might insist on Multi-Factor Authentication (MFA), while another may require SSO. Being able to cater to these diverse needs will help you meet your clients needs.
  • Role management and access control. Employees will need  different roles that authorise their  access to features and data in your app. The needs for different types of roles will be much greater in a B2B centric application. Roles using RBAC is one approach to get this done. 

In summary, when targeting a business audience, it is essential to offer a range of login options, cater to specific enterprise requirements, and provide flexibility in both security measures and customer management. These considerations will not only enhance the user experience for your B2B clients but also position your app as a versatile and accommodating solution in the business market.

Additional considerations when designing a signup Experience for B2C

A B2C application might not have as many complex needs as a B2B application. The important aspect is that your users should be able to do easy things by themselves, such as resetting passwords, managing their users (if it is a group or team based application) and also deleting their account. Roles might be needed in certain situations but do not have the same complexity as the B2B scenarios.

Alternative login options should be provided from brands consumers know and might use in their life , such as Apple and Meta.

Compliance Considerations: While compliance is a pillar in both B2B and B2C scenarios, its impact on decision-making processes differs. In B2B environments, compliance often plays a significant role in a client's choice of services. In contrast, B2C users might not actively consider compliance, but this doesn't diminish its importance. Adhering to regulatory standards is not only about doing right by your users and treating them well but also about safeguarding your business. Neglecting compliance can lead to serious repercussions down the line.

Lastly, smoothness and scalability should not be compromised. Your volume of users is much higher in B2C applications and you need to take that into consideration from day one.

Summary

Having built 60+ services I have noted that crafting a great signup experience demands a level of ambition that is higher than ever before. And the knowledge shared in this article highlights a lot of the mines that I have repeatedly stepped on. There are many things to consider and it can potentially consume more time than developing core app features itself. Whether you're starting a new project or levelling up your current system, These best practices for user management and  Signup Experience is something you can draw inspiration from when moving on to the fun part, CODING 🙂

Share this post

Join the nblocks community

Unleash the power of nblocks powerful features today