Identify users
Studio works with anonymous installs by default. When your app has sign-in, attach the user so the inbox shows who wrote.
PanelUI components are native-only for now
identify and reset work on the web exactly as shown here. The PanelUI
components the App version's account screen uses — Card, Button and Toast —
are React Native components and don't run in a browser yet, so call these
from your own sign-in and sign-out code.
An app doesn't need accounts to use Studio. Each install registers itself and is anonymous: the inbox shows its device and reports, and replies reach it.
On the web an install is one browser: its token lives in that browser's
localStorage. Another browser, a private window or cleared site data is a new
install.
When your app does know who someone is, tell Studio after they sign in:
await studio.identify({
id: user.id,
email: user.email,
name: user.displayName,
});From then on, this install's reports show that name and email in the inbox, and
everything they send from other devices is grouped under the same person.
Reports sent before identify keep the sender they had — on a shared device,
someone else may have written them.
idis your own user id, up to 128 characters.emailandnameare optional, and a later call fills in what an earlier one left out.- Identity is what the app says it is — it isn't verified. It labels reports; it never gives one install access to another's conversations.
- Call it again whenever the details change. It's cheap and safe to repeat.
Signing out
An install belongs to a device (on the web, a browser), not a person. When someone signs out and the next person should start fresh, forget the install:
await studio.reset();The next call registers a new, anonymous install.
Deleting someone's data
When a user asks to be forgotten, open any of their reports in the inbox and press the trash button next to Tags, then confirm. It removes every report and screenshot from them in that project, with their installs and identity. Owners and admins can do this on every plan.
On the web
Call them where your sign-in and sign-out already finish — a callback, a server action's result, an auth state listener. For example, in a client component that knows the signed-in user:
'use client';
import { useEffect } from 'react';
import { studio } from '@/lib/studio';
export function StudioIdentity({ user }: { user: { id: string; email: string; name: string } | null }) {
useEffect(() => {
if (user) void studio.identify({ id: user.id, email: user.email, name: user.name });
}, [user]);
return null;
}And on sign-out, before the page reloads or redirects:
await studio.reset();Usage with PanelUI
identify and reset aren't tied to any UI: call them where your sign-in
finishes and where sign-out does. If your app uses PanelUI, here they are behind
an account Card, with a
Toast to confirm:
import { Button, Card, useToast } from 'panelui-native';
import { useAuth } from '@/lib/auth'; // your app's own sign-in
import { studio } from '@/lib/studio';
export default function Account() {
const { toast } = useToast();
const { user, signIn, signOut } = useAuth();
async function handleSignIn() {
const signedIn = await signIn();
await studio.identify({ id: signedIn.id, email: signedIn.email, name: signedIn.name });
toast.show({ variant: 'success', label: `Signed in as ${signedIn.name}` });
}
async function handleSignOut() {
await signOut();
await studio.reset();
}
return (
<Card>
<Card.Header>
<Card.Title>{user ? user.name : 'Not signed in'}</Card.Title>
<Card.Description>
{user ? 'Reports now carry your name and email.' : 'Reports come from an anonymous install.'}
</Card.Description>
</Card.Header>
<Card.Footer>
<Button variant="outline" onPress={user ? handleSignOut : handleSignIn}>
{user ? 'Sign out' : 'Sign in'}
</Button>
</Card.Footer>
</Card>
);
}