:root {
  /* Colors */
  --privy-bg: #ffffff;
  --privy-bg-elevated: #f1f2f9;
  --privy-bg-success: #dcfce7;
  --privy-bg-info: #e0e7ff;
  --privy-bg-warning: #fef3c7;
  --privy-bg-hero: #c4d4f6;
  --privy-text-primary: #010110;
  --privy-text-muted: #64668b;
  --privy-text-placeholder: #9498b8;
  --privy-border: #e2e3f0;
  --privy-border-success: #22c55e;
  --privy-border-info: #818cf8;
  --privy-border-warning: #f59e0b;
  --privy-icon-success: #16a34a;
  --privy-icon-info: #4f46e5;
  --privy-icon-warning: #d97706;

  --privy-dark-bg: #010110;
  --privy-dark-bg-elevated: #22222a;
  --privy-dark-bg-success: #bbf7d02e;
  --privy-dark-bg-info: #c7d2fe2e;
  --privy-dark-bg-warning: #fde68a2e;
  --privy-dark-bg-hero: #22222a;
  --privy-dark-text-primary: #ffffff;
  --privy-dark-text-muted: #cbcde1;
  --privy-dark-border: #333455;
  --privy-dark-icon-success: #86efac;
  --privy-dark-icon-info: #a5b4fc;
  --privy-dark-icon-warning: #fcd34d;

  /* one off colors */
  --privy-light-codeblock-bg: #f2f4fd;
  --privy-light-codeblock-highlight-bg: rgba(91, 79, 255, 0.2);
  --privy-light-codeblock-highlight-left-border: rgba(91, 79, 255, 1);
  --privy-dark-codeblock-highlight-bg: rgba(209, 49, 108, 0.2);
  --privy-dark-codeblock-highlight-left-border: rgba(209, 49, 108, 1);
}

html {
  scroll-behavior: smooth;
}

/* Search bar */
.dark #search-bar-entry {
  background-color: var(--privy-dark-bg-elevated);
}

/* Navbar CTA button */
#topbar-cta-button a span {
  background-color: var(--privy-text-primary);
}

#topbar-cta-button a:hover * {
  opacity: 1;
}

#topbar-cta-button a svg {
  color: currentColor;
}

.dark #topbar-cta-button a span {
  color: var(--privy-dark-bg);
  background-color: var(--privy-dark-text-primary);
}

.dark #topbar-cta-button a {
  color: var(--privy-dark-bg);
}

/* Card */
.card {
  border-width: 0;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--privy-border);
}

.card:hover {
  box-shadow: 0 0 0 2px var(--privy-text-primary);
}

.dark .card {
  box-shadow: 0 0 0 0;
  background-color: var(--privy-dark-bg-elevated);
}

.dark .card:hover {
  box-shadow: 0 0 0 2px var(--privy-dark-text-primary);
}

/* Hero */
.hero {
  width: 100%;
  background-image: url('https://privy-assets-public.s3.us-east-1.amazonaws.com/bg-light.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 62px;
  padding: 114px 32px 84px 32px;

  display: flex;
  flex-direction: column;
  gap: 24px;

  color: var(--privy-text-primary);

  transition: background-image 0.3s ease-in-out;
}

.dark .hero {
  background-image: url('https://privy-assets-public.s3.us-east-1.amazonaws.com/bg-darkgray.png');
  color: var(--privy-dark-text-primary);
}

.hero h1 {
  font-size: 52px;
  font-weight: 500;
  /* font-family: 'ABC Favorit Variable Unlicensed Trial', 'Inter-regular', sans-serif; */
}

.hero .search {
  width: 100%;
  max-width: 450px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--privy-border);
  background-color: white;
  margin: 0 auto;
  color: var(--privy-text-placeholder);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 14px;
  cursor: pointer;
}

.hero .details-text {
  max-width: 38rem;
  margin: 0 auto;
  background: rgba(256, 256, 256, 0.6);
}

.dark .hero .details-text {
  background: rgba(0, 0, 0, 0);
}

