: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();
}


Name

Logo

Brand color

Terms & conditions

Privacy policy

Affirmative consent

Legal

Customize your application

Privy docs

Welcome

About Privy

Create an account

Choose your platform

Using LLMs

Overview

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

Create wallets with user signers

Using user signers

Setup

Provisioning session signers

Revoking session signers

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

Sending USDC (or other ERC-20s)

Funding wallets with Apple Pay and Google Pay

Integrating OneBalance

Off-ramping with Privy

Add programmable onramps and offramps to your app

Funding via wire/ACH

Building a Farcaster Mini App (frame)

Configure log in with Telegram

Seamless Telegram login

Writing to Farcaster

Login with Lens

Telegram trading guide

Bankr Twitter bot guide

Configure allowed domains

Configure cookies

Configure allowed OAuth redirect URLs

Setting a system theme for the Privy modal

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

Swapping crypto using Privy and 0x

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

Get the balance of a wallet by wallet ID.

Get balance

Get incoming and outgoing transactions of a wallet by wallet ID.

Get transactions

Updates the app configuration for the specified onramp provider. This is used to set up the app for fiat onramping and offramping.

Configure app for native onramp

Creates a terms of service agreement for a user

Create a terms of service agreement

Triggers an onramp to the specified recipient blockchain address, returns the bank deposit instructions

Initiate onramp

Triggers the offramp flow and gets the on-chain address to send funds to

Initiate offramp

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.

Favorites

Funding

Social

Security

UI customization

Advanced user management

Advanced wallets

Miscellaneous

Customize your application

Name

Logo

Brand color

Legal

Terms & conditions

Privacy policy

Favorites

Funding

Social

Security

UI customization

Advanced user management

Advanced wallets

Miscellaneous

​Name

​Logo

​Brand color

​Legal

​Terms & conditions

​Privacy policy

​Affirmative consent

Name

Logo

Brand color

Legal

Terms & conditions

Privacy policy

Affirmative consent