`. Add two entries right after "Add new board...": Put critical CSS in `` so the menu entries stay hidden until Auth UI loads: ```html title="nullboard.html" ``` Then add the menu entries: ```html title="nullboard.html" Add new board...

Account... ``` [``](/docs/components/show) renders its children only for the matching state, so the menu shows one entry or the other. Plain links keep Nullboard's own menu styling. ## Configure and wire up sign in [#configure-and-wire-up-sign-in] Nullboard's own code is a classic ` ``` Module scripts run after the page and Nullboard's script have loaded, so `$` and `NB` are available. `AuthUI.open()` creates the modal on first use. Reload the page, open the menu, and sign up with any email and password. The menu entry turns into "Account...". ## Upload boards after every change [#upload-boards-after-every-change] Nullboard keeps boards in `NB.storage`. Two methods matter: `saveBoard()` runs on every edit and `nukeBoard()` on delete. Wrap both so they also upload, and use [`account.updatePrefs()`](https://appwrite.io/docs/references/cloud/client-web/account#updatePrefs) to store the boards on the user. Add this inside the same module script: ```js title="nullboard.html" const account = AuthUI.getAccount(); const SYNCED = "nullboard.synced"; let restoring = false; let timer; // All boards in Nullboard's own export format, plus a timestamp. function snapshot() { const boards = []; NB.storage.getBoardIndex().forEach((meta, id) => boards.push(NB.storage.loadBoard(id, null))); return { savedAt: Date.now(), boards }; } // Upload at most once per second, only while signed in. function scheduleUpload() { if (restoring || !AuthUI.getUser()) return; clearTimeout(timer); timer = setTimeout(async () => { const data = snapshot(); await account.updatePrefs({ nullboard: data }); localStorage.setItem(SYNCED, data.savedAt); }, 1000); } // Every save or delete inside Nullboard now also uploads. for (const method of ["saveBoard", "nukeBoard"]) { const original = NB.storage[method]; NB.storage[method] = function (...args) { const result = original.apply(this, args); scheduleUpload(); return result; }; } ``` `AuthUI.getAccount()` returns the same Appwrite `Account` service Auth UI signs in with, so the call is already authenticated. `snapshot()` uses `loadBoard()`, which returns the current revision of each board without the undo history, keeping the payload small. Preferences hold up to 64 KB, which is plenty for boards. ## Restore boards on sign in [#restore-boards-on-sign-in] The last piece pulls boards down. When a user signs in, compare the timestamp stored in preferences with the one this device last synced. If another device saved more recently, import those boards and reload. If there is nothing in preferences yet, upload what is here. ```js title="nullboard.html" // Replace local boards with the ones from Appwrite, then reload to show them. function restore(data) { restoring = true; for (const board of data.boards) { board.revision--; // saveBoard() adds one back NB.storage.saveBoard(board); // updates the board index too } if (data.boards.length) NB.storage.setActiveBoard(data.boards[0].id); localStorage.setItem(SYNCED, data.savedAt); location.reload(); } AuthUI.on('signed-in', async () => { const prefs = await account.getPrefs(); const remote = prefs.nullboard; const local = Number(localStorage.getItem(SYNCED) || 0); if (remote && remote.savedAt > local) restore(remote); else if (!remote) scheduleUpload(); }); ``` The `revision--` trick is the same one Nullboard's own import uses: `saveBoard()` increments the revision, so this keeps the numbers matching. `signed-in` fires on every page load where a session exists, not only after the form, so a returning user gets the latest boards automatically. ## Try it [#try-it] Auth UI account screen opened from Nullboard

Auth UI account screen opened from Nullboard

