Skip to main content

Using Upollo to detect account sharing and repeated trials with auth0 & React

ยท 3 min read

Auth0 is a helpful tool for managing authentication on your website.

upollo auth0

However whilst Auth0 will let people login to accounts for your site it can't tell you much about the the people behind those accounts. It can't tell you if Alice creates a new account every month for to get a free trial every month without ever paying. It also won't help you discover that Bob and Dave have one account that they pay for but share the password to avoid paying for two accounts.

With Upollo you can detect these events and nudge users onto the right path. You can detect that Alice is on her 10th free trial, stop giving her more, and convert her into a paying customer. You can tell Bob and Dave that you know they are sharing an account which is against your policy and get them to upgrade their account.

To learn more about the opportunities in converting repeat trial users and account sharers see Turn Repeated Trials Into Growth and Grow By Understanding Account Sharing

Detecting account sharing and repeated trials from Auth0

This article will focus on web applications with React but the same techniques can be applied to other frameworks and mobile apps as well.

Let's assume we want to add account sharing detection to the Auth0 sample React app. First we want to make successful logins redirect to a login success page that may prompt the user to upgrade their account or apply a free trial if they are eligible. To perform this redirect add a redirect url to loginWithRedirect() in the places it is called.

loginWithRedirect({
redirectUri: `${window.location.origin}/login-success`,
});

You will need to modify the Allowed Callback URLs in the Auth0 dashboard to include the url you are redirecting to.

Now add the route for the new page in App.js that will be loaded after logging in.

<Route path="/login-success" component={LoginSuccessPage} />

Finally now we can implement the login success page to assess the use that has been logged in and prompt for account upgrades or add/remove any free trials by querying Upollo.

import { useAuth0 } from "@auth0/auth0-react";
import { EventType, FlagType, UpolloClient } from "@upollo/web";
import { useEffect } from "react";
import { useHistory } from "react-router-dom";

const LoginSuccessPage = () => {
const { user, isAuthenticated } = useAuth0();
const history = useHistory();

// Query Upollo when the page loads
useEffect(() => {
// Auth0 should be authenticated at this point.
if (isAuthenticated) {
const upollo = new UpolloClient("YOUR_UPOLLO_API_KEY");
upollo
.assess(
{
userEmail: user.email,
userName: user.name,
userImage: user.picture,
userPhone: user.phone_number,
},
EventType.EVENT_TYPE_LOGIN_SUCCESS
)
.then((identifyResponse) => {
const flagTypes = identifyResponse.flags.map((flag) => flag.type);
if (flagTypes.includes(FlagType.ACCOUNT_SHARING)) {
// The user was account sharing let them know
// they should create their own account.
}
if (flagTypes.includes(FlagType.REPEATED_SIGNUP)) {
// The user has already signed up previously,
// don't offer a free trial.
}
// Continue on now that the user is logged in
history.replace("/");
});
}
}, []);
return null;
};

export default LoginSuccessPage;

For an even more secure solution, you can repeat the same checks server side by using the Upollo token and one of our server side libraries to validate the flags on your server.

If you are interested in this space and would like to hear more, please sign up at upollo.ai/app/login and follow us on LinkedIn or Twitter.

Get started for free
Upollo
Upollo logoUpollo
Copyright 2022