> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rhinestone.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Accounts
> Install the embedded wallet SDK, initialize one client, and obtain a user's smart account.
export const CSS = ".rhinestone-1auth-demo .oa-demo {\n margin: 1.5rem 0;\n border: 1px solid #202127;\n border-radius: 16px;\n background: #0b0c0e;\n overflow: hidden;\n}\n.rhinestone-1auth-demo .oa-demo-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n min-height: 39px;\n padding: 0.625rem 1rem;\n border-bottom: 1px solid #191a1e;\n}\n.rhinestone-1auth-demo .oa-demo-title {\n font-size: 0.8125rem;\n font-weight: 500;\n letter-spacing: -0.01em;\n color: #e4e4e9;\n}\n.rhinestone-1auth-demo .oa-demo-status {\n display: flex;\n align-items: center;\n gap: 0.4375rem;\n flex: 0 0 auto;\n font-size: 0.75rem;\n color: #5e5e68;\n}\n.rhinestone-1auth-demo .oa-demo-dot {\n width: 6px;\n height: 6px;\n border-radius: 999px;\n background: #3f3f48;\n}\n.rhinestone-1auth-demo .oa-demo-dot[data-state=\"on\"] {\n background: #22c55e;\n box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);\n}\n.rhinestone-1auth-demo .oa-demo-body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: 1rem;\n}\n.rhinestone-1auth-demo .demo-container {\n display: contents;\n}\n.rhinestone-1auth-demo .oa-demo-body > * > [style] {\n margin: 0 !important;\n}\n.rhinestone-1auth-demo .oa-demo-body > * > div[style]:not([class]) {\n padding: 0 !important;\n}\n.rhinestone-1auth-demo .oa-demo-body [style] {\n text-align: left !important;\n}\n.rhinestone-1auth-demo .oa-demo-body [style*=\"justify-content: center\"] {\n justify-content: flex-start !important;\n}\n.rhinestone-1auth-demo .demo-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n height: 2.25rem;\n padding: 0 0.875rem;\n border: none;\n border-radius: 10px;\n background: #4f41ef;\n color: #ffffff;\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n transition:\n background 0.15s ease,\n opacity 0.15s ease;\n}\n.rhinestone-1auth-demo .demo-button:hover:not(:disabled) {\n background: #6355f5;\n}\n.rhinestone-1auth-demo .demo-button:disabled {\n opacity: 0.6;\n cursor: default;\n}\n.rhinestone-1auth-demo .demo-button-secondary {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 2.25rem;\n padding: 0 0.875rem;\n border: 1px solid #2e2e36;\n border-radius: 10px;\n background: transparent;\n color: #c8c8d0;\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n color 0.15s ease;\n}\n.rhinestone-1auth-demo .demo-button-secondary:hover:not(:disabled) {\n border-color: #45454f;\n color: #f2f2f5;\n}\n.rhinestone-1auth-demo .oa-demo-body > * > .demo-button, .rhinestone-1auth-demo .oa-demo-body > * > .demo-button-secondary {\n align-self: flex-start;\n}\n.rhinestone-1auth-demo .oa-demo-body input[type=\"checkbox\"] {\n accent-color: #4f41ef;\n}\n.rhinestone-1auth-demo .demo-result {\n padding: 0.75rem 0.875rem;\n border-radius: 10px;\n background: #14151a;\n}\n.rhinestone-1auth-demo .demo-result-label {\n font-size: 0.6875rem;\n font-weight: 500;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: #6e6e78;\n}\n.rhinestone-1auth-demo .demo-result-value {\n margin-top: 0.1875rem;\n font-family: paperMono, ui-monospace, SFMono-Regular, Menlo, monospace;\n font-size: 0.8125rem;\n line-height: 1.5;\n color: #e4e4e9;\n overflow-wrap: anywhere;\n}\n.rhinestone-1auth-demo .demo-result-success .demo-result-label {\n color: #4ade80;\n}\n.rhinestone-1auth-demo .demo-result-error .demo-result-label {\n color: #f87171;\n}\n.rhinestone-1auth-demo .demo-result-error .demo-result-value {\n color: #fca5a5;\n}\n.rhinestone-1auth-demo .demo-error {\n margin: 0;\n font-size: 0.8125rem;\n color: #f87171;\n overflow-wrap: anywhere;\n}\n.rhinestone-1auth-demo .oa-demo-skeleton {\n display: block;\n width: 7rem;\n height: 2.25rem;\n border-radius: 10px;\n background: #16171c;\n animation: rhinestone-1auth-demo-pulse 1.6s ease-in-out infinite;\n}\n@keyframes rhinestone-1auth-demo-pulse {\n 50% {\n opacity: 0.45;\n }\n}";
export const SOURCE_COMMIT = "e06ebe8add704e95f679eaddc38fd7ea88cb3de8";
export const SDK_VERSION = "0.10.1";
export const VIEM_VERSION = "2.55.0";
export const STORAGE_KEY = "rhinestone-docs-1auth-account";
export const PROD_BACKENDS = {
auth: "https://passkey.1auth.app",
sponsorship: "https://docs.1auth.app/api/sponsorship"
};
export const DEV_BACKENDS = {
auth: "https://passkey.passkey-test.app",
sponsorship: "https://docs.passkey-test.app/api/sponsorship"
};
export const PROD_DOCS_HOST = "docs.rhinestone.dev";
export const backends = () => {
const host = typeof window === "undefined" ? "" : window.location.hostname;
return host === PROD_DOCS_HOST ? PROD_BACKENDS : DEV_BACKENDS;
};
export const BACKEND_NOTE = "Only the production docs host talks to the production Rhinestone deployment. " + "Every other host — a Mintlify preview, a tunnel, localhost — uses dev, so " + "an unrecognised preview pattern fails towards dev rather than creating " + "passkey state against production.";
export const CDN = spec => "https://esm.sh/" + spec + (spec.startsWith("@rhinestone/1auth@") ? "?deps=viem@" + VIEM_VERSION + "&external=react" : "");
export const shareReact = () => {
if (window.__OA_SHARED_REACT__) return;
if (typeof HTMLScriptElement.supports !== "function" || !HTMLScriptElement.supports("importmap")) {
throw new Error("This demo requires a browser with import-map support.");
}
window.__OA_REACT__ = React;
const reserved = ["default", "import", "export", "class", "function", "const", "let", "var", "new", "delete", "typeof", "void", "in", "of", "do", "if", "else", "for", "while", "switch", "case", "break", "continue", "return", "this", "super", "throw", "try", "catch", "finally", "yield", "await", "enum", "null", "true", "false", "with", "debugger", "instanceof", "extends", "static"];
const names = Object.keys(React).filter(name => (/^[A-Za-z_$][A-Za-z0-9_$]*$/).test(name) && !reserved.includes(name));
const source = ["const R = globalThis.__OA_REACT__; export default R;", ...names.map(name => "export const " + name + " = R." + name + ";")].join(" ");
const jsx = ["const R = globalThis.__OA_REACT__; export const Fragment = R.Fragment;", "export const jsx = (type, props, key) => R.createElement(type, key == null ? props : { ...props, key });", "export const jsxs = jsx; export const jsxDEV = jsx;"].join(" ");
const dataUrl = value => "data:text/javascript," + encodeURIComponent(value);
const script = document.createElement("script");
script.type = "importmap";
script.textContent = JSON.stringify({
imports: {
react: dataUrl(source),
"react/jsx-runtime": dataUrl(jsx),
"react/jsx-dev-runtime": dataUrl(jsx)
}
});
document.head.appendChild(script);
window.__OA_SHARED_REACT__ = true;
};
export const MODULE_SPECS = {
sdk: () => CDN("@rhinestone/1auth@" + SDK_VERSION),
viem: () => CDN("viem@" + VIEM_VERSION)
};
export const importModule = url => new Promise((resolve, reject) => {
const key = "__oa_" + Math.random().toString(36).slice(2);
window[key] = {
resolve,
reject
};
const script = document.createElement("script");
script.type = "module";
script.textContent = "import(" + JSON.stringify(url) + ").then(m => window[" + JSON.stringify(key) + "].resolve(m))" + ".catch(e => window[" + JSON.stringify(key) + "].reject(new Error(String(e))));";
script.onerror = () => reject(new Error("failed to load " + url));
document.head.appendChild(script);
script.remove();
});
export const importModuleWithRetry = async url => {
try {
return await importModule(url);
} catch (first) {
await new Promise(r => setTimeout(r, 500));
return importModule(url);
}
};
export const loadDeps = async () => {
shareReact();
const specs = Object.entries(MODULE_SPECS).map(([name, spec]) => [name, spec()]);
const cacheKey = "__OA_DEPS__" + specs.map(([, url]) => url).join("|");
if (window[cacheKey]) return window[cacheKey];
const loaded = await Promise.all(specs.map(([, url]) => importModuleWithRetry(url)));
const deps = {
React
};
specs.forEach(([name], i) => {
deps[name] = loaded[i];
});
deps.motion = motionShim();
window[cacheKey] = deps;
return deps;
};
export const unreachable = call => "Sponsorship " + call + " never reached " + backends().sponsorship + ". The browser hides why: a rejected origin, a failed preflight and a network" + " error all look identical here. The failing request is in the console.";
export const sponsorship = {
accessToken: async () => {
let res;
try {
res = await fetch(backends().sponsorship + "/access-token", {
method: "GET",
credentials: "include"
});
} catch (e) {
throw new Error(unreachable("access token"));
}
if (!res.ok) throw new Error("Sponsorship access token failed (" + res.status + ")");
return (await res.json()).token;
},
getExtensionToken: async intentOp => {
let res;
try {
res = await fetch(backends().sponsorship + "/extension-token", {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
intentOp
})
});
} catch (e) {
throw new Error(unreachable("extension token"));
}
if (!res.ok) throw new Error("Sponsorship extension token failed (" + res.status + ")");
return (await res.json()).token;
}
};
export const motionShim = () => {
const passthrough = Tag => React.forwardRef((props, ref) => {
const rest = Object.fromEntries(Object.entries(props).filter(([k]) => !["initial", "animate", "exit", "transition", "variants", "whileHover", "whileTap", "layout", "layoutId"].includes(k)));
return React.createElement(Tag, {
...rest,
ref
});
});
const cache = {};
return {
motion: new Proxy({}, {
get: (_, tag) => {
if (!cache[tag]) cache[tag] = passthrough(tag);
return cache[tag];
}
}),
AnimatePresence: ({children}) => React.createElement(React.Fragment, null, children),
useReducedMotion: () => true
};
};
export const AuthContext = React.createContext(null);
export const useAuthContext = () => React.useContext(AuthContext);
export const buildModules = deps => {
const mods = {};
mods.authctx = (() => {
const DOCS_APP_ORIGIN_STORAGE_KEY = STORAGE_KEY;
const useAuth = () => useAuthContext();
return {
DOCS_APP_ORIGIN_STORAGE_KEY,
useAuth,
clearDocsSession: () => {}
};
})();
mods.constants = (() => {
const DOCS_APP_ORIGIN_CLIENT_ID = "docs-app-origin";
function docsAppOriginWebAuthn() {
if (typeof window === "undefined" || window.location.protocol !== "https:") {
return {
mode: "app_origin"
};
}
return {
mode: "app_origin",
rpId: window.location.hostname
};
}
const DOCS_EXPERIMENTAL_CLEAR_SIGNING = true;
const APP_ORIGIN_DEMO_CAPABILITIES = {
payButton: true,
eip1193Transactions: true,
sendCalls: true,
batchCalls: true,
messageSigning: true,
typedDataSigning: true,
batchIntents: true,
smartSessions: true,
walletConnection: true,
recovery: true
};
const DOCS_DIALOG_THEME = {
mode: "dark",
accent: "#ffffff",
backdrop: {
color: "#52525c",
opacity: 0.5,
blur: 12
}
};
const MOCK_USD_ADDRESS = "0x2f6fdE5E2AeAB6335d8f978B4d8B2a9c1129AcFb";
const RECIPIENT_ADDRESS = "0x180b791BD181DF1773E4e33cb0374b258936d186";
const MOCK_RWA_ADDRESS = "0x5948C7E284174f6Df0f2505fb3CBFbd685154323";
const MOCK_SWAP_ADDRESS = "0xf2DFDC35d46e62F6D026afa36Cc6e941174B67f1";
const MOCK_NFT_V2_ADDRESS = "0x99CCb273351Cf13713F7Bf5A0716d7C2a3DD4712";
const MOCK_NFT_LUIGI_ID = 1n;
const NVDA_ICON_SVG = `
Try a passkey account
{children}
;
export const AppOriginDemo = () => {
const [deps, setDeps] = React.useState(null);
const [loadError, setLoadError] = React.useState("");
const [connecting, setConnecting] = React.useState(false);
React.useEffect(() => {
let cancelled = false;
loadDeps().then(d => !cancelled && setDeps(d)).catch(e => !cancelled && setLoadError(String(e.message ?? e)));
return () => {
cancelled = true;
};
}, []);
const mods = React.useMemo(() => deps ? buildModules(deps) : null, [deps]);
const auth = {
sponsorship
};
return
{
setConnecting(true);
setLoadError("");
try {
await auth.login();
} catch (error) {
setLoadError(String(error.message ?? error));
} finally {
setConnecting(false);
}
}}>{connecting ? "Signing in..." : "Sign in to try it"}
{loadError ?
{loadError}
: null}
: mods && (auth.client || true) ? React.createElement(mods.appOriginDemo.AppOriginDemo, {
key: auth.address
}) : loadError ? {loadError}
:
;
};
Embedded wallets give each user a passkey-controlled smart account for your application. The account has the same address on every supported EVM chain, but it is isolated from accounts the same person creates in other applications.
## Before you start
* Use Node.js and a browser application served over HTTPS. The hosted provider does not accept plain `http://localhost`; use local HTTPS for development.
* [Register your application and domains in the Dashboard](/home/resources/dashboard).
* [Configure sponsorship token endpoints](/transactions/sponsorship/set-up) before calling intent or asset methods. Authentication itself does not require a funded account.
## Install the SDK
```bash npm theme={null}
npm install @rhinestone/1auth
```
```bash pnpm theme={null}
pnpm add @rhinestone/1auth
```
```bash yarn theme={null}
yarn add @rhinestone/1auth
```
The examples on this page are supported by the public `@rhinestone/1auth` `0.10.1` release.
## Initialize the client
Create one client and reuse it throughout your application:
```ts oneauth.ts {3} theme={null}
import { OneAuthClient } from "@rhinestone/1auth"
export const oneAuth = new OneAuthClient({
providerUrl: "https://passkey.1auth.app",
clientId: "my-app",
sponsorship: {
accessTokenUrl: "/api/sponsorship/access-token",
extensionTokenUrl: "/api/sponsorship/extension-token",
},
})
```
Replace `my-app` with the client ID of your registered application. The sponsorship URLs are same-origin backend endpoints; follow [Sponsorship setup](/transactions/sponsorship/set-up) to implement them.
## Authenticate and obtain an account
```ts {3,9} theme={null}
import { oneAuth } from "./oneauth"
const auth = await oneAuth.authenticate()
if (!auth.success) {
throw new Error(auth.error.message)
}
const accountAddress = auth.session.accountAddress
console.log(accountAddress)
```
`accountAddress` is a typed `0x${string}` address. Authentication creates an account when the verified identity has none in your application's namespace, or signs in to the existing account.
To restore a current wallet session without opening the dialog, call `getSession()`:
```ts theme={null}
const session = await oneAuth.getSession()
const accountAddress = session.success
? session.session.accountAddress
: undefined
```
## Account isolation
Passkeys are created and used on your application's domain. By default, each hostname has its own passkey and account namespace, even when the user verifies the same email or OAuth identity. Funding and recovery configuration remain isolated to that namespace.
See [Passkeys and domains](/wallets/embedded-wallets/passkeys-and-domains) before sharing accounts across subdomains or changing your production hostname. Changing the RP ID selects a different account; existing balances do not move automatically.
## Account management
Build account management in your application. Account-management popups, redirect signing, inline-embed signing, and `openAccountDialog()` are not supported for these wallets and return `APP_ORIGIN_FLOW_UNSUPPORTED`.
## Try an account
Create or use a passkey for this docs hostname, then check the session or send a test transaction. The test intent mints 0.1 mUSD on Base Sepolia with sponsored fees. It uses clear signing: review the prepared action before approving the passkey prompt.