User passport

Goal: Build a passport-style view that pairs a member’s identity and standing with the places they’ve checked in.
Prep time: ~10 minutes A passport has two halves: who the member is (profile, level, progress) and where they’ve been (their check-in history). Both read from the member’s OAuth token.

Off the shelf

Two components from @flynetdev/react cover both halves. UserPassport renders profile, level, and progress; CheckInFeed renders the member’s check-ins, newest first. Wrap them in one FlynetProvider with a FlynetMemberClient built from the member’s OAuth token — they fetch client-side under the read:profile and read:user_checkins scopes.

app/passport.tsx

"use client";
import { FlynetMemberClient } from "@flynetdev/core";
import { FlynetProvider, UserPassport, CheckInFeed } from "@flynetdev/react";

export function Passport({ accessToken }: { accessToken: string }) {
  const member = new FlynetMemberClient({ accessToken });
  return (
    <FlynetProvider member={member}>
      <UserPassport />
      <CheckInFeed />
    </FlynetProvider>
  );
}

From scratch

To assemble the passport rows yourself — or build them outside React — read both halves from FlynetMemberClient directly. The check-in feed embeds full venue context, so you rarely need a second call.

What you will use

GET /flynet/v1/users/me - profile (name, email, account status)
GET /flynet/v1/users/me/status - tier, level, and progress
GET /flynet/v1/users/me/check_ins - the member’s check-ins with embedded venue context

Code

import { FlynetMemberClient } from "@flynetdev/core";

const member = new FlynetMemberClient({ accessToken: process.env.ACCESS_TOKEN! });

const profile = await member.getProfile(); // name, email, accountStatus
const status = await member.getStatus(); // tier, level, progress
const { checkIns } = await member.listCheckIns({ pageSize: 50 });

const passport = {
  member: `${profile.firstName} ${profile.lastName}`,
  tier: status.tier,
  level: status.level,
  visits: checkIns.map((checkIn) => ({
    visitedAt: checkIn.createdAt,
    brand: checkIn.location.restaurant.name,
    neighborhood: checkIn.location.neighborhood?.name,
  })),
};

console.log(passport);

From the kitchen - Use the embedded location.restaurant from check-ins first. Only fetch a restaurant by id (with your X-API-Key) when you need brand fields the embedded object doesn’t carry.

Chef’s warning - Profile and check-ins both use the OAuth bearer token. Restaurant detail calls use X-API-Key instead — the two credentials don’t cross route families.

Next: Wallet badge - show wallet context alongside the passport.

Overview

Components

Appetizers

Mains

Specials

User passport

User passport

Off the shelf

From scratch

What you will use

Code

​User passport

​Off the shelf

​From scratch

​What you will use

​Code

User passport

Off the shelf

From scratch

What you will use

Code