CINXE.COM

<!doctype html> <html lang="en"> <head> <title>Userbase: Logins and persistence for static sites</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Userbase is the easiest way to add user accounts and data persistence to your static site. No backend necessary."> <meta property="og:url" content="https://userbase.com" /> <meta property="og:type" content="website" /> <meta property="og:title" content="The easiest way to add user accounts & persistence to your static site." /> <meta property="og:image" content="https://userbase.com/2c9de7d2c6f17990e56fc36e8a9da903.png" /> <meta property="og:description" content="Create secure and private web apps using only static JavaScript, HTML, and CSS." /> <meta property="og:site_name" content="Userbase" /> <meta property="og:locale" content="en_US" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@UserbaseHQ" /> <meta name="twitter:creator" content="@UserbaseHQ" /> <meta name="twitter:url" content="https://userbase.com" /> <meta name="twitter:title" content="The easiest way to add user accounts & persistence to your static site." /> <meta name="twitter:description" content="Create secure and private web apps using only static JavaScript, HTML, and CSS." /> <meta name="twitter:image" content="https://userbase.com/2c9de7d2c6f17990e56fc36e8a9da903.png" /> <link rel="shortcut icon" href="/assets/favicon.ico"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png"> <link rel="manifest" href="/assets/manifest.json"> <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#fff"> <meta name="application-name" content="homepage"> <link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="167x167" href="/assets/apple-touch-icon-167x167.png"> <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png"> <link rel="apple-touch-icon" sizes="1024x1024" href="/assets/apple-touch-icon-1024x1024.png"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-title" content="homepage"> <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-320x460.png"> <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x920.png"> <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x1096.png"> <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-750x1294.png"> <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1182x2208.png"> <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1242x2148.png"> <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-748x1024.png"> <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-768x1004.png"> <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1496x2048.png"> <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1536x2008.png"> <link rel="icon" type="image/png" sizes="228x228" href="/assets/coast-228x228.png"> <meta name="msapplication-TileColor" content="#fff"> <meta name="msapplication-TileImage" content="/assets/mstile-144x144.png"> <meta name="msapplication-config" content="/assets/browserconfig.xml"> <link rel="yandex-tableau-widget" href="/assets/yandex-browser-manifest.json"> <link href="/style.css" rel="stylesheet"> </head> <body> <header class="sm:sticky top-0 bg-white z-50 shadow-none sm:shadow-md mb-0 sm:mb-8"> <div class="sm:flex sm:justify-between sm:items-center py-2 px-4"> <div class="flex items-center justify-between h-10"> <div class="flex-shrink-0"> </div> <div class="sm:hidden"> <button onclick="toggleMenu()" type="button" class="block text-blackish hover:text-orange-700 focus:text-orange-700 focus:outline-none"> <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24"> <path class="hidden menu-close" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" /> <path class="menu-open" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" /> </svg> </button> </div> </div> <nav class="pt-0 pb-8 hidden sm:flex sm:p-0 text-lg text-center menu"> <a href="/pricing/" class="menu-item">Pricing</a> <a href="/docs/" class="menu-item">Docs</a> <a href="/contact/" class="menu-item">Contact</a> <a href="https://v1.userbase.com/#sign-in" class="menu-item text-red-700 hover:text-blue">Log in</a> <a href="https://v1.userbase.com/#create-admin" class="rounded-lg px-6 py-2 no-underline bg-yellowish font-black cursor-pointer text-gray-900 inline-block leading-none hover:text-orange-700 mt-2 ml-0 sm:ml-2 sm:mt-0">Try it FREE</a> </nav> </div> </header> <div class="container mx-auto max-w-4xl px-4"> <div class="flex justify-center pb-4"> <a href="/"><img alt="Userbase" id="logo" src="/8bde22dfa8b59c961788a584d92cf583.png"></a> </div> <div class="section mt-10"> <h1>Create <span class="highlight">secure</span> and <span class="highlight">private</span> web apps using only static JavaScript, HTML, and CSS.</h1> </div> <div class="section mt-10"> <h2 id="what-is-userbase">What is Userbase?</h2> <p id="description" class="description mb-8">Userbase is the easiest way to add user accounts and data persistence to your static site. All Userbase features are accessible through a very simple <a href="/docs/sdk/">JavaScript SDK</a>, directly from the browser. No backend necessary.</p> <p class="codepen" data-height="572" data-theme-id="dark" data-default-tab="js,result" data-user="userbase" data-slug-hash="QWKPNdR" style="height: 572px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Userbase Getting Started"> <span>See the Pen <a href="https://codepen.io/userbase/pen/QWKPNdR"> Userbase Getting Started</a> by Userbase (<a href="https://codepen.io/userbase">@userbase</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script> <h3 id="user-accounts" class="mt-8">Built-in user accounts</h3> <p>Userbase takes care of your user accounts. The Userbase SDK lets you sign up, login, and logout users directly from your static site.</p> <h3 id="zero-management-database">Zero-management database</h3> <p>Instead of sending database queries to a server, Userbase sends the user's data to the browser. Queries happen client-side, and there is nothing on the backend to manage or worry about.</p> <h3 id="e2ee-database">End-to-end encryption</h3> <p>Userbase encrypts all database operations in the browser with user-controlled keys. This helps you prevent personal data misuse, and lets you offer a high level of data privacy.</p> <h3 id="open-source">Open source</h3> <p>Userbase is <a href="https://github.com/encrypted-dev/userbase">100% open source</a>, MIT licensed. You can host it yourself always under your control, or we can run it for you for a full serverless experience.</p> </div> <div class="section mt-10"> <h2 id="what-would-i-use-it">When would I use it?</h2> <p>If you're building a web app, you will likely need a database and a backend. Userbase can replace both... </p> <ul> <li>If you want to build a web app without writing any backend code.</li> <li>If you want secure authentication out of the box.</li> <li>If you want to store user data securely.</li> <li>If you want to radically simplify your GDPR compliance.</li> <li>And if you want to keep things really simple.</li> </ul> <p>Check out the <a href="/docs/faq/">FAQ</a> for more details.</p> </div> <div class="section mt-10"> <h2 id="how-do-i-start">How do I start?</h2> <p>The easiest way to get started is to create a <a href="https://v1.userbase.com/#create-admin">free admin account</a> and follow our <a href="/docs/">Quickstart</a> guide. If you have any questions, or if there's anything we can do to help you, please <a href="/contact/">get in touch</a>. Thank you for all your support and interest in this project!</p> </div> <hr> <footer class="text-center py-4 tracking-tight text-sm"> <div> <nav class="pt-2 pb-4 text-center menu"> <a href="/about/" class="py-2 leading-none px-2">About</a> <a href="/pricing/" class="py-2 leading-none px-2">Pricing</a> <a href="/policies/" class="py-2 leading-none px-2">Policies</a> <a href="http://github.com/encrypted-dev/userbase" class="py-2 leading-none px-2">GitHub</a> <a href="https://twitter.com/UserbaseHQ" class="py-2 leading-none px-2">Twitter</a> <a href="/announcements/" class="py-2 leading-none px-2">Announcements</a> </nav> </div> <div class="text-gray-500 text-xs"> This site is <a href="https://github.com/encrypted-dev/userbase-homepage" target="_blank">open source</a>. </div> </footer> </div> <script type="text/javascript" src="/main.js"></script> </body> </html>