mise-mobile

Expo (React Native) app for mise. Shares mise's API contract: src/api.gen.ts is generated from mise's openapi.json, consumed with the same openapi-fetch pattern the web app uses.

Status: scaffold. Login (Authentik OIDC/PKCE) → item list → item detail (photo hero + facts). It can't talk to the API yet — two prerequisites below.

Prerequisites (do these before the app can fetch data)

1. Backend: a token-auth API surface on mise

The web app is served behind Caddy forward_auth, which a native app can't satisfy. mise needs a second surface (a different hostname, e.g. mise-api.basha.cloud, without meta.auth = "forward") where mise itself validates an Authentik bearer token and derives identity from its claims instead of the x-authentik-* headers. (Not built yet — this is the next backend task; tracked in mise's PRD as the P3-FR-4 authenticated endpoint.)

2. Authentik: an OIDC application for the app

In the Authentik admin:

1. Providers → Create → OAuth2/OpenID Provider
   • Client type: Public (PKCE; no client secret in the app)
   • Redirect URIs: misemobile:// (standalone/dev-client). For Expo Go dev you'll also need the proxy/exp:// URI that expo start prints — add it when testing.
   • Signing key: default; Scopes: openid, profile, email
   • Add a property mapping / scope that puts the user's groups in the token (so mise can enforce the mise group gate).
   • Copy the generated Client ID.
2. Applications → Create, name mise-mobile, link the provider. The slug gives the issuer: https://sso.tamjid.io/application/o/<slug>/.

Then fill src/config.ts with apiBaseUrl, issuer, and clientId.

Run (dev)

npm install            # already done in this scaffold
npx expo start         # scan the QR with Expo Go on your iPhone (on wifi/Tailscale)

You must be on the LAN or Tailscale for the app to reach *.basha.cloud.

Regenerate the API client

Whenever mise's backend changes shape:

npx openapi-typescript ../mise/frontend/openapi.json -o src/api.gen.ts

Layout

App.tsx                 auth gate + native-stack navigation
src/config.ts           API base URL + Authentik OIDC config (fill in)
src/auth.ts             token storage (SecureStore)
src/api.ts              openapi-fetch client (attaches bearer token) + types
src/api.gen.ts          generated from mise's openapi.json
src/screens/            Login / Items / ItemDetail

Not done yet (next)

• Backend token surface + Authentik app (above) — the unblocker.
• Add-photo from the app (camera / library upload).
• Status change, filters, restock — the web app has these; port as needed.