Login and Signup analytics events

We’re using auth0-react and want to fire some tracking events in our analytics platform, however we’re finding it challenging to figure out the most appropriate place for these events.

In particular we want to trigger a “Login” event and a “Sign up” event along with the userId and source; the “source” is the link they clicked on to login or sign up, e.g. ‘HOMEPAGE’ vs ‘CHECKOUT’

Initially I had tried this:

onRedirectCallback={appState => {
  history.replace(appState.returnTo || '/');
  window.analytics.track(
    'Login', // How do we determine if this was a 'Login' vs a 'Sign up'?
    {
      userId: '', // How do we get the user id here?
      source: appState.source // The link they clicked to login or signup
    }
  );
}}

However, there are two problems here:

  1. How do we know if the user signed up vs logged in?
  2. How do we get the user id here?

I then figured we could do this serverside in an auth0 action:

const onExecutePostLogin = async (event, api) => {
  const isSignup = event.stats.logins_count === 1;
  analytics.track(isSignup ? 'Sign up' : 'Login', {
    userId: event.user.user_id,
    source: '' // How do we get the source (i.e. which link did they login or signup from)
  });
};

However we have 1 problem here:

  1. How do we get the source in an action; it’s passed into the universal login page as appState.

Can anybody advise on the best way to do this?