.dark .hero .search {
  background-color: transparent;
}

.subtitle {
  color: var(--privy-text-primary);
  font-size: 20px;
  font-weight: 600;
}

.dark .subtitle {
  color: var(--privy-dark-text-primary);
}

/* Misc */
.no-underline {
  text-decoration: none !important;
  border-bottom: 0px;
}

.no-underline p {
  margin: 0;
}

/* Callouts */
/* Callouts - Tip */
div[data-callout-type='tip'] {
  border-radius: 12px;
  background-color: var(--privy-bg-success);
  border-color: var(--privy-border-success);

  & > div {
    color: var(--privy-text-primary);
  }

  & a {
    transition: border 100ms ease-in-out;
    border-color: var(--privy-text-primary);
  }

  & > div > svg {
    color: var(--privy-icon-success);
  }
}

.dark div[data-callout-type='tip'] {
  background-color: var(--privy-dark-bg-success);
  border-width: 0;

  & > div {
    color: var(--privy-dark-text-primary);
  }

  & a {
    border-color: var(--privy-dark-text-primary);
  }

  & > div > svg {
    color: var(--privy-dark-icon-success);
  }
}

/* Callouts - Info */
div[data-callout-type='info'] {
  border-radius: 12px;
  background-color: var(--privy-bg-info);
  border-color: var(--privy-border-info);

  & > div {
    color: var(--privy-text-primary);
  }

  & a {
    transition: border 100ms ease-in-out;
    border-color: var(--privy-text-primary);
  }

  & > div > svg {
    color: var(--privy-icon-info);
  }
}

.dark div[data-callout-type='info'] {
  background-color: var(--privy-dark-bg-info);
  border-width: 0;

  & > div {
    color: var(--privy-dark-text-primary);
  }

  & a {
    transition: border 100ms ease-in-out;
    border-color: var(--privy-dark-text-primary);
  }

  & > div > svg {
    color: var(--privy-dark-icon-info);
  }
}

/* Callouts - Warning */
div[data-callout-type='warning'] {
  border-radius: 12px;
  background-color: var(--privy-bg-warning);
  border-color: var(--privy-border-warning);

  & > div {
    color: var(--privy-text-primary);
  }

  & a {
    transition: border 100ms ease-in-out;
    border-color: var(--privy-text-primary);
  }

  & > div > svg {
    color: var(--privy-icon-warning);
  }
}

.dark div[data-callout-type='warning'] {
  background-color: var(--privy-dark-bg-warning);
  border-width: 0;

  & > div {
    color: var(--privy-dark-text-primary);
  }

  & a {
    border-color: var(--privy-dark-text-primary);
  }

  & > div > svg {
    color: var(--privy-dark-icon-warning);
  }
}

/* Navigation items */
#navigation-items li a {
  border-radius: 6px;

  &.bg-primary\/10 {
    background-color: var(--privy-bg-elevated);
  }
}

.dark #navigation-items li a.bg-primary\/10 {
  background-color: var(--privy-dark-bg-elevated);
}

/* Codeblocks */
.codeblock-dark {
  border-radius: 12px;
}

.dark\:bg-codeblock:is(.dark *):not([id*='accordion'] *) {
  background-color: var(--privy-dark-bg-hero);
}

body .codeblock-light,
.codeblock-light:is(.bg-white) {
  background-color: var(--privy-light-codeblock-bg);
  border: none;
}

/* Special case for dark mode accordion codeblocks */
.dark [id*='accordion'] .codeblock-light {
  background-color: var(--privy-dark-bg);
}

html:not(.dark) .codeblock-light .line-highlight,
html:not(.dark) .codeblock-light .line-highlight:after,
html:not(.dark) .codeblock-light .line-highlight:before {
  background: var(--privy-light-codeblock-highlight-bg);
}

html:not(.dark) .codeblock-light .line-highlight:before {
  left: -1.25rem;
  border-left: 4px solid var(--privy-light-codeblock-highlight-left-border);
}

