LoginAndSecurity

Login and Security

We need to build a login and security system to support future enhancements to the site. It must support the Single-Page Application model used by the new React-based front-end UI.

Requirements

• Anonymous users can use the main site and cannot access any sensitive information
• Users can sign up for accounts and manage their own data:
  • Profile info (e.g. change email, change password)
  • Notifications
  • Favorite gages - "Watch list"
• Users can log in using credentials from third-party authenticators (e.g. Facebook, Google)
  • The email address associated with the third party account will be the email address we use for them
• Standard login/logout functionality
  • If a user selects logout, their browser must not be able to access their account (this is a potential issue with JWT depending on how the tokens are managed/stored)
  • "Remember Me"
    • Checkbox on create an login (checked by default)
    • No requirement to re-login for 3 years if checked otherwise session cookie that expires in 1 hr
  • Must enter password (or authenticate in current session) when changing profile information (Name, email, password)
• Users can be granted various levels of administrative access.
  • If possible, existing ASP.NET infrastructure (e.g. Role-based authentication via attribute decoration) should be usable for restricting access
• Revoking administrative access (or any other specialized rights) must take effect quickly (if not immediately).
• UI must have a simple way to know whether a given option (e.g. "Edit Gage Data") is available to the current user.

Possible Requirements

• Support multiple organizations and/or regions within a single database (e.g. run Snoqualmie Valley and Bellevue gage networks from the same database).
  • The alternative is simply to instantiate multiple sites (database, website, backend jobs). This potentially gives better granularity for budgeting/billing.
• Only a single login event is required to use both the old Admin site and the new UI
  • The alternative is just to require two separate logins; with "Remember Me", this may not be that much of a problem. Eventually, we hope to migrate all the Admin functionality to the new UI, so this is possibly a short-term issue.

Explicit Non-Requirements

• None?

Open Questions

Feature design questions:

• What are the details about login timeouts with and without "remember me"?
  • Details above
• What are our password requirements?
  • A: 8 chars
• Do we need to think about anything like two-factor auth? Email address validation?
  • A: We will need email validation and phone # validation when we start sending alerts
• Do we need to provide a "Remove my account" feature?
  • A: At least on the admin side.
• How are email addresses handled when a user does "Login with Facebook"? Can they change their email address on our system?
  • A: If they provide a password then they can change email address, but then no longer linked to Facebook until Facebook email address also changes(email address is link)

Todo

There is a proof-of-concept feature in place currently which uses JWTs and supports login via Google. This is what else needs to be done in order to fully implement the feature:

• Integrate with react-fz-client
• Login dialog styling
• Add Login-With-Facebook
• Add Login-With-Microsoft (P2)
• Build and style Create-an-account dialog
  • Password strength validation & feedback
  • Captcha?
• Build and style Edit-profile dialog (if nothing else, we need to let users change their email addresses)

Design Wireframes

• Login / Create

+---------------------------
|
| [ LOGIN WITH FACEBOOK ]     <-- Stylized buttons (white text on brand color background. small logo before "login" (p2)
| [  LOGIN WITH GOOGLE  ] 
|
| [   LOGIN WITH EMAIL  ]
|          or 
| [   CREATE ACCOUNT    ]
|
+--------------------------

• Create Account

+------------------------------------
| Create Account
|
|         Name: [________________]
|        Email: [________________]
|        Phone: [________________] (optional)
|              
|        Password: [________________]
| Repeat password: [________________]
| (must be at least 8 characters long)
|  
|     Remember me: [x]
| 
|             [ create ]
+------------------------------------

• Login

+------------------------------------
| Login
|
|           Email: [________________]
|        Password: [________________]
|                    _forgot password_ 
|     Remember me: [x]
| 
|             [ login ]
+------------------------------------

• Forgot password form

+------------------------------------
| Reset Password
|
|      Email: [________________]
| 
|             [ submit ]
+------------------------------------

• Forgot password response

+------------------------------------
| 
|           An email has been sent to
|           {email} with instruction for
|           resetting your password. If 
|           there is no matching account 
|           no email will be sent.
|
|             [ ok ]
+------------------------------------

• Edit Profile (direct user)

+------------------------------------
| Edit Profile
|
|         Name: [________________]
|        Email: [________________]
|        Phone: [________________] (optional)
|              
|        Password: [________________]
| 
|             [ update ]
+------------------------------------

• Edit Profile (social linked user)

+------------------------------------
| Edit Profile
|
| Linked to Facebook|Google account:
|         Name: {name}             <-- Can't change name or email
|        Email: {email}
|
|        Phone: [________________] (optional)
|              
|             [ update ]
|
+------------------------------------