Maintaining Experience Continuity

Experience Continuity in the context of Flagship refers to the ability to maintain a consistent user experience across different sessions and platforms, even when a user transitions from an anonymous to a logged-in state.

Let's consider a basic scenario to understand how things work:

1. Your visitor arrives on your app for the first time.

We need to initialize the visitor but since we don't know anything about this visitor, we'll create a random visitor id or let the SDK do it for us. You can also specify some visitor context if necessary.

const visitor = Flagship.newVisitor({
  context: { key: "value" }
});

import React from "react";
import { FlagshipProvider } from "@flagship.io/react-sdk";

const App = () => (
  <>
    <FlagshipProvider
      envId="YOUR_ENV_ID"
      apiKey="YOUR_API_KEY"
      visitorData={{
        id: null, // or remove this line
        context: {
          // some context
        },
        isAuthenticated: false, // set false for anonymous visitor
      }}
    >
      {/* [...] */}
    </FlagshipProvider>
  </>
);

Here, we don't set the visitorId property, so the SDK auto-creates an id for our visitor.

Regardless of how it has been set, the actual visitor id will be what we call the anonymous id.

2. Your visitor is signing in.

To inform the SDK about this status change, you'll have to call the authenticate function which takes the new visitor id, which may from your database, as an argument.

// Example 
// You fetch the visitor_id from your DB
// let visitorId = db.getVisitorId();

visitor.authenticate(visitorId);

// Since your visitor has changed (is now logged-in),
// it is recommended calling the fetchFlags method just after

await visitor.fetchFlags()

import React from "react";
import { FlagshipProvider } from "@flagship.io/react-sdk";

const App = () => (
  <>
    <FlagshipProvider
      envId="YOUR_ENV_ID"
      apiKey="YOUR_API_KEY"
      visitorData={{
        id: "AUTHENTICATED_ID",
        context: {
          // some context
        },
        isAuthenticated: true, // set true for authenticated visitor
      }}
    >
      {/* [...] */}
    </FlagshipProvider>
  </>
);

The visitor is updated as authenticated, keeping the previous variations that are still matched and thus gives you the same flags as before being logged in.

3. Your visitor decides to sign out.

If you want to keep the same visitor experience, then you should do:

visitor.unauthenticate();

// Since your visitor has changed (is now logged-out),
// it is recommended calling the fetchFlags method just after

await visitor.fetchFlags();

import React from "react";
import { FlagshipProvider } from "@flagship.io/react-sdk";

const App = () => (
  <>
    <FlagshipProvider
      envId="YOUR_ENV_ID"
      apiKey="YOUR_API_KEY"
      visitorData={{
        id: null,
        context: {
          // some context
        },
        isAuthenticated: false, // <--- back to false
      }}
    >
      {/* [...] */}
    </FlagshipProvider>
  </>
);