html:is(.dark) .codeblock-light .line-highlight,
html:is(.dark) .codeblock-light .line-highlight:after,
html:is(.dark) .codeblock-light .line-highlight:before {
  background: var(--privy-dark-codeblock-highlight-bg);
}

html:is(.dark) .codeblock-light .line-highlight:before {
  left: -1.25rem;
  border-left: 4px solid var(--privy-dark-codeblock-highlight-left-border);
}

/* Tables */
table > thead {
  text-align: left;
}

.prose
  :where(a):not(:has(svg)):not(:has(code)):not(
    :where([class~='not-prose'], [class~='not-prose'] *)
  ):not(.dark *) {
  border-bottom: 1px solid var(--privy-text-primary);
}

.prose :where(a code):not(:where([class~='not-prose'], [class~='not-prose'] *)):not(.dark *) {
  text-decoration-color: var(--privy-text-primary);
}

.prose
  :where(a:has(code)):not(:has(svg)):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
  border-bottom: none;
}

/* hide the up arrow from cards */
.card .lucide-arrow-up-right {
  display: none;
}

/* Recipes page */
.recipes {
  width: 100%;
  margin-bottom: 62px;
  padding: 74px 32px 84px 32px;
  background-size: cover;

  display: flex;
  flex-direction: column;
  gap: 24px;

  color: var(--privy-text-primary);

  transition: background-image 0.3s ease-in-out;
}

.dark .recipes {
  color: var(--privy-dark-text-primary);
}

.recipes h1 {
  font-size: 52px;
  font-weight: 400;
  /* font-family: 'ABC Favorit Variable Unlicensed Trial', 'Inter-regular', sans-serif; */
}

.recipes .search {
  width: 100%;
  max-width: 450px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--privy-border);
  background-color: white;
  margin: 0 auto;
  color: var(--privy-text-placeholder);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 14px;
  cursor: pointer;
}

.dark .recipes .search {
  background-color: transparent;
}

#navbar a[href='/welcome'] {
  display: none;
}

#navbar a[href='/basics/get-started/about'] {
  margin-left: 0px;
}

.search {
  max-width: 500px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  background-color: #f3f4f6;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.search-input {
  border: none;
  background: transparent;
  width: 100%;
  outline: none;
  font-size: 0.875rem;
}

.card-group-wrapper {
  max-width: 48rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2.5rem;
}

