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

# Introduction

> Integrate the Prelude Auth SDK into your web application.

This guide covers how to use the Prelude JavaScript SDK to authenticate users from a web frontend.

## Prerequisites

Before you start, make sure you have:

* A Prelude account with access to Prelude Auth — [contact us](mailto:support@prelude.so) to obtain access
* An **Application ID** (`appID`) — see [Applications](/session/documentation/applications)
* An authentication method configured — see [Password Authentication](/session/documentation/integration-guide/password-authentication)

## Install the SDK

Install the Prelude JavaScript SDK in your frontend project:

<CodeGroup>
  ```bash npm theme={null}
  npm install @prelude.so/js-sdk
  ```

  ```bash yarn theme={null}
  yarn add @prelude.so/js-sdk
  ```

  ```bash pnpm theme={null}
  pnpm add @prelude.so/js-sdk
  ```
</CodeGroup>

## Initialize the SDK

Create a `PrldSessionClient` instance with your custom domain:

```javascript theme={null}
import { PrldSessionClient } from "@prelude.so/js-sdk";

const client = new PrldSessionClient({
  domain: "{app_id}.session.prelude.dev",
});
```

<Accordion title="Try it" icon="flask">
  Scaffold a React project you will use for all the steps below:

  ```bash theme={null}
  npm create vite@latest session-test -- --template react
  cd session-test
  npm install @prelude.so/js-sdk @picocss/pico
  ```

  Create a `.env` file at the root of the project with your Application ID:

  ```bash .env theme={null}
  VITE_APP_ID=your_app_id
  ```

  Replace `src/App.jsx` with:

  ```jsx src/App.jsx theme={null}
  import "@picocss/pico";
  import { PrldSessionClient } from "@prelude.so/js-sdk";

  const client = new PrldSessionClient({
    domain: `${import.meta.env.VITE_APP_ID}.session.prelude.dev`,
  });

  export default function App() {
    return (
      <>
        <style>{`body, #root { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 0; }`}</style>
        <main style={{ textAlign: "center", maxWidth: "600px", width: "100%" }}>
          <h1>Session Test</h1>
          <p>SDK initialized.</p>
        </main>
      </>
    );
  }
  ```

  Add `optimizeDeps` on vite configuration:

  ```js vite.config.js theme={null}
  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'

  // https://vite.dev/config/
  export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ["@prelude.so/js-sdk"],
    include: ["@prelude.so/js-sdk > browser-tabs-lock"],
    },
  })
  ```

  ```bash theme={null}
  npm run dev
  ```
</Accordion>