ऐप demo को password protect करें: सरल gated access

9 अगस्त 2026 · jsdeck team · 5 मिनट पढ़ना

अगर आपने password protect an app demo खोजा है, तो शायद आपको static app पर login चाहिए बिना Node server खड़े किए, OAuth configure किए, या full auth platform pay किए। jsdeck के secure accounts (auth API) — visitor auth भी कहलाता है — हर hosted app को अपने email/password accounts, session tokens, और optional per-user datastore rows देता है। यह गाइड बताती है कि यह कैसे काम करता है, real API calls दिखाती है, और ईमानदारी से Clerk, Auth0, या full backend कब use करें।

static host पर "password protect"

Static hosts सभी को same files serve करते हैं — server-side .htpasswd gate नहीं। Password protection का मतलब: JavaScript पहले login form दिखाए और demo तभी mount हो जब /users/login call successful होकर session token return करे।

secure accounts (auth API) क्या है

jsdeck का auth API https://your-slug.jsdeck.com पर hosted app के visitors के लिए per-app secure accounts बनाता है। हर account email + password है जो सिर्फ उस app slug तक scoped है। register या login के बाद API accessToken return करता है — bearer session token (default 7 days, server-side)।

यह आपका jsdeck dashboard login नहीं है। Dashboard accounts apps deploy और configure करते हैं; secure accounts *आपके* demo या product UI में sign in करते हैं। पूर्ण route reference: Secure accounts (auth API) docs।

Auth HTTP routes (summary)

सभी calls apex base https://jsdeck.com/api/v1 use करती हैं (CORS *.jsdeck.com allow करता है)। {slug} अपने app name से replace करें:

Method	Path	Purpose
POST	`/public/apps/{slug}/users/register`	Create account (`email`, `password` min 8 chars)
POST	`/public/apps/{slug}/users/login`	Sign in — returns `accessToken`, `expiresAt`, `user`
GET	`/public/apps/{slug}/users/me`	Current user — `Authorization: Bearer <session token>`
POST	`/public/apps/{slug}/users/logout`	Revoke session
POST	`/public/apps/{slug}/users/forgot-password`	Send reset email
POST	`/public/apps/{slug}/users/reset-password`	Complete reset with `token` + `newPassword`

OpenAPI spec: /tenant-auth-api.yaml।

const API = 'https://jsdeck.com/api/v1';
const SLUG = 'your-app';

async function login(email, password) {
  const res = await fetch(`${API}/public/apps/${SLUG}/users/login`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password }),
  });
  if (!res.ok) throw new Error('Invalid email or password');
  const { accessToken, user } = await res.json();
  sessionStorage.setItem('sessionToken', accessToken);
  return user;
}

async function currentUser(token) {
  const res = await fetch(`${API}/public/apps/${SLUG}/users/me`, {
    headers: { Authorization: `Bearer ${token}` },
  });
  return res.ok ? (await res.json()).user : null;
}

session token session cookie की तरह store करें — सिर्फ HTTPS, log न करें। @jsdeck/toolkit package register, login, और datastore calls को configure({ tenantUserToken }) से wrap करता है।

static bundle login form तब तक दिखा सकता है जब valid session token न हो:

// Pseudocode — adapt to React, Vue, Svelte, etc.
const token = sessionStorage.getItem('sessionToken');

async function boot() {
  if (!token) {
    renderLoginForm({ onSuccess: (t) => { sessionStorage.setItem('sessionToken', t); boot(); } });
    return;
  }
  const user = await currentUser(token);
  if (!user) {
    sessionStorage.removeItem('sessionToken');
    boot();
    return;
  }
  renderYourApp(user); // demo visible only after auth
}

hosted HTML अभी भी public है — login से पहले आप client code में decide करते हैं क्या render हो। client preview के लिए एक shared demo account बनाएँ या stakeholder के लिए अलग accounts register करें।

Per-user private data (owner rows)

Auth optional JSON datastore के साथ pair होता है। login के बाद records PUT करें visibility: "owner" के साथ ताकि सिर्फ उस user का session token read/write कर सके — shared store_ key नहीं। Lists owner rows omit करती हैं जब तक request में valid session token न हो। datastore key session token के साथ use करने के लिए owner-row docs देखें।

Password reset

user email के साथ forgot-password call करें और optionally redirectPath (जैसे "/reset-password") ताकि reset link hosted app पर खुले। reset page URL से ?token= read कर reset-password POST करें newPassword के साथ। नया password माँगने से पहले reset-password/status?token= से "link expired" दिखाएँ।

Limits और auth API कब काफ़ी नहीं

jsdeck auth email/password per app, gated demos, और owner-scoped JSON rows के लिए fit है। इसमें social/OAuth login, MFA, SAML/SSO, org roles, audit logs, या compliance certifications नहीं हैं। Apps 5,000 secure accounts per app तक capped हैं — demos और छोटे products के लिए पर्याप्त। Google sign-in, enterprise SSO, या fine-grained RBAC चाहिए? Clerk, Auth0, या Supabase Auth use करें और jsdeck सिर्फ static hosting के लिए रखें। scope details: what the auth API covers।

Single-password vs multi-user demos

Approach	How	Best for
One shared login	Register a single demo account; share email + password with reviewers	Quick portfolio or investor preview
Invite-by-register	Each viewer creates their own secure account	Client teams, beta testers
Owner rows	Per-user saved state after login	Multi-tenant prototypes

literal "one password" feel के लिए एक shared secure account use करें — source code में hardcoded string नहीं (कोई भी JS bundle पढ़ सकता है)।

यह किसके लिए है, और jsdeck auth कब न उपयोग करें

अच्छा fit: gated demos, client previews, hackathon apps, MVPs, और owner rows के through per-user JSON।

fit नहीं: OAuth-only login, MFA requirements, enterprise SSO, complex roles, या regulated identity workloads — Clerk, Auth0, या Supabase Auth use करें।

अक्सर पूछे जाने वाले प्रश्न

क्या password protect an app demo वास्तव में मुफ़्त है?

हाँ। jsdeck HTTPS के साथ मुफ़्त static hosting देता है। Secure accounts (auth API) और optional datastore typical demo और side-project scale पर included हैं — शुरू करने के लिए credit card नहीं।

नहीं। Dashboard account jsdeck.com पर apps deploy करता है। Secure accounts end-users हैं जो auth API के through *आपके* app your-slug.jsdeck.com पर sign in करते हैं।

अभी नहीं — सिर्फ email और password। social login या SSO के लिए dedicated identity provider use करें। what jsdeck auth covers और comparisons hub देखें।

अगले कदम

visitor auth hub में और गाइड देखें
अपना पहला ऐप deploy करने के लिए getting started guide अपनाएँ
full route docs और OpenAPI के लिए Secure accounts (auth API) पढ़ें

static host पर "password protect"

secure accounts (auth API) क्या है

Auth HTTP routes (summary)

Example: static frontend से login

login के पीछे demo gate करें (backend code बिना)