@media (min-width: 1024px) {
  .card-group-wrapper {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}


function clickOnSearch() {
  document.getElementById('search-bar-entry-mobile').click();
}


window['_fs_host'] = 'fullstory.com';
window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
window['_fs_org'] = 'o-22TCHH-na1';
window['_fs_namespace'] = 'FS';
!(function (m, n, e, t, l, o, g, y) {
  var s,
    f,
    a = (function (h) {
      return (
        !(h in m) ||
        (m.console &&
          m.console.log &&
          m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].'),
        !1)
      );
    })(e);
  function p(b) {
    var h,
      d = [];
    function j() {
      h &&
        (d.forEach(function (b) {
          var d;
          try {
            d = b[h[0]] && b[h[0]](h[1]);
          } catch (h) {
            return void (b[3] && b[3](h));
          }
          d && d.then ? d.then(b[2], b[3]) : b[2] && b[2](d);
        }),
        (d.length = 0));
    }
    function r(b) {
      return function (d) {
        h || ((h = [b, d]), j());
      };
    }
    return (
      b(r(0), r(1)),
      {
        then: function (b, h) {
          return p(function (r, i) {
            d.push([b, h, r, i]), j();
          });
        }
      }
    );
  }
  a &&
    ((g = m[e] =
      (function () {
        var b = function (b, d, j, r) {
          function i(i, c) {
            h(b, d, j, i, c, r);
          }
          r = r || 2;
          var c,
            u = /Async$/;
          return u.test(b)
            ? ((b = b.replace(u, '')), 'function' == typeof Promise ? new Promise(i) : p(i))
            : h(b, d, j, c, c, r);
        };
        function h(h, d, j, r, i, c) {
          return b._api ? b._api(h, d, j, r, i, c) : (b.q && b.q.push([h, d, j, r, i, c]), null);
        }
        return (b.q = []), b;
      })()),
    (y = function (b) {
      function h(h) {
        'function' == typeof h[4] && h[4](new Error(b));
      }
      var d = g.q;
      if (d) {
        for (var j = 0; j < d.length; j++) h(d[j]);
        (d.length = 0), (d.push = h);
      }
    }),
    (function () {
      ((o = n.createElement(t)).async = !0),
        (o.crossOrigin = 'anonymous'),
        (o.src = 'https://' + l),
        (o.onerror = function () {
          y('Error loading ' + l);
        });
      var b = n.getElementsByTagName(t)[0];
      b && b.parentNode ? b.parentNode.insertBefore(o, b) : n.head.appendChild(o);
    })(),
    (function () {
      function b() {}
      function h(b, h, d) {
        g(b, h, d, 1);
      }
      function d(b, d, j) {
        h('setProperties', {type: b, properties: d}, j);
      }
      function j(b, h) {
        d('user', b, h);
      }
      function r(b, h, d) {
        j(
          {
            uid: b
          },
          d
        ),
          h && j(h, d);
      }
      (g.identify = r),
        (g.setUserVars = j),
        (g.identifyAccount = b),
        (g.clearUserCookie = b),
        (g.setVars = d),
        (g.event = function (b, d, j) {
          h(
            'trackEvent',
            {
              name: b,
              properties: d
            },
            j
          );
        }),
        (g.anonymize = function () {
          r(!1);
        }),
        (g.shutdown = function () {
          h('shutdown');
        }),
        (g.restart = function () {
          h('restart');
        }),
        (g.log = function (b, d) {
          h('log', {level: b, msg: d});
        }),
        (g.consent = function (b) {
          h('setIdentity', {consent: !arguments.length || b});
        });
    })(),
    (s = 'fetch'),
    (f = 'XMLHttpRequest'),
    (g._w = {}),
    (g._w[f] = m[f]),
    (g._w[s] = m[s]),
    m[s] &&
      (m[s] = function () {
        return g._w[s].apply(this, arguments);
      }),
    (g._v = '2.0.0'));
})(window, document, window._fs_namespace, 'script', window._fs_script);


// recipes-search.js
// This script handles the search functionality for recipes pages

function initRecipesSearch() {
  // Get the search element
  const searchEl = document.getElementById('recipes-search');
  if (!searchEl) {
    console.log('notfound');
    return;
  }

  // Add click event
  searchEl.addEventListener('click', function (e) {
    // Check if we already have an input
    if (searchEl.querySelector('input')) return;

    // Store original content
    const originalContent = searchEl.innerHTML;

    // Clear the search element
    searchEl.innerHTML = '';

    // Create input element
    const inputEl = document.createElement('input');
    inputEl.type = 'text';
    inputEl.placeholder = 'Type to filter recipes...';
    inputEl.className = 'search-input';
    searchEl.appendChild(inputEl);

    // Create reset button
    const resetBtn = document.createElement('span');
    resetBtn.innerHTML = '×';
    resetBtn.style.marginLeft = '8px';
    resetBtn.style.cursor = 'pointer';
    resetBtn.style.fontSize = '20px';
    searchEl.appendChild(resetBtn);

    // Focus the input
    setTimeout(function () {
      inputEl.focus();
    }, 10);

    // Reset function
    resetBtn.addEventListener('click', function (event) {
      event.stopPropagation(); // Prevent triggering parent click
      searchEl.innerHTML = originalContent;
      showAllCards();
    });

    // Filter as you type
    inputEl.addEventListener('input', function () {
      const searchTerm = this.value.toLowerCase();

      // Show all if empty
      if (searchTerm === '') {
        showAllCards();
        return;
      }

      // Filter cards
      document.querySelectorAll('.card-group-wrapper').forEach(function (section) {
        const cards = section.querySelectorAll('.card');
        let visibleCards = 0;

        cards.forEach(function (card) {
          const text = card.textContent.toLowerCase();
          if (text.includes(searchTerm)) {
            card.style.display = 'flex';
            visibleCards++;
          } else {
            card.style.display = 'none';
          }
        });

        // Hide section if no visible cards
        section.style.display = visibleCards > 0 ? 'block' : 'none';
      });
    });

    // Prevent search triggering again when clicking in the input
    inputEl.addEventListener('click', function (event) {
      event.stopPropagation();
    });

    // Prevent reset button from opening search again
    resetBtn.addEventListener('click', function (event) {
      event.stopPropagation();
    });
  });

  // Function to show all cards
  function showAllCards() {
    document.querySelectorAll('.card-group-wrapper').forEach(function (section) {
      section.style.display = 'block';
      section.querySelectorAll('.card').forEach(function (card) {
        card.style.display = 'flex';
      });
    });
  }
}

