SGUI / Development
AuthShell
A presentation shell for host-owned authentication forms, without account APIs.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
A presentation shell for host-owned authentication forms, without account APIs.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Building a thoughtful learning experience
Ready
A presentation shell for host-owned authentication forms, without account APIs.
Building a thoughtful learning experience
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AuthShell, Button } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
export default function AuthShellExample() {
const [text,setText] = useState("Style this host-controlled sentence.");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<AuthShell title={"Welcome back"} subtitle={"Building a thoughtful learning experience"} footerContent={<Typography variant="caption">The host owns accounts and session handling.</Typography>}><Stack gap={3}><TextField label="Email address" value={text} onValueChange={setText} readOnly={false} /><Button disabled={false} onPress={() => setStatus('Continue requested for ' + text)}>Continue</Button><Typography role="status">{status}</Typography></Stack></AuthShell>
</ThemeScope>
</>
);
}
A presentation shell for host-owned authentication forms, without account APIs.
Continue your learning journey.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AuthShell, Button } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
export default function AuthShellExample() {
const [text,setText] = useState("Style this host-controlled sentence.");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<AuthShell title={"Welcome back"} subtitle={"Continue your learning journey."} footerContent={<Typography variant="caption">The host owns accounts and session handling.</Typography>}><Stack gap={3}><TextField label="Email address" value={text} onValueChange={setText} readOnly={false} /><Button disabled={false} onPress={() => setStatus('Continue requested for ' + text)}>Continue</Button><Typography role="status">{status}</Typography></Stack></AuthShell>
</ThemeScope>
</>
);
}
A presentation shell for host-owned authentication forms, without account APIs.
Create an account for your workspace.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AuthShell, Button } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
export default function AuthShellExample() {
const [text,setText] = useState("Style this host-controlled sentence.");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="compact">
<AuthShell title={"Create your account"} subtitle={"Create an account for your workspace."} footerContent={<Typography variant="caption">The host owns accounts and session handling.</Typography>}><Stack gap={3}><TextField label="Email address" value={text} onValueChange={setText} readOnly={false} /><Button disabled={false} onPress={() => setStatus('Continue requested for ' + text)}>Continue</Button><Typography role="status">{status}</Typography></Stack></AuthShell>
</ThemeScope>
</>
);
}
A presentation shell for host-owned authentication forms, without account APIs.
Account recovery is managed by the host.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AuthShell, Button } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
export default function AuthShellExample() {
const [text,setText] = useState("Style this host-controlled sentence.");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<AuthShell title={"Reset your password"} subtitle={"Account recovery is managed by the host."} footerContent={<Typography variant="caption">The host owns accounts and session handling.</Typography>}><Stack gap={3}><TextField label="Email address" value={text} onValueChange={setText} readOnly={true} /><Button disabled={true} onPress={() => setStatus('Continue requested for ' + text)}>Continue</Button><Typography role="status">{status}</Typography></Stack></AuthShell>
</ThemeScope>
</>
);
}
The host bounds this embedded form to 420px and owns its scrolling. Tab through the fields to reveal the submit action and longer footer. Native validation and a local result illustrate host integration without authentication APIs.
Review the host-owned registration details.
'use client';
import { useState } from 'react';
import {AuthShell} from '@structured-growth/sg-ui/components';
import {Button,Checkbox,Link,TextField} from '@structured-growth/sg-ui/experimental';
import {Stack,Typography} from '@structured-growth/sg-ui/primitives';
export default function LongAccountFormExample() {
const [result,setResult]=useState("");
return (
<>
<div role="region" aria-label="Scrollable account form" tabIndex={0} style={{height:420,overflow:'auto'}}>
<AuthShell title="Join your learning workspace" subtitle="Review the host-owned registration details." style={{minHeight:'100%'}} footerContent={<Stack gap={2}><Typography variant="caption">Your host manages account creation, consent, privacy and data retention. This local example creates no account.</Typography><Link href="#account-help">Account help and privacy information</Link></Stack>}>
<form onSubmit={event=>{event.preventDefault();setResult('Registration details validated locally. Host owns account creation.');}}>
<Stack gap={3}>
{["Full name","Work email","Organization","Role","Team","City","Country"].map(label=><TextField key={label} label={label} name={label} type={label==='Work email'?'email':'text'} required />)}
<Checkbox label="I have reviewed the workspace terms" required />
<Button type="submit">Review account details</Button>
<Typography role="status">{result}</Typography>
</Stack>
</form>
</AuthShell>
</div>
</>
);
}