SGUI / Development

SGAccountProvider

Supply local account selection and logout operations; credentials and persistence remain host-owned.

Open course

Active: alex@example.com

Ready

Loading examples…

Prop playground

This in-memory account adapter does not authenticate, store credentials, or contact a server.

Content / label

Open course

Active: alex@example.com

Ready

'use client';

import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SGAccountProvider, useAccountAdapter, type StoredAuthSession, type SGAccountAdapter } from '@structured-growth/sg-ui';
import { Button } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';

export default function accountAdapterExample() {
  const [sessions,setSessions]=useState<StoredAuthSession[]>([{"accountId":"alex","email":"alex@example.com","activeOrgId":"sg","organizations":[{"id":"sg","name":"Structured Growth"}]},{"accountId":"sam","email":"sam@example.com","activeOrgId":"sg","organizations":[{"id":"sg","name":"Structured Growth"}]}]);
  const [account,setAccount]=useState("alex");
  const [status,setStatus]=useState("Ready");
  const adapter:SGAccountAdapter={getStoredAuthSessions:()=>sessions,getStoredAuthSession:()=>sessions.find(item=>item.accountId===account)??null,setActiveStoredAuthSession:next=>{setAccount(next);setStatus('Selected '+next);},markOrganizationSwitched:()=>setStatus('Organization switch recorded locally'),logoutAccount:async id=>{setSessions(items=>items.filter(item=>item.accountId!==id));setAccount(sessions.find(item=>item.accountId!==id)?.accountId??'');setStatus('Signed out locally: '+id);},logoutAllAccounts:async()=>{setSessions([]);setAccount('');setStatus('All local sessions removed');}};
  function AccountConsumer(){const adapter=useAccountAdapter();const current=adapter.getStoredAuthSession();return <Stack gap={3}><Typography variant="h6">{"Open course"}</Typography><Typography>Active: {current?.email??'No session'}</Typography>{adapter.getStoredAuthSessions().map(session=><Button key={session.accountId} variant="outlined" onPress={()=>adapter.setActiveStoredAuthSession(session.accountId)}>Select {session.email}</Button>)}<Button disabled={!current} onPress={()=>current&&adapter.logoutAccount(current.accountId)}>Sign out current account</Button><Button disabled={!adapter.getStoredAuthSessions().length} tone="neutral" onPress={()=>adapter.logoutAllAccounts()}>Sign out all accounts</Button></Stack>;}
  return (
    <>
      <ThemeScope density="comfortable"><SGAccountProvider value={adapter}><AccountConsumer/><Typography role="status">{status}</Typography></SGAccountProvider></ThemeScope>
    </>
  );
}

Loading examples…

Examples

SGAccountProvider: Compact configuration

This in-memory account adapter does not authenticate, store credentials, or contact a server.

Open course

Active: alex@example.com

Ready

'use client';

import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SGAccountProvider, useAccountAdapter, type StoredAuthSession, type SGAccountAdapter } from '@structured-growth/sg-ui';
import { Button } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';

export default function accountAdapterExample() {
  const [sessions,setSessions]=useState<StoredAuthSession[]>([{"accountId":"alex","email":"alex@example.com","activeOrgId":"sg","organizations":[{"id":"sg","name":"Structured Growth"}]},{"accountId":"sam","email":"sam@example.com","activeOrgId":"sg","organizations":[{"id":"sg","name":"Structured Growth"}]}]);
  const [account,setAccount]=useState("alex");
  const [status,setStatus]=useState("Ready");
  const adapter:SGAccountAdapter={getStoredAuthSessions:()=>sessions,getStoredAuthSession:()=>sessions.find(item=>item.accountId===account)??null,setActiveStoredAuthSession:next=>{setAccount(next);setStatus('Selected '+next);},markOrganizationSwitched:()=>setStatus('Organization switch recorded locally'),logoutAccount:async id=>{setSessions(items=>items.filter(item=>item.accountId!==id));setAccount(sessions.find(item=>item.accountId!==id)?.accountId??'');setStatus('Signed out locally: '+id);},logoutAllAccounts:async()=>{setSessions([]);setAccount('');setStatus('All local sessions removed');}};
  function AccountConsumer(){const adapter=useAccountAdapter();const current=adapter.getStoredAuthSession();return <Stack gap={3}><Typography variant="h6">{"Open course"}</Typography><Typography>Active: {current?.email??'No session'}</Typography>{adapter.getStoredAuthSessions().map(session=><Button key={session.accountId} variant="outlined" onPress={()=>adapter.setActiveStoredAuthSession(session.accountId)}>Select {session.email}</Button>)}<Button disabled={!current} onPress={()=>current&&adapter.logoutAccount(current.accountId)}>Sign out current account</Button><Button disabled={!adapter.getStoredAuthSessions().length} tone="neutral" onPress={()=>adapter.logoutAllAccounts()}>Sign out all accounts</Button></Stack>;}
  return (
    <>
      <ThemeScope density="compact"><SGAccountProvider value={adapter}><AccountConsumer/><Typography role="status">{status}</Typography></SGAccountProvider></ThemeScope>
    </>
  );
}

