Skip to main content
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:

​
Install the SDK

Install the Prelude JavaScript SDK in your frontend project: 
npm install @prelude.so/js-sdk

​
Initialize the SDK

Create a PrldSessionClient instance with your custom domain: 
import { PrldSessionClient } from "@prelude.so/js-sdk";

const client = new PrldSessionClient({
  domain: "{app_id}.session.prelude.dev",
});
Scaffold a React project you will use for all the steps below:
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:
.env
VITE_APP_ID=your_app_id
Replace src/App.jsx with:
src/App.jsx
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:
vite.config.js
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"],
  },
})

npm run dev