1. Open `nullboard.html`, sign up, and add a note to the demo board. A second later the boards are in your preferences. You can see them in the Console under **Auth → Users → your user → Prefs**. 2. Open the same file in a private window, or on another machine. Sign in. The page reloads with your boards. 3. Change something there, go back to the first window and reload. The change is waiting for you. ## Where to go from here [#where-to-go-from-here] * **Deploy it.** Nullboard is static, so any host works. Add the deployed hostname as a Web platform in Appwrite, then [Appwrite Sites](https://appwrite.io/docs/products/sites) is a one-command deploy. * **Add sign-in methods.** `methods: { emailPassword: true, magicUrl: true, oauth: ["github"] }` gives you passwordless and GitHub sign in with no other changes. See [Sign-in methods](/docs/sign-in-methods). * **Match the theme.** Nullboard toggles a `theme-dark` class on ``. Pass `branding: { theme: "dark" }` when it is set, or leave `auto` to follow the system. This guide follows the happy path. Two devices editing the same board at the same moment means the later upload wins, and deleting a board on one device leaves it on devices that already have it. Both are fine for a personal board and easy to refine once you need to. # Back up OpenHabitTracker to Appwrite (/docs/guides/openhabittracker) [OpenHabitTracker](https://github.com/Jinjinov/OpenHabitTracker) is a habit, task and note tracker written in C# with Blazor. Its [PWA](https://pwa.openhabittracker.net) keeps everything in the browser's IndexedDB, with a manual JSON export as the only way out. In this guide you add Auth UI to the PWA, put "Back up" and "Restore" buttons next to it, and store the backup as a private file in Appwrite Storage. One JavaScript file, one Razor component, no server code. Backups grow past the 64 KB that user preferences allow as soon as a habit has a year of history, which is why this guide uses Storage. Preferences remain the right place for small values, as in the [2048 guide](/docs/guides/2048). Auth UI Sign in to OpenHabitTracker modal over the habit tracker nav

Auth UI Sign in to OpenHabitTracker modal over the habit tracker nav

OpenHabitTracker nav with Auth UI after a successful Appwrite backup

## Clone and run the PWA [#clone-and-run-the-pwa] You need the [.NET 10 SDK](https://dotnet.microsoft.com/download). ```bash git clone https://github.com/Jinjinov/OpenHabitTracker.git cd OpenHabitTracker dotnet run --project OpenHabitTracker.Blazor.Wasm --launch-profile http ``` The first build takes a few minutes. Open [http://localhost:5173](http://localhost:5173) and you have the app with a welcome note. ## Create an Appwrite project and a bucket [#create-an-appwrite-project-and-a-bucket] 1. [Create a project](https://appwrite.io/docs/quick-starts/web#step-1) on Appwrite Cloud or your own instance and add a Web platform with hostname `localhost`. 2. Under **Storage**, [create a bucket](https://appwrite.io/docs/products/storage/buckets) with the ID `backups`. 3. In the bucket's **Settings**, enable **File security** and add a permission that lets the **Users** role **create** files. Each backup will carry its own read, update and delete permissions for the user who owns it, so nobody else can see it. Note the project ID and API endpoint from the Console. ## Load Auth UI [#load-auth-ui] Add one script tag at the end of `OpenHabitTracker.Blazor.Wasm/wwwroot/index.html`, after the service worker registration: ```html title="wwwroot/index.html" ``` ## Write the JavaScript side [#write-the-javascript-side] Blazor talks to JavaScript through modules. Create `OpenHabitTracker.Blazor.Wasm/wwwroot/appwrite.js` with five functions. `init` configures Auth UI and reports sign-in changes back to C#. The upload keeps one file per user, named after the user ID, with permissions for that user only. The download goes through Auth UI's client, so the request is authenticated the same way as everything else, and because the file is JSON the client hands back the parsed object. ```js title="wwwroot/appwrite.js" import { AuthUI, appwrite } from "https://unpkg.com/@getauthui/core@0.1.45"; const { Storage, Permission, Role } = appwrite; const BUCKET = "backups"; export function init(endpoint, project, dotnetRef) { AuthUI.init({ endpoint, project, methods: { emailPassword: true }, branding: { name: "OpenHabitTracker" }, }); AuthUI.on("change", (state) => dotnetRef.invokeMethodAsync( "OnAuthChanged", state.status === "signed-in", state.user?.email ?? "" ) ); } export function open(view) { AuthUI.open(view); } // One file per user, named after the user ID, only that user can read or replace it. export async function uploadBackup(json) { const storage = new Storage(AuthUI.getClient()); const userId = AuthUI.getUser().$id; const file = new File([json], "OpenHabitTracker.json", { type: "application/json" }); const permissions = [ Permission.read(Role.user(userId)), Permission.update(Role.user(userId)), Permission.delete(Role.user(userId)), ]; try { await storage.deleteFile(BUCKET, userId); } catch { /* first backup */ } await storage.createFile(BUCKET, userId, file, permissions); } export async function downloadBackup() { const storage = new Storage(AuthUI.getClient()); const userId = AuthUI.getUser().$id; const url = new URL(storage.getFileDownload(BUCKET, userId)); const data = await AuthUI.getClient().call("get", url); // the file is JSON, so the client parses it return JSON.stringify(data); } ``` `appwrite` is the Appwrite Web SDK, re-exported by Auth UI so the page loads it once. `AuthUI.getClient()` is the signed-in client, and `AuthUI.getUser()` the current user. See the Appwrite docs for [`createFile`](https://appwrite.io/docs/references/cloud/client-web/storage#createFile) and [permissions](https://appwrite.io/docs/advanced/platform/permissions). ## Enable the nav bar slot [#enable-the-nav-bar-slot] The shared layout has a slot for a login display in the navigation bar, but it is commented out. Open `OpenHabitTracker.Blazor/Layout/Main.razor`, find the block near the end of the `