SGAccountProvider: Alternate host integration

This in-memory account adapter does not authenticate, store credentials, or contact a server.

A host-defined destination with a longer descriptive label

Active: alex@example.com

Ready

'use client';

import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SGAccountProvider, useAccountAdapter, type StoredAuthSession, type SGAccountAdapter } from '@structured-growth/sg-ui';
import { Button } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';

export default function accountAdapterExample() {
  const [sessions,setSessions]=useState<StoredAuthSession[]>([{"accountId":"alex","email":"alex@example.com","activeOrgId":"sg","organizations":[{"id":"sg","name":"Structured Growth"}]},{"accountId":"sam","email":"sam@example.com","activeOrgId":"sg","organizations":[{"id":"sg","name":"Structured Growth"}]}]);
  const [account,setAccount]=useState("alex");
  const [status,setStatus]=useState("Ready");
  const adapter:SGAccountAdapter={getStoredAuthSessions:()=>sessions,getStoredAuthSession:()=>sessions.find(item=>item.accountId===account)??null,setActiveStoredAuthSession:next=>{setAccount(next);setStatus('Selected '+next);},markOrganizationSwitched:()=>setStatus('Organization switch recorded locally'),logoutAccount:async id=>{setSessions(items=>items.filter(item=>item.accountId!==id));setAccount(sessions.find(item=>item.accountId!==id)?.accountId??'');setStatus('Signed out locally: '+id);},logoutAllAccounts:async()=>{setSessions([]);setAccount('');setStatus('All local sessions removed');}};
  function AccountConsumer(){const adapter=useAccountAdapter();const current=adapter.getStoredAuthSession();return <Stack gap={3}><Typography variant="h6">{"A host-defined destination with a longer descriptive label"}</Typography><Typography>Active: {current?.email??'No session'}</Typography>{adapter.getStoredAuthSessions().map(session=><Button key={session.accountId} variant="outlined" onPress={()=>adapter.setActiveStoredAuthSession(session.accountId)}>Select {session.email}</Button>)}<Button disabled={!current} onPress={()=>current&&adapter.logoutAccount(current.accountId)}>Sign out current account</Button><Button disabled={!adapter.getStoredAuthSessions().length} tone="neutral" onPress={()=>adapter.logoutAllAccounts()}>Sign out all accounts</Button></Stack>;}
  return (
    <>
      <ThemeScope density="comfortable"><SGAccountProvider value={adapter}><AccountConsumer/><Typography role="status">{status}</Typography></SGAccountProvider></ThemeScope>
    </>
  );
}

Loading examples…

Contains

No fixed SGUI child components.

Used In

No direct parents in the documented component catalog.

Prop playground

This in-memory account adapter does not authenticate, store credentials, or contact a server.

Content / label

Open course

Active: alex@example.com

Ready

'use client';

import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SGAccountProvider, useAccountAdapter, type StoredAuthSession, type SGAccountAdapter } from '@structured-growth/sg-ui';
import { Button } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';

export default function accountAdapterExample() {
  const [sessions,setSessions]=useState<StoredAuthSession[]>([{"accountId":"alex","email":"alex@example.com","activeOrgId":"sg","organizations":[{"id":"sg","name":"Structured Growth"}]},{"accountId":"sam","email":"sam@example.com","activeOrgId":"sg","organizations":[{"id":"sg","name":"Structured Growth"}]}]);
  const [account,setAccount]=useState("alex");
  const [status,setStatus]=useState("Ready");
  const adapter:SGAccountAdapter={getStoredAuthSessions:()=>sessions,getStoredAuthSession:()=>sessions.find(item=>item.accountId===account)??null,setActiveStoredAuthSession:next=>{setAccount(next);setStatus('Selected '+next);},markOrganizationSwitched:()=>setStatus('Organization switch recorded locally'),logoutAccount:async id=>{setSessions(items=>items.filter(item=>item.accountId!==id));setAccount(sessions.find(item=>item.accountId!==id)?.accountId??'');setStatus('Signed out locally: '+id);},logoutAllAccounts:async()=>{setSessions([]);setAccount('');setStatus('All local sessions removed');}};
  function AccountConsumer(){const adapter=useAccountAdapter();const current=adapter.getStoredAuthSession();return <Stack gap={3}><Typography variant="h6">{"Open course"}</Typography><Typography>Active: {current?.email??'No session'}</Typography>{adapter.getStoredAuthSessions().map(session=><Button key={session.accountId} variant="outlined" onPress={()=>adapter.setActiveStoredAuthSession(session.accountId)}>Select {session.email}</Button>)}<Button disabled={!current} onPress={()=>current&&adapter.logoutAccount(current.accountId)}>Sign out current account</Button><Button disabled={!adapter.getStoredAuthSessions().length} tone="neutral" onPress={()=>adapter.logoutAllAccounts()}>Sign out all accounts</Button></Stack>;}
  return (
    <>
      <ThemeScope density="comfortable"><SGAccountProvider value={adapter}><AccountConsumer/><Typography role="status">{status}</Typography></SGAccountProvider></ThemeScope>
    </>
  );
}