// Initialize the search when document is loaded
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initRecipesSearch);
} else {
  initRecipesSearch();
}


Chain type

Client-side vs server-side

Overview

Privy docs

Welcome

About Privy

Create an account

Choose your platform

Using LLMs

JWT-based auth

Authentication state

Access tokens

Logging users out

UI components

Chain support

Update a wallet

Exporting private keys

Import a wallet

UI library

Configuring funding methods

Usage

UI Component

Configure chain types

Configure external connector chains

Configure wallet options

Connect an external wallet

Connect or create a wallet

Authenticate a connected wallet

Interfacing with common libraries

Policies & controls

Securing wallet actions with multi-signature quorum approvals

Creating key quorums

Using key quorums

Migrating existing users to Privy

The user object

Handling the user object

Access user data securely with Privy identity tokens

Identity tokens

Linking accounts to users

Unlinking accounts from users

Updating user accounts

Deleting users

Allow list

Deny list

Handling Events

Security

Architecture

Security architecture

Policy and controls

Wallet policies and controls

User authentication

User authorization keys

Security checklist

Content Security Policies (CSPs)

Guidance for Content Security Policies (CSPs)

Security FAQs

Threat models & security FAQ

Optimize your setup

Telegram trading bot guide

Funding wallets with Apple Pay and Google Pay

Integrating OneBalance

Building a Farcaster Frame

Configure log in with Telegram

Seamless Telegram login

Writing to Farcaster

Login with Lens

Configure allowed domains

Configure cookies

Configure allowed OAuth redirect URLs

Setting a system theme for the Privy modal

Customize your application

Configuring wallet confirmation modals

Configure account transfer

Configure SMS login

Login with Apple

Integrating with EIP-7702

Custom account abstraction implementation

Hierarchical deterministic (HD) wallets

Mocking tokens for testing

Integrating with tRPC

Integrating Flashbots Protect

Deeplinking Solana wallets in React Native applications

Using passkeys with server wallets

Introduction

Securing Privy API requests with authorization signatures

Authorization signatures

Making Privy API requests idempotent with idempotency keys

Idempotency keys

Create wallet

Get wallet

Update a wallet's policies or authorization key configuration.

Update wallet

Get wallets

Export wallet

Create policy

Get policy

Update policy

Delete policy

Get transaction

Create key quorum

Get key quorum

Update key quorum

Delete key quorum

Create wallets with an associated recovery user.

Create wallets

Obtain a user session signer to enable wallet access.

Authenticate

Create a new user with linked accounts. Optionally pre-generate embedded wallets for the user.

Embedded wallets

Using embedded wallets

Funding

Gas and asset management

Server sessions

Global wallets

Advanced Topics

Overview

Chain type

Client-side vs server-side

Embedded wallets

Using embedded wallets

Funding

Gas and asset management

Server sessions

Global wallets

Advanced Topics

​Chain type

​Client-side vs server-side

Chain type

Client-side vs server-side