` element, and remove the `@*` and `*@` comment markers around it: ```razor title="OpenHabitTracker.Blazor/Layout/Main.razor" @NavBarFragment.GetNavBarFragment() ``` In the PWA that slot renders `Layout/LoginDisplay.razor` through `Layout/NavBarFragment.cs`. The existing component is wired to an OIDC setup the app does not use, so you replace it next. ## Put the buttons in the nav bar [#put-the-buttons-in-the-nav-bar] Replace the whole of `OpenHabitTracker.Blazor.Wasm/Layout/LoginDisplay.razor`: ```razor title="Layout/LoginDisplay.razor" @using System.Text @using Microsoft.AspNetCore.Components.Web @using Microsoft.JSInterop @using OpenHabitTracker.Backup @inject IJSRuntime JS @inject NavigationManager Navigation @inject ImportExportService ImportExportService @implements IAsyncDisposable

@if (_signedIn) { @if (!string.IsNullOrEmpty(_status)) { } } else { }

@code { private IJSObjectReference? _module; private DotNetObjectReference? _self; private bool _signedIn; private string _email = string.Empty; private bool _busy; private string _status = string.Empty; protected override async Task OnAfterRenderAsync(bool firstRender) { if (!firstRender) return; _module = await JS.InvokeAsync("import", "./appwrite.js"); _self = DotNetObjectReference.Create(this); await _module.InvokeVoidAsync("init", "https://fra.cloud.appwrite.io/v1", "YOUR_PROJECT_ID", _self); } [JSInvokable] public void OnAuthChanged(bool signedIn, string email) { _signedIn = signedIn; _email = email; StateHasChanged(); } private async Task OpenSignIn() { if (_module is not null) await _module.InvokeVoidAsync("open", "sign-in"); } private async Task OpenAccount() { if (_module is not null) await _module.InvokeVoidAsync("open", "account"); } private async Task BackUp() { if (_module is null) return; _busy = true; string json = await ImportExportService.GetDataExportFileString(FileFormat.Json); await _module.InvokeVoidAsync("uploadBackup", json); _status = $"Backed up {DateTime.Now:HH:mm}"; _busy = false; } private async Task Restore() { if (_module is null) return; _busy = true; string json = await _module.InvokeAsync("downloadBackup"); using MemoryStream stream = new(Encoding.UTF8.GetBytes(json)); await ImportExportService.ImportDataFile("OpenHabitTracker.json", stream); Navigation.NavigateTo(Navigation.Uri, forceLoad: true); // reload so every view reads the restored data } public async ValueTask DisposeAsync() { _self?.Dispose(); if (_module is not null) await _module.DisposeAsync(); } } ``` Nothing here is new to the app. `ImportExportService` is the same service behind the **Data → Export JSON** and **Import** buttons, and `DotNetObjectReference` with `[JSInvokable]` is how the app already receives notification clicks from JavaScript. `AuthUI.on("change")` calls `OnAuthChanged` on every state change, so the nav bar re-renders when the modal closes. ## Try it [#try-it] OpenHabitTracker signed-in nav with Back up, Restore and Account

1. Run the app, click **Sign in** in the nav bar, and sign up. The buttons change to **Back up**, **Restore** and **Account**. 2. Click **Back up**. The file appears in the Console under **Storage → backups**, with permissions for your user only. 3. Open [http://localhost:5173](http://localhost:5173) in a private window, sign in, click **Restore**. The app reloads with your data. ## Where to go from here [#where-to-go-from-here] * **Back up automatically.** Call `BackUp()` from a timer, or after `ClientState` changes, instead of on click. * **Show the last backup time.** Read the file's `$updatedAt` with `storage.getFile()` and put it next to the buttons, or keep it in user preferences. * **Ship it as a PWA.** Publish with `dotnet publish -c Release` and add the deployed hostname as a Web platform. A script loaded from the CDN is not in the service worker's cache, so sign in and backup need a connection even when the rest of the app works offline. Copy the module into `wwwroot` if you want it cached too. This guide follows the happy path. Import in OpenHabitTracker adds to existing data rather than replacing it, so restoring on a device that already has the same items duplicates them. Restore onto a fresh device, or use **Data → Delete all data** first. # Preview mode (/docs/guides/preview-mode) Set `preview: true` and Auth UI swaps the Appwrite SDK for an in-memory stand-in. No request leaves the page. Auth UI sign-in modal in preview mode with the Preview badge

```html ``` ```ts AuthUI.init({ endpoint: "https://cloud.appwrite.io/v1", project: "demo", preview: true }); ``` ## What it does [#what-it-does] * **Any credentials work.** Every email, password, one-time code, recovery code and TOTP code is accepted. Sign up, guest and OAuth complete in place instead of redirecting. * **A sample account** named Ada Lovelace with a verified email, three active sessions on different devices, a connected GitHub identity and a short security log. * **MFA end to end.** Enrolling an authenticator shows a placeholder QR code. Once MFA is switched on, the next sign in asks for a challenge. Reading or regenerating recovery codes and removing the authenticator require a recent challenge, exactly like the server, so the step-up flow can be seen too. * **Passwordless flows** return a security phrase and accept any code. Magic URL shows the "link sent" state. * **A Preview badge** appears on the sign-in and account screens so nobody mistakes it for a real session. * **Redirect parameters are ignored**, so a preview page never tries to redeem tokens from the URL. Use it for design reviews, Storybook stories, marketing pages and playgrounds. It is what the [playground](/playground) and the landing page demo run on. Auth UI account screen in preview mode after previewSignIn

## Driving it from code [#driving-it-from-code] ```ts import { AuthUI } from "@getauthui/core"; AuthUI.init({ endpoint: "https://cloud.appwrite.io/v1", project: "demo", preview: true }); await AuthUI.previewSignIn(); // skip the form and land on the account screen AuthUI.open("account"); ``` `authStore.isPreview` reports whether preview mode is active. ## Never in production [#never-in-production] Preview mode signs anyone in. It exists only for showing the interface. Leave `preview` unset in any page real users can reach. # Security notes (/docs/guides/security) Auth UI sign-in modal talking to your Appwrite endpoint from the page origin

* **No credentials leave your origin except to Appwrite.** Passwords, codes and tokens go straight from the browser to your configured endpoint through the official SDK. Auth UI has no backend and phones home to nothing. * **Sessions are managed by the Appwrite SDK.** Auth UI never reads, stores or forwards the session secret. Whether it is a cookie or the SDK's `localStorage` fallback depends on your Appwrite setup, exactly as it would without Auth UI. * **Redirect URLs are cleaned.** After finishing an OAuth, magic URL, recovery or verification flow, Auth UI removes `userId`, `secret` and related parameters from the address bar before rendering. * **Redirect targets are validated by Appwrite.** Every URL Auth UI registers with Appwrite must be on a platform you configured in the Console, so tokens cannot be sent to an attacker's site. * **OAuth uses the token flow.** The provider returns a one-time token that the page redeems immediately; no session is created on a redirect. * **MFA is enforced server side.** Auth UI only renders what Appwrite requires. Protected actions that need a fresh factor trigger an inline challenge. * **Content Security Policy.** With npm the library is part of your bundle and needs no extra `script-src`. For the CDN, allow the script and stylesheet host (docs pin `https://unpkg.com`) and your Appwrite endpoint: ```http Content-Security-Policy: default-src 'self'; script-src 'self' https://unpkg.com https://accounts.google.com; connect-src 'self' https://cloud.appwrite.io https://*.cloud.appwrite.io https://fra.cloud.appwrite.io https://accounts.google.com; style-src 'self' https://unpkg.com; img-src 'self' data: https:; frame-src https://accounts.google.com; ``` When Google One Tap is enabled (`oneTap` / `one-tap`), allow `https://accounts.google.com` in `script-src`, `frame-src` and typically `connect-src`. Without One Tap you can keep `frame-src 'none'` and omit the Google hosts from `script-src` / `connect-src`. Replace the `connect-src` hosts with your Appwrite endpoint's origin. Allowlist the CDN host you pin in both `script-src` and `style-src`, or self-host `fouc.css` under `'self'` and omit the CDN from `style-src`. The in-module FOUC guard uses `document.adoptedStyleSheets` (CSP-exempt). Browsers without constructable stylesheets fall back to an inline `