SGAccountProvider: Compact configuration

This in-memory account adapter does not authenticate, store credentials, or contact a server.

Open course

Active: alex@example.com

Ready

'use client';

import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SGAccountProvider, useAccountAdapter, type StoredAuthSession, type SGAccountAdapter } from '@structured-growth/sg-ui';
import { Button } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';

export default function accountAdapterExample() {
  const [sessions,setSessions]=useState<StoredAuthSession[]>([{"accountId":"alex","email":"alex@example.com","activeOrgId":"sg","organizations":[{"id":"sg","name":"Structured Growth"}]},{"accountId":"sam","email":"sam@example.com","activeOrgId":"sg","organizations":[{"id":"sg","name":"Structured Growth"}]}]);
  const [account,setAccount]=useState("alex");
  const [status,setStatus]=useState("Ready");
  const adapter:SGAccountAdapter={getStoredAuthSessions:()=>sessions,getStoredAuthSession:()=>sessions.find(item=>item.accountId===account)??null,setActiveStoredAuthSession:next=>{setAccount(next);setStatus('Selected '+next);},markOrganizationSwitched:()=>setStatus('Organization switch recorded locally'),logoutAccount:async id=>{setSessions(items=>items.filter(item=>item.accountId!==id));setAccount(sessions.find(item=>item.accountId!==id)?.accountId??'');setStatus('Signed out locally: '+id);},logoutAllAccounts:async()=>{setSessions([]);setAccount('');setStatus('All local sessions removed');}};
  function AccountConsumer(){const adapter=useAccountAdapter();const current=adapter.getStoredAuthSession();return <Stack gap={3}><Typography variant="h6">{"Open course"}</Typography><Typography>Active: {current?.email??'No session'}</Typography>{adapter.getStoredAuthSessions().map(session=><Button key={session.accountId} variant="outlined" onPress={()=>adapter.setActiveStoredAuthSession(session.accountId)}>Select {session.email}</Button>)}<Button disabled={!current} onPress={()=>current&&adapter.logoutAccount(current.accountId)}>Sign out current account</Button><Button disabled={!adapter.getStoredAuthSessions().length} tone="neutral" onPress={()=>adapter.logoutAllAccounts()}>Sign out all accounts</Button></Stack>;}
  return (
    <>
      <ThemeScope density="compact"><SGAccountProvider value={adapter}><AccountConsumer/><Typography role="status">{status}</Typography></SGAccountProvider></ThemeScope>
    </>
  );
}

SGAccountProvider: Alternate host integration

This in-memory account adapter does not authenticate, store credentials, or contact a server.

A host-defined destination with a longer descriptive label

Active: alex@example.com

Ready

'use client';

import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SGAccountProvider, useAccountAdapter, type StoredAuthSession, type SGAccountAdapter } from '@structured-growth/sg-ui';
import { Button } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';

export default function accountAdapterExample() {
  const [sessions,setSessions]=useState<StoredAuthSession[]>([{"accountId":"alex","email":"alex@example.com","activeOrgId":"sg","organizations":[{"id":"sg","name":"Structured Growth"}]},{"accountId":"sam","email":"sam@example.com","activeOrgId":"sg","organizations":[{"id":"sg","name":"Structured Growth"}]}]);
  const [account,setAccount]=useState("alex");
  const [status,setStatus]=useState("Ready");
  const adapter:SGAccountAdapter={getStoredAuthSessions:()=>sessions,getStoredAuthSession:()=>sessions.find(item=>item.accountId===account)??null,setActiveStoredAuthSession:next=>{setAccount(next);setStatus('Selected '+next);},markOrganizationSwitched:()=>setStatus('Organization switch recorded locally'),logoutAccount:async id=>{setSessions(items=>items.filter(item=>item.accountId!==id));setAccount(sessions.find(item=>item.accountId!==id)?.accountId??'');setStatus('Signed out locally: '+id);},logoutAllAccounts:async()=>{setSessions([]);setAccount('');setStatus('All local sessions removed');}};
  function AccountConsumer(){const adapter=useAccountAdapter();const current=adapter.getStoredAuthSession();return <Stack gap={3}><Typography variant="h6">{"A host-defined destination with a longer descriptive label"}</Typography><Typography>Active: {current?.email??'No session'}</Typography>{adapter.getStoredAuthSessions().map(session=><Button key={session.accountId} variant="outlined" onPress={()=>adapter.setActiveStoredAuthSession(session.accountId)}>Select {session.email}</Button>)}<Button disabled={!current} onPress={()=>current&&adapter.logoutAccount(current.accountId)}>Sign out current account</Button><Button disabled={!adapter.getStoredAuthSessions().length} tone="neutral" onPress={()=>adapter.logoutAllAccounts()}>Sign out all accounts</Button></Stack>;}
  return (
    <>
      <ThemeScope density="comfortable"><SGAccountProvider value={adapter}><AccountConsumer/><Typography role="status">{status}</Typography></SGAccountProvider></ThemeScope>
    </>
  );
}