Passport, sign-in and the storefront around a Site

What the storefront adds around your Site

The Passport

• It’s the visitor’s account. The member’s account, such as their orders and subscriptions, opens from it, so your Site doesn’t build any of them.
• It lists the member’s Sites. Its sites menu lists the Sites the member can open, including any your company pinned for them. See Show a Site to members.
• It holds the sign-out. A Site can’t sign anyone out. The visitor signs out in the Passport, and confirms it there.

Sign-in carries over from the storefront

import { fluid } from "@fluid-app/sites";

const me = await fluid.auth.me();
if (me.viewer) {
  greeting.textContent = `Welcome back, ${me.viewer.name}`;
}

How it stays secure

• Your Site never receives the visitor’s Fluid credentials. It can’t read the storefront’s sign-in cookie or any Fluid token, and neither can a script you add to your Site.
• The storefront hands your Site a short-lived session. It’s scoped to that one Site and that visitor, and the SDK renews it while the page is open. The SDK sends it only to your Site’s own host.
• Every call acts as the visitor. fluid.api and ctx.fluid.api reach only that visitor’s own data, within the scopes your Site declares. A guest’s call goes as a guest.
• A private Site’s files stay private. Its pages, scripts and functions aren’t served to someone the Site doesn’t admit, even when they open its host directly.
• Sign-in takes a click. fluid.auth.signIn() sends the visitor to the storefront’s own sign-in only from a click, so a Site can’t redirect visitors to it on load.

Hide the floating cart and lead-capture buttons

{ "fairshare": "hidden" }

Open the Passport from your own button

import { fluid } from "@fluid-app/sites";

function AccountButton({ signedIn }: { signedIn: boolean }) {
  return signedIn ? (
    <button type="button" onClick={() => fluid.auth.signOut()}>
      My account
    </button>
  ) : (
    <button type="button" onClick={() => fluid.auth.signIn()}>
      Sign in
    </button>
  );
}

• signOut() signs nobody out. It opens the Passport, where the visitor can sign out and confirm it.
• It needs a signed-in visitor. A guest has no Passport, so the call does nothing for a guest. Send a guest to fluid.auth.signIn() instead, as above.
• It needs the storefront. Outside a storefront, such as on the Site’s own host, it does nothing and logs a warning.

What the storefront loads, and what it costs your Site

• Your Site paints on its own. It loads in its own frame, in parallel with the storefront’s scripts. If the storefront’s scripts are slow or fail, your Site still opens and works. Only the parts they draw, such as the Passport and the cart, are missing.
• The SDK is yours to load. The storefront doesn’t add anything to your Site’s own pages. Import @fluid-app/sites in your build, or load /_fluid/sdk/v1/sites.js from your Site’s own host as the plain HTML guide shows. Load it as a module, so it never blocks your first paint.
• A call waits for the sign-in, briefly. A call made before the SDK has connected to the storefront waits for it, for up to three seconds, then goes as a guest.