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.jsserver_go
: a backend server written in Goserver_python
: a backend server written in Pythonweb
: 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
andeventToken
- Note that a password is not sent because the demo doesn't actually create accounts
- requires:
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
andeventToken
- Note that a password is not sent because the demo doesn't actually authenticate
- requires:
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
- requires:
createChallenge
: challenges the user to provide more identifying information (e.g. phone SMS code or WebAuthn login)- requires:
phoneNumber
- requires:
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:
- The client makes a call to Upollo's
track
API with anEVENT_TYPE_REGISTER
to let Upollo know that the user is attempting to register - Upollo does some analysis, and returns an
eventToken
that can be used by the server to access the analysis information. - The client calls the server's
register
API with theeventToken
and the user'semail
. - The server fetches the analysis information by calling the
Validate
API with theeventToken
. - 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 - 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
- If the registration is successful, clients also call Upollo's
track
API withEVENT_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:
- The client makes a call to Upollo's
track
API with anEVENT_TYPE_LOGIN
to let Upollo know that the user is attempting to login - Upollo does some analysis, and returns an
eventToken
that can be used by the server to access the analysis information. - The client calls the server's
login
API with theeventToken
and the user'semail
. - The server fetches the analysis information by calling the
Validate
API with theeventToken
. - 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 - 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
- If the login is successful, clients also call Upollo's
track
API withEVENT_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.