I Robot - Sitecore JSS visitor identification

While working on a Sitecore JSS solution that interacts with our Sitecore solution that hosts some api endpoints for us and add .net session state to cache some user bound data we noticed some unexpected behavior with respect to the session state on our test environments. Our session was configured to expire after 20 minutes of idleness, but no matter what our behavior was: idle or active our session seem to be reset much faster.
After much debugging we couldn't find anything wrong with our own code, so we started considering options where maybe Sitecore could influence this.
One of the suspects was Sitecore's robot detection mechanism that had given us trouble around session expiry in the past.
We started by disabling robot detection. And this indeed seemed to resolve our session disappearing issue. So it was confirmed, we were identified as a robot.



Further information proved that indeed, when classified as a robot visitor, Sitecore analytics settings set the session expiry to 1 minute, which explains our disappearing session data.

Thanks to the awesome community, we got suggestions to enable 'VisitorIdentification' on our application. We didn't do this before as we were not actively using analytics in our solution yet, and were using a XM only configuration.
Enabling VisitorIdentification is something that is recommended to be turned off for XM only configuration according to the current JSS sample apps.
But as it turns out, the VisitorIdentification component exists to actually identify the difference between a human and a robot. The js file it references detects for example mouse movements on the screen, and uses that information to classify the user to not be a robot.

So if you use session state, and maybe it is just always a best practice, as I cannot think of scenario's where you want to risk these side effects, to add the visitor identification component to each of your solutions.

In Sitecore JSS to add the visitor identification component take the following steps (I used Angular, but I imagine for React or Vue, steps are similar):

1. In your routing module ensure the VisitorIdentificationComponent is imported
2. Ensure the VisitorIdentificationComponent itself as it is bundled into the Angular sample app is part of your app
3. Add the component to your layout: <app-visitor-identification></app-visitor-identification>

And there you go, now you will no longer be wrongly identified as a robot.
Alternative approaches would be to add your ip-address ranges where you would be testing your application from into the ExcludeRobots config.