> ## Documentation Index
> Fetch the complete documentation index at: https://replyke-feat-push-rich-payload-fields.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

> Install the Sublay SDK and add SublayProvider to your app

Sublay's SDK is distributed through the `@sublay` family of packages. The React web package (`@sublay/react-js`) is the starting point for most projects.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @sublay/react-js@beta
  ```

  ```bash yarn theme={null}
  yarn add @sublay/react-js@beta
  ```

  ```bash pnpm theme={null}
  pnpm add @sublay/react-js@beta
  ```
</CodeGroup>

For React Native or Expo projects, install the platform-specific package instead:

<CodeGroup>
  ```bash React Native theme={null}
  npm install @sublay/react-native@beta
  ```

  ```bash Expo theme={null}
  npm install @sublay/expo@beta
  ```
</CodeGroup>

## Wrap Your App with SublayProvider

`SublayProvider` is the root provider that must wrap your entire application (or the portion of it that uses Sublay features). It initializes the Redux store, bootstraps auth state, and makes the `projectId` available to all child hooks and components.

```tsx theme={null}
import { SublayProvider } from "@sublay/react-js";

function App() {
  return (
    <SublayProvider projectId="your-project-id">
      {/* your app */}
    </SublayProvider>
  );
}
```

### Props

<ParamField body="projectId" type="string" required>
  Your Sublay project ID. Found in the Sublay dashboard under project settings.
</ParamField>

<ParamField body="signedToken" type="string | null">
  A signed JWT from your own auth system, used for external authentication mode. Pass `null` or omit when not using external auth. See [External Auth](/sdk/authentication/external).
</ParamField>

## Choosing an Authentication Mode

After wrapping with `SublayProvider`, users are unauthenticated by default. You can authenticate them using any combination of:

<CardGroup cols={2}>
  <Card title="Built-in Auth" icon="lock" href="/sdk/authentication/built-in">
    Sign up and sign in with email and password. Sublay manages credentials and sessions.
  </Card>

  <Card title="External Auth" icon="code" href="/sdk/authentication/external">
    Pass a signed JWT from your own auth system via the `signedToken` prop.
  </Card>

  <Card title="OAuth" icon="key" href="/sdk/authentication/oauth">
    Let users sign in with Google, GitHub, Apple, or Facebook.
  </Card>

  <Card title="Multi-Account" icon="users" href="/sdk/authentication/multi-account">
    Support multiple simultaneous signed-in accounts with account switching.
  </Card>
</CardGroup>

## Checking Auth State

Use the `useAuth` hook for auth actions and `useUser` to access the current user anywhere inside `SublayProvider`:

```tsx theme={null}
import { useAuth, useUser } from "@sublay/react-js";

function Header() {
  const { initialized, signOut } = useAuth();
  const { user } = useUser();

  if (!initialized) return <p>Loading...</p>;
  if (!user) return <p>Not signed in.</p>;

  return (
    <div>
      <p>Signed in as {user.username}</p>
      <button onClick={() => signOut()}>Sign out</button>
    </div>
  );
}
```

<Note>
  `initialized` is `false` until the SDK has attempted to restore a session from storage. Always check `initialized` before rendering auth-dependent UI to avoid flash-of-unauthenticated-content.
</Note>

## Redux Store

`SublayProvider` automatically creates and manages an isolated Redux store. You do not need to configure Redux to use Sublay.

If your application already has its own Redux store, we strongly recommend using `SublayIntegrationProvider` instead — running two separate Redux stores in the same app is a common source of subtle bugs. See [Redux Integration](/sdk/redux-integration) for setup details.

## What's Next

<CardGroup cols={2}>
  <Card title="Authentication" icon="lock" href="/sdk/authentication/overview">
    Configure how users sign in to your application
  </Card>

  <Card title="Entities" icon="file" href="/sdk/entities/overview">
    Attach social features to your app's content
  </Card>

  <Card title="Spaces" icon="users" href="/sdk/spaces/overview">
    Build community spaces with membership and moderation
  </Card>

  <Card title="Chat" icon="comments" href="/sdk/chat/overview">
    Add real-time 1:1 and group conversations
  </Card>
</CardGroup>