> ## Documentation Index
> Fetch the complete documentation index at: https://stytch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Via headless SDK

> Examples and considerations when using the headless SDKs to build your own custom auth.

<Columns cols={2}>
  <Card title="SDK reference" icon="book-text" href="/api-reference/b2b/frontend-sdks/react/overview">
    API & SDK reference
  </Card>

  <Card title="Example apps" icon="github" href="https://github.com/stytchauth/stytch-all-examples/tree/main/frontend">
    Headless code examples
  </Card>
</Columns>

***

## Libraries

While the SDKs include Stytch UI components, you can use the frontend SDKs headlessly to build your own custom auth flow and UI.

<Columns cols={3}>
  <Card title="Next.js" icon="triangle" horizontal href="/api-reference/consumer/frontend-sdks/nextjs/overview" />

  <Card title="React" icon="react" horizontal href="/api-reference/consumer/frontend-sdks/react/overview" />

  <Card title="Vanilla JS" icon="square-js" horizontal href="/api-reference/consumer/frontend-sdks/vanilla-js/overview" />

  <Card title="iOS" icon="apple" href="/api-reference/consumer/mobile-sdks/ios/overview" />

  <Card title="Android" icon="android" href="/api-reference/consumer/mobile-sdks/android/overview" />

  <Card title="React Native" icon="react" href="/api-reference/consumer/mobile-sdks/react-native/overview" />
</Columns>

***

## Example code

See the [headless example apps](https://github.com/stytchauth/stytch-all-examples/tree/main/frontend) for more complete codes examples, including examples for other frameworks.

### Starting the authentication flow

```jsx theme={null}
// Start the authentication flow
import { useStytchB2BClient, useStytchMember, useStytchMemberSession } from '@stytch/nextjs/b2b';

const Login = (organization) => {
  const stytchB2BClient = useStytchB2BClient();

  const sendEmailMagicLink = async () => {
    await stytchB2BClient.magicLinks.email.loginOrSignup({
      email_address: 'sandbox@stytch.com',
      organization_id: organization.organization_id
    });
  };

  return <button onClick={sendEmailMagicLink}>Login</button>;
//...
```

### Completing the authentication flow

```jsx theme={null}
// Complete the authentication flow
const Authenticate = () => {
  const stytchB2BClient = useStytchB2BClient();
  const router = useRouter();

  useEffect(() => {
    const token = router?.query?.token?.toString();
    stytchB2BClient.magicLinks.authenticate({
      magic_links_token: token,
      session_duration_minutes: 60,
    });
  }, [router, stytchB2BClient]);
//...
```