Capturing the Device ID in a Universal Login

The Auth0 Universal Login does not allow customizing HTML templates. The client-side application can, however, provide authorization parameters. When using the Auth0 SDK for React Single Page Applications, the verosint_deviceid authorization parameters can be passed during the login event.

To use the library, add it to the project using:

npm install verosintjs

In the component that handles login, use the following pattern to generate the device ID:

  import { useAuth0 } from "@auth0/auth0-react";
  import { getDeviceId } from "verosintjs";
  ...
  
  const [verosintDeviceId, setVerosintDeviceId] = useState('');
  
  useEffect(() => {
    getDeviceId().then((id) => setVerosintDeviceId(id));
  }, []);
  
  const {
    user,
    isAuthenticated,
    loginWithRedirect,
    logout,
  } = useAuth0();

Invoke the loginWithRedirect function with the device ID, for example:

{!isAuthenticated && (
  <NavItem>
  <Button
    id="qsLoginBtn"
    color="primary"
    className="btn-margin"
    onClick={() => loginWithRedirect({
      authorizationParams: {
        verosint_deviceid: verosintDeviceId,
			}
    })}
  >
    Log in
  </Button>
  </NavItem>
)}