static apps के लिए visitor auth: full backend के बिना demos protect करें

अगर आपने visitor auth for static apps खोजा है, तो शायद आपको 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 देता है। यह गाइड बताती है कि यह कैसे काम करता है, असली API calls दिखाती है, और ईमानदारी से बताती है कि Clerk, Auth0, या full backend कब बेहतर है।

static apps को अलग auth model क्यों चाहिए

पारंपरिक auth tutorials assume करते हैं कि server आपका है: cookies set करें, middleware चलाएँ, sessions Redis में रखें। jsdeck-hosted app HTTPS पर static files हैं — HTML, CSS, और JS। auth API hosted REST layer है जिसे frontend सीधे call करता है, datastore call करने की तरह। कोई express-session नहीं, deploy करने वाले Lambdas नहीं।

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 देता है — 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 करें:

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

Example: static frontend से login

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 करता है।

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

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

// 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 से पहले क्या render करना है आप client code में decide करते हैं। client preview के लिए एक shared demo account बनाएँ या stakeholder के हिसाब से अलग accounts register करें।

per-user private data (owner rows)

Auth optional JSON datastore के साथ pair होता है। login के बाद visibility: "owner" records PUT करें ताकि सिर्फ उस 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 करें और optional redirectPath (जैसे "/reset-password") दें ताकि reset link hosted app पर खुले। reset page URL से ?token= read करके reset-password POST करें newPassword के साथ। नया password माँगने से पहले "link expired" दिखाने के लिए reset-password/status?token= use करें।

limits और जब auth API enough नहीं

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 देखें।

enable करें और ship करें

1. static build jsdeck पर deploy करें
2. saved या per-user data चाहिए तो dashboard में datastore enable करें
3. ऊपर auth API routes call करने वाला login/register UI जोड़ें
4. GET /users/me succeed होने तक main UI gate करें
5. reset flows और toolkit helpers के लिए पूरी auth API guide पढ़ें

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

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

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

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

क्या visitor auth for static apps वाकई मुफ़्त है?

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

क्या secure accounts jsdeck dashboard login जैसा है?

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

क्या visitors Google या GitHub से sign in कर सकते हैं?

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

अगले कदम

• visitor auth hub में और guides देखें
• पहला ऐप deploy करने के लिए getting started guide follow करें
• पूरे route docs और OpenAPI के लिए Secure accounts (auth API) पढ़ें