Handling registration and login on client and server

Upollo supports both client and server integrations help you tailor what you offer to users, and drive the best outcomes.

The following end-to-end example shows how you can use Upollo's client and server APIs to validate registrations and logins, distinguish genuine users from users attempting repeated free trials or sharing accounts, and then gracefully upsell where appropriate.

The example consists of a web client and backend server:

• The web client uses Upollo's client-side API to validate emails and passwords, as well as send user events to Upollo to enable analysis and insights.
• When a user tries to register, the client sends a registration request to the server, which then uses Upollo's server-side API to determine if the registration attempt is a genuine new user, or someone trying to get a repeated free trial.
• When a user tries to login, the client sends a login request to the server, which then uses Upollo's server-side API to determine if the login attempt is a genuine user, or someone sharing an account.
• The server uses Upollo's analysis and insights to determine if clients should upsell a product to users.
• Based on the server response, clients show a tailored message to the user.

Note that the end-to-end example is meant to illustrate how to use Upollo's APIs to ehnance your own applications, and so many critical parts of a real-world application (such as persisting/fetching account information and authentication) are ommitted for brevity.

Prerequisites

The steps below assume you:

• Are already signed up for Upollo at app.upollo.ai/login and upgraded to the Growth plan.
• Understand the basics of sending an event to Upollo.

Getting the code

Check out the examples code repository at upollo/examples:

git clone https://github.com/upollo/examples

The following assumes that you are in the examples/end_to_end_demo/ directory.

The example code contains 4 directories:

• server: a backend server written in Node.js
• server_go: a backend server written in Go
• server_python: a backend server written in Python
• web: web client written in React

The 3 servers expose the same API are and functionally equivalent: use whichever one you are most comfortable with.

Running

Step 1: start a server

See the README in the chosen server's directory for instructions on how to start it.

E.g. see server_go/README.md to start the Go server.

Step 2: start the web client

See the README in the web directory for instructions on how to start the web client.

Once started, the registration page is at http://localhost:3001/.

How it works

Client

The client is written in React and has 3 main functions:

• Register: users enter an email and password to register a new account
• Login: users enter an email and password to login to their account
• List devices: lists the devices Upollo has associated with the user

Server

The server handles the following requests:

• register: checks if the user is a genuine new user, and responds with the type of offer clients should show (free trial vs a nudge to paid subscription)
  • requires: email and eventToken
  • Note that a password is not sent because the demo doesn't actually create accounts
• login: checks if the account is being shared, and responds with the type of message clients should show (successful login vs gentle warning that the account is being shared)
  • requires: email and eventToken
  • Note that a password is not sent because the demo doesn't actually authenticate

The following requests are handled by the server for illustrative purposes, but are not curently called by the client:

• listDevices: lists the devices the given user has logged in with
  • requires: userID
• createChallenge: challenges the user to provide more identifying information (e.g. phone SMS code or WebAuthn login)
  • requires: phoneNumber

Email and password validation

The registration page contains email and password inputs. The client performs email and password validation by calling Upollo's checkEmail and checkPassword APIs each time the user types in the input boxes. Note that the checkEmail, checkPhone and checkPassword APIs are optimized for speed and designed to be called on input changes, such as keystrokes. See web/components/auth_form.js for more details.

If an email address is part of a company, the CheckEmailResponse returned from checkEmail additionally contains information about the company, such as the name, size, and industry. In this example, the company name is used tailor the product messaging for users who are attempting a repeated trial. See upollo/userwatch-proto for more details on the response messages, and web/pages/offer/[offer].js for how the response data is used to tailor a message.

Registration flow

When the user clicks the 'Register' button:

1. The client makes a call to Upollo's track API with an EVENT_TYPE_REGISTER to let Upollo know that the user is attempting to register
2. Upollo does some analysis, and returns an eventToken that can be used by the server to access the analysis information.
3. The client calls the server's register API with the eventToken and the user's email.
4. The server fetches the analysis information by calling the Validate API with the eventToken.
5. The server uses the analysis information to decide whether or not the user is genuine, and sends back a boolean, upsell, to indicate if clients should try and upsell a product to the user
6. Clients then tailor the registration message based upsell:
   • Free trial offer: the user is new and receives a free trial
   • Nudge to paid subscription: the user is trying to get a subsequent free trial, and so we suggest they sign up to a paid offering
7. If the registration is successful, clients also call Upollo's track API with EVENT_TYPE_REGISTER_SUCCESS

See web/pages/index.js and web/components/auth_form.js for more details.

Login flow

Similar to the registration page, the login page also has a username and password input, but for brevity, input validation is skipped.

When the user clicks the 'Login' button:

1. The client makes a call to Upollo's track API with an EVENT_TYPE_LOGIN to let Upollo know that the user is attempting to login
2. Upollo does some analysis, and returns an eventToken that can be used by the server to access the analysis information.
3. The client calls the server's login API with the eventToken and the user's email.
4. The server fetches the analysis information by calling the Validate API with the eventToken.
5. The server uses the analysis information to decide whether or not the user is genuine, and sends back a boolean, upsell, to indicate if clients should try and upsell a product to the user
6. Clients then tailor the login message based upsell:
   • Welcome back: the user is genuine
   • Nudge to team subscription: the user's account has been used by multiple people, and so we suggest they sign up to a team-based offering
7. If the login is successful, clients also call Upollo's track API with EVENT_TYPE_LOGIN_SUCCESS

See web/pages/index.js and web/components/auth_form.js for more details.

Conclusion

Combining Upollo's client and server APIs can greatly enahnce your application: email and password validation can be done in realtime, and valuable user insights can be securely accessed on the server to help you convert users into happy, paying customers.

Want to learn more? Check out the API reference or our blog for best practices and tips on repeated trials and account sharing.