Pattern
Login & Register
Register and auth users before access the system
Status component contains a list of checks and completeness that has been tested and owned by each component
The login and register pattern is a general login process flow. in which there are several pages, such as the register page, forgot password and set new password. The minimum login process consists of a user account (username) and password so that users can access the system or simply use services from the website or app. Along with the development of technology, users can log in in various ways. Starting from the most common, enter your username and password, up to using mail, cell phone numbers, and social media that have been integrated into the system.
- Case : Mobile Number as Primary Key
- Case : Username as Primary Key
- Case : Email Address as Primary Key
- Case : Telkom (NIK) as Primary Key
- Case : Third Party (SSO) as Primary Key
Case : Mobile Number as Primary Key
This pattern is the most recommended considering the principle of mobile first, where currently users already have a mobile number. It will provide faster clarity, simple, and secure for users . There is no mechanism for forgetting a mobile number, other than contacting customer service. However, it’s better if combined with email as a secondary key to send verification to email when the user forgets the mobile number.
User Story : As a website user, I want to log in using a mobile number, so that once my mobile number is verified I can log in easily.
- Flow starts after the onboarding process
- Language used is in English
- Primary key is the mobile number
- Provide the appropriate verification process for the mobile number login option
- Provide negative case options (input error, etc.) in the flow if needed
- Provide contact us if there are problems in the login, registration or verification process
Pros, Cons & Do, Don’t
Pros : Simple login and registration process & have an alternative method of otp delivery (whatsapp if any)
Do
Use this, if the product wants to make Mobile Number is Primary Key, but doesn’t require email as a secondary key
Cons : There is no mechanism for forgetting the mobile number, other than contacting customer services
Don't
Don’t use this, if the product wants to make Mobile Number is Primary Key and Email is Secondary Key,
Case : Username as Primary Key
This pattern will provide convenience in the login and registration process. There is no pre-verified account (low level of security) and no mechanism for forgetting a username, other than contacting customer service. However, it’s better if combined with email or mobile number as a secondary key to send verification to email when the user forgets the mobile number.
User Story : As a website user, I want to log in using a username, I can log in easily.
- Flow starts after the onboarding process
- Language used is in Bahasa
- Primary key is the username with password for login verification
- Provide negative case options (input error, etc.) in the flow if needed
- Provide contact us if there are problems in the login, registration or verification process
Pros, Cons & Do, Don’t
Pros : Simple registration process
Do
Use this, if the product wants to make Username is Primary Key, but the product has most types of users who don’t prioritize email or mobile number as the primary key
Cons : Low level of security, no pre-verified account & without mechanism for forgetting the username, other than contacting customer services
Don't
Don’t use this, if the product has most types of users who have an email or mobile number as the primary key, verification is very important for security
Case : Email Address as Primary Key
Almost all mobile devices in the world use email as the primary key and email is also used as a medium of communication that is continuously used today, by using this pattern the security factor would be better maintained. It will provide faster clarity, simple, and secure for users . There is no mechanism for forgetting a mobile number, other than contacting customer service. However, it’s better if combined with mobile number as a secondary key to send verification to email when the user forgets the email.
User Story : As a website user, I want to log in using a mobile number, so that once my mobile number is verified I can log in easily.
- Flow starts after the onboarding process
- Language used is in English
- Primary key is the mobile number
- Provide the appropriate verification process for the mobile number
- Provide negative case options (input error, etc.) in the flow if needed
- Provide contact us if there are problems in the login or verification process
Pros, Cons & Do, Don’t
Pros : Secure and become a 2-step security alternative when combined with other secondary keys.
Do
If the product wants to make email as the primary key with an economical OTP verification method, could combine with mobile number as secondary key for better option and give users control and must implement stay login system to avoid users being asked for an OTP email continuously every time they call the application.
Cons : Broken login and registration journey, because user would be directed to see their OTP on email and there is no autofilled mechanism given for this method, users being asked for an OTP email continuously if not implement stay login mechanism. Could be pain point and if a user's email is hacked, it will most likely be a security vulnerability for the product.
Don't
Avoid using it if the primary key is mobile number. If the email is used as a secondary key, then it’s enough to provide an email verification link and then continue to use the OTP via the mobile number for a better security factor, using it if email is treat as username that combined with password/pin and avoid using it if the same email is used within login/register by Google.
Case : Telkom (NIK) as Primary Key
This pattern provides easy login for Telkom’s internal ecosystem. Does not have a registration mechanism and a solution for forgetting passwords, everything is done in the main Telkom Portal application with NIK.
User Story : As a website user, I want to log in using NIK, so I don’t need to create another account anymore.
- Flow starts after the onboarding process
- Language used is in English
- Primary key is the NIK
- Provide negative case options (input error, etc.) in the flow if needed
- Provide contact us if there are problems in the login process.
Pros, Cons & Do, Don’t
Pros : Secure and easy login for Telkom’s internal ecosystem.
Do
If the end user of the product is a Telkom employee with a NIK and could combine with other key as secondary key for better option and give users control.
Cons : Does not have a registration mechanism and a solution for forgetting passwords, everything is done in the main Telkom Portal application.
Don't
Avoid using it if the product does not require a data connection to Telkom's internal ecosystem.
Case : Third Party (SSO) as Primary Key
This pattern provides convenience in logging in with various social media accounts as single sign on (SSO). Use it when the product does not require user-specific data and emphasizes user acquisition.
User Story : As a website user, I want to log in using a social media account that I have, so I don’t need to create another account anymore.
- Flow starts after the onboarding process
- Language used is in English
- Primary key is the Social Media Account
- Provide the appropriate verification process
- Provide negative case options (input error, etc.) in the flow if needed
Pros, Cons & Do, Don’t
Pros : Easy login for end-user.
Do
If the product does not require user-specific data and emphasizes user acquisition and could combine with product primary key to gather specific information.
Cons : Not all data can be obtained except by adding an intercept page to retrieve primary data from users.
Don't
If the product is used only for certain groups and you want to maintain super tight security.