Auth Card

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="auth-card"/>;}

Layouts

Providers follow the email form in each layout. Choose stacked for full-width provider buttons with visible names, suited to a dedicated sign-in screen. Choose inline for compact icon buttons that fit a dialog or narrow panel and accommodate more providers. Both arrangements use the same providers list, so the surrounding authentication flow stays consistent when the layout changes.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="auth-card" example="layouts"/>;}

Split with artwork

Supplying media adds a second column beside the form. This leaves room for artwork and the extra fields of a dedicated account-creation page. On narrow screens, the media column is hidden so the form remains close to the top of the page.

The media slot accepts any React node. Use an image, video, or AuthMediaCarousel with a collection of images. The carousel crossfades automatically, keeps the first image still for reduced motion, and leaves navigation controls out of the form area.

Common companion options include centered headings, confirmPassword for a paired password row, and footnote for supporting text below the card. A grid provider layout distributes icon buttons across equal-width columns.

Create your account

Enter your email below to create your account

Email*

We use this to contact you, and never share it.

Password*

Confirm password*

Create account

or continue with

Already have an account? Sign in

This is a local authentication preview. No account or external session is created.

Interactive local fixture. No external authentication, inference, upload or search service is connected.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="auth-card" example="split"/>;}

With a logo

Add a React node with logo to place a brand mark above the heading. Its alignment follows centered. The component accepts your own artwork directly, so an installed copy can use the identity of the surrounding application.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="auth-card" example="logo"/>;}

Sign in and sign up

Choose signin or signup through mode. Sign-in includes a remember-me option and password recovery link. Sign-up adds the name field and terms text, while removing controls intended for returning users.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="auth-card" example="modes"/>;}

Verification code

The verify mode replaces the email and password form with one-time-code fields. It includes resend behavior and removes provider choices, since the person has already selected a sign-in method. The heading and optional logo remain aligned with the preceding steps.

Use email to identify the destination address. The onComplete callback receives the code as soon as all digits are entered, allowing your application to verify it without waiting for another button press.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="auth-card" example="verify"/>;}

Providers

List supported social providers in the order you want them displayed. Their outlined appearance retains recognizable multicolor marks while keeping the choices visually balanced. The provider callback lets your own authentication flow handle the selected brand.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="auth-card" example="providers"/>;}

Wiring it up

Connect authentication through application callbacks. The form supplies FormData to onSubmit, and a provider press reports its brand through onProvider. Route those values to your existing identity service or endpoint. The local preview only validates input and reports the choice.

'use client';
import {useState} from 'react';
import {NativeScope,NativeAuthCard} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){const[status,setStatus]=useState('');return <NativeScope><NativeAuthCard headingLevel={3} onSubmit={data=>setStatus('Validated locally for '+String(data.get('email')))} onProvider={provider=>setStatus(provider+' selected locally; connect your own provider.')}/><p role="status">{status}</p></NativeScope>;}