> ## Documentation Index
> Fetch the complete documentation index at: https://thenile.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Examples

> End to end examples for adding Nile Auth to your B2B application

These are end to end examples that you can fork and use it to build your own applications. It works with Nile's Postgres and Nile Auth.

## Workflows

<CardGroup>
  <Card
    title="Email Login"
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/user_management/email_login/NextJS"
    icon={
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlSpace="preserve"
    width={36}
    height={36}
    viewBox="0 0 408.759 408.759"
    {...props}
  >
    <path
      d="M204.385 408.759c-58.121 0-113.674-24.867-152.417-68.225C18.46 303.057.005 254.703.005 204.381.005 91.685 91.689 0 204.385 0c50.317 0 98.674 18.455 136.164 51.964 43.346 38.762 68.205 94.316 68.205 152.417.001 112.695-91.679 204.378-204.369 204.378"
      style={{
        fill: '#ffbe00',
      }}
    />
    <path
      d="M377.757 204.379c0 4.43-.17 8.821-.489 13.161a172.715 172.715 0 0 1-7.42 38.74c-20.39 65.09-78.11 113.66-148.081 120.61a173.616 173.616 0 0 1-17.38.87c-51.39 0-97.559-22.361-129.301-57.881-.259-.29-.519-.591-.789-.881-26.951-30.56-43.29-70.68-43.29-114.62 0-95.749 77.619-173.38 173.379-173.38 43.95 0 84.069 16.35 114.631 43.29.29.27.589.53.879.79 35.512 31.762 57.861 77.911 57.861 129.301"
      style={{
        fill: '#f4502a',
      }}
    />
    <path
      d="M74.327 319.03a174.61 174.61 0 0 0 9.424 9.872 174.438 174.438 0 0 1-8.665-9.023c-.249-.279-.5-.569-.759-.849m-12.305-15.665.045.065a1.498 1.498 0 0 0-.045-.065m-.315-.454.044.064a7.807 7.807 0 0 0-.044-.064m-.205-.297.061.088-.061-.088m-.613-.896.08.117-.08-.117m-.226-.333.097.143-.097-.143m-.293-.435.099.147-.099-.147m-.295-.441.178.266-.178-.266m-.244-.365.134.202a14.13 14.13 0 0 0-.134-.202m-.277-.419.147.222a28.342 28.342 0 0 0-.147-.222M59.023 298.915l.163.25-.163-.25m-.265-.408.172.265-.172-.265m-.281-.435.207.32-.207-.32m-1.036-1.629.212.337-.212-.337m-.249-.398.227.363a72.062 72.062 0 0 0-.227-.363m-.265-.427.226.363-.226-.363m-.252-.408.223.362a70.774 70.774 0 0 1-.223-.362m-.245-.397.231.376-.231-.376m-.263-.432.232.381-.232-.381m-.49-.809c.16.267.319.528.48.794l-.48-.794m92.421-253.231C79.969 63.709 31.006 128.321 31.006 204.37c0 32.099 8.718 62.16 23.92 87.94-15.202-25.781-23.918-55.837-23.918-87.931 0-76.049 48.961-140.667 117.09-164.038"
      style={{
        fill: '#c29100',
      }}
    />
    <path
      d="M204.385 31.001c-19.703 0-38.639 3.286-56.287 9.34-68.129 23.371-117.09 87.989-117.09 164.038 0 32.094 8.716 62.15 23.918 87.931l.008.014c.239.405.48.811.722 1.214l.021.034c.158.264.32.531.48.794l.009.015.232.381.031.051.231.376.013.021.223.362.029.046.226.363.04.064.227.363.022.035.212.337.042.067.219.346.05.079.221.347.034.053a51.235 51.235 0 0 1 .255.399l.207.32.074.115.172.265.093.143.163.25.084.128a49.734 49.734 0 0 0 .285.433l.147.222.13.196.134.202.109.163.178.266.118.175.099.147.194.288.097.143.129.191.08.117.221.324.076.111.236.343.061.088.145.209.044.064.27.389.045.065a173.94 173.94 0 0 0 12.259 15.6c.259.28.51.57.76.849a174.096 174.096 0 0 0 17.379 16.912c-25.53-30.2-40.919-69.241-40.919-111.881 0-95.749 77.619-173.368 173.379-173.368 42.629 0 81.68 15.39 111.87 40.919-31.788-37.588-79.307-61.458-132.407-61.458"
      style={{
        fill: '#ba3d20',
      }}
    />
    <path
      d="M204.387 112.21c-19.44 0-37.832 5.907-53.259 16.894-8.645 6.773-13.829 12.076-13.829 12.076l64.573 64.573-97.275 9.128 79.438 79.438h.002c6.591 1.481 13.401 2.231 20.35 2.231 3.13 0 6.23-.161 9.211-.46a91.88 91.88 0 0 0 77.56-60.601 92.012 92.012 0 0 0 5.388-31.11c0-26.2-11.209-51.249-30.768-68.729l-.19-.179c-.131-.111-.251-.222-.36-.321a92.075 92.075 0 0 0-60.841-22.94"
      style={{
        fill: '#ba3d20',
      }}
    />
    <path
      d="m204.154 148.487-14.85 14.85 30.544 30.543H104.597v21h115.251l-30.544 30.543 14.85 14.85 55.892-55.893z"
      style={{
        fill: '#fff',
      }}
    />
    <path
      d="M289.143 129.414c18.184 20.573 28.405 47.245 28.405 74.964 0 11.56-1.741 22.961-5.171 33.88a115.392 115.392 0 0 1-5.11 13.34 112.811 112.811 0 0 1-91.55 65.38c-2.761.292-5.61.462-8.491.532-.94.03-1.889.039-2.84.039-28.819 0-56.741-11.164-77.628-30.836l90.569 90.567c1.479-.111 2.958-.24 4.439-.39 69.97-6.951 127.69-55.521 148.081-120.61a172.715 172.715 0 0 0 7.42-38.74l-88.124-88.126"
      style={{
        fill: '#ba3d20',
      }}
    />
    <path
      d="M317.548 204.379c0 11.56-1.741 22.961-5.171 33.88a115.392 115.392 0 0 1-5.11 13.34 112.811 112.811 0 0 1-91.55 65.38c-2.761.292-5.61.462-8.491.532-.94.03-1.889.039-2.84.039-31.06 0-61.079-12.969-82.37-35.579l15.281-14.4c12.83 13.63 28.979 22.789 46.74 26.748 6.591 1.481 13.401 2.231 20.35 2.231 3.13 0 6.23-.161 9.211-.46a91.88 91.88 0 0 0 77.56-60.601 92.012 92.012 0 0 0 5.388-31.11c0-26.2-11.209-51.249-30.768-68.729l-.19-.179c-.131-.111-.251-.222-.36-.321a92.08 92.08 0 0 0-60.841-22.939c-25.659 0-49.49 10.289-67.09 28.97l-15.281-14.4c21.611-22.941 50.862-35.57 82.37-35.57a113.06 113.06 0 0 1 74.81 28.259l.249.231c.151.129.281.24.401.36 23.961 21.448 37.702 52.179 37.702 84.318"
      style={{
        fill: '#1ca4ba',
      }}
    />
    <path
      d="M291.158 235.489a91.88 91.88 0 0 1-77.56 60.601c-2.98.299-6.081.46-9.211.46-6.949 0-13.759-.75-20.35-2.231l23.19 23.192c2.881-.07 5.73-.24 8.491-.532a112.811 112.811 0 0 0 91.55-65.38l-16.11-16.11"
      style={{
        fill: '#157d8e',
      }}
    />
  </svg>
}
  >
    Login with Email or Magic Link
  </Card>

  <Card
    title="Email Verification"
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/user_management/email_verified/NextJS"
    icon={
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={36}
    height={36}
    viewBox="0 0 24 24"
    {...props}
  >
    <defs>
      <style>{'.cls-3{fill:#6c2e7c}'}</style>
    </defs>
    <g id="Icons">
      <path
        d="M23 12a11 11 0 0 1-22 0 10.827 10.827 0 0 1 .29-2.5 11 11 0 0 1 21.42 0A10.827 10.827 0 0 1 23 12Z"
        style={{
          fill: '#56b54e',
        }}
      />
      <ellipse
        cx={12}
        cy={9.5}
        rx={10.71}
        ry={8.5}
        style={{
          fill: '#60cc5a',
        }}
      />
    </g>
    <g id="Layer_4" data-name="Layer 4">
      <path
        d="M12 0a12 12 0 1 0 12 12A12.013 12.013 0 0 0 12 0Zm0 22a10 10 0 1 1 10-10 10.011 10.011 0 0 1-10 10Z"
        className="cls-3"
      />
      <path
        d="M16.293 8.293 10 14.586l-2.293-2.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l7-7a1 1 0 0 0-1.414-1.414Z"
        className="cls-3"
      />
    </g>
  </svg>
}
  >
    Verify user using email
  </Card>

  <Card
    title="Reset Password"
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/user_management/reset_password/NextJS"
    icon={
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlSpace="preserve"
    width={36}
    height={36}
    viewBox="0 0 512 512"
    {...props}
  >
    <path
      d="M450.282 288.524c31.048-25.475 50.948-64.103 50.948-107.16 0-76.235-62.375-138.606-138.609-138.606H149.376C73.141 42.757 10.77 105.128 10.77 181.365c0 76.235 62.371 138.606 138.606 138.606l176.091-.002c17.215-25.716 46.53-42.645 79.802-42.645 16.268.001 31.591 4.05 45.013 11.2z"
      style={{
        fill: '#a7e2de',
      }}
    />
    <path
      d="M450.282 288.524c-13.423-7.15-28.745-11.198-45.013-11.198-33.272 0-62.586 16.929-79.802 42.645-10.207 15.247-16.158 33.587-16.158 53.314 0 52.998 42.962 95.959 95.96 95.959s95.961-42.961 95.961-95.959c0-36.731-20.635-68.641-50.948-84.761zm-70.44 79.554h50.855c6.994 0 12.714 5.72 12.714 12.714v25.427c0 6.994-5.719 12.714-12.714 12.714h-50.855c-6.994 0-12.714-5.72-12.714-12.714v-25.427c0-6.995 5.719-12.714 12.714-12.714z"
      style={{
        fill: '#85bf4f',
      }}
    />
    <path
      d="M430.696 368.078h-50.855c-6.994 0-12.714 5.72-12.714 12.714v25.427c0 6.994 5.72 12.714 12.714 12.714h50.855c6.994 0 12.714-5.72 12.714-12.714v-25.427c0-6.995-5.719-12.714-12.714-12.714z"
      style={{
        fill: '#eda23f',
      }}
    />
    <path
      d="M210.686 192.135h19.312l-13.656 13.656c-4.205 4.206-4.206 11.024 0 15.231a10.737 10.737 0 0 0 7.615 3.156c2.757 0 5.512-1.052 7.615-3.155l13.656-13.656v19.312c0 5.947 4.822 10.77 10.77 10.77 5.947 0 10.77-4.823 10.77-10.77v-19.314l13.659 13.659a10.74 10.74 0 0 0 7.614 3.155 10.74 10.74 0 0 0 7.617-3.156c4.205-4.206 4.205-11.024-.001-15.231L282 192.135h19.312c5.948 0 10.77-4.822 10.77-10.77 0-5.947-4.822-10.77-10.77-10.77h-22.778c.299-3.093-.733-6.292-3.103-8.661s-5.569-3.403-8.663-3.103v-22.779c0-5.948-4.823-10.77-10.77-10.77-5.948 0-10.77 4.822-10.77 10.77v19.312l-13.656-13.656c-4.207-4.206-11.025-4.205-15.232.001-4.206 4.206-4.205 11.024 0 15.231l13.657 13.656h-19.313c-5.948 0-10.77 4.823-10.77 10.77.002 5.949 4.824 10.769 10.772 10.769z"
      style={{
        fill: '#000003',
      }}
    />
    <path
      d="M287.73 160.405c2.743 0 5.488-1.043 7.59-3.129l.312-.31c4.22-4.192 4.243-11.011.052-15.231-4.193-4.22-11.011-4.242-15.232-.052l-.312.31c-4.22 4.192-4.242 11.011-.052 15.232a10.74 10.74 0 0 0 7.642 3.18zM176.143 181.365c0-5.947-4.821-10.77-10.77-10.77h-19.315l13.656-13.656c4.206-4.206 4.206-11.025 0-15.232-4.205-4.206-11.024-4.206-15.232 0l-13.655 13.656v-19.312c0-5.948-4.823-10.77-10.77-10.77-5.947 0-10.77 4.822-10.77 10.77v19.312L95.63 141.707c-4.206-4.206-11.025-4.206-15.232 0-4.206 4.206-4.206 11.025 0 15.232l13.656 13.656H74.742c-5.948 0-10.77 4.823-10.77 10.77 0 5.948 4.822 10.77 10.77 10.77h19.313L80.4 205.791c-4.206 4.206-4.206 11.025 0 15.232a10.742 10.742 0 0 0 7.615 3.155c2.756 0 5.513-1.052 7.615-3.155l13.656-13.656v19.312c0 5.947 4.823 10.77 10.77 10.77 5.947 0 10.77-4.823 10.77-10.77v-19.312l13.655 13.656c2.103 2.102 4.861 3.155 7.617 3.155s5.512-1.052 7.614-3.155c4.206-4.206 4.206-11.025 0-15.232l-13.655-13.656h19.314c5.95 0 10.772-4.82 10.772-10.77zM346.627 192.135h19.312l-13.656 13.656c-4.206 4.206-4.206 11.024-.001 15.231a10.738 10.738 0 0 0 7.617 3.156c2.756 0 5.512-1.052 7.614-3.155l13.656-13.656v19.312c0 5.947 4.822 10.77 10.77 10.77s10.77-4.823 10.77-10.77v-19.314l13.659 13.659a10.74 10.74 0 0 0 7.616 3.155c2.757 0 5.512-1.052 7.616-3.156 4.206-4.206 4.205-11.024 0-15.231l-13.656-13.656h19.312c5.947 0 10.77-4.822 10.77-10.77 0-5.947-4.823-10.77-10.77-10.77h-19.312l13.657-13.656c4.205-4.206 4.206-11.024 0-15.231-4.207-4.206-11.025-4.206-15.232-.001l-13.659 13.659v-19.314c0-5.948-4.822-10.77-10.77-10.77s-10.77 4.822-10.77 10.77v19.312l-13.656-13.656c-4.206-4.206-11.024-4.205-15.232.001-4.205 4.206-4.205 11.024.001 15.231l13.658 13.656h-19.313c-5.948 0-10.77 4.823-10.77 10.77-.001 5.948 4.82 10.768 10.769 10.768z"
      style={{
        fill: '#000003',
      }}
    />
    <path
      d="M467.998 286.991c28.117-28.001 44.001-65.746 44.001-105.627 0-82.367-67.012-149.376-149.379-149.376H149.376C67.01 31.987 0 98.997 0 181.365c0 82.367 67.01 149.376 149.376 149.376h158.02c-5.69 13.041-8.855 27.428-8.855 42.542 0 58.851 47.879 106.729 106.73 106.729S512 432.134 512 373.283c0-35.426-17.355-66.869-44.002-86.292zm-318.622 22.211c-70.489 0-127.836-57.347-127.836-127.838 0-70.49 57.347-127.837 127.836-127.837H362.62c70.491 0 127.839 57.347 127.839 127.838 0 36.044-15.181 70.07-41.873 94.384-13.245-5.904-27.903-9.194-43.316-9.194H181.032c-5.948 0-10.77 4.823-10.77 10.77 0 5.948 4.822 10.77 10.77 10.77H341.05a107.67 107.67 0 0 0-21.075 21.107H149.376zm255.895 149.27c-46.974 0-85.19-38.214-85.19-85.189 0-46.972 38.215-85.189 85.19-85.189 46.972 0 85.189 38.215 85.189 85.189 0 46.975-38.217 85.189-85.189 85.189z"
      style={{
        fill: '#000003',
      }}
    />
    <path
      d="M430.696 357.308h-42.591l-2.679-9.996c-1.006-3.756-.477-7.699 1.492-11.108 1.967-3.408 5.118-5.837 8.875-6.844 4.524-1.213 9.417-.143 13.092 2.859 4.606 3.765 11.39 3.082 15.153-1.522 3.765-4.604 3.083-11.39-1.521-15.155-9.026-7.379-21.104-9.989-32.302-6.989-9.312 2.493-17.109 8.489-21.954 16.88-4.844 8.39-6.137 18.14-3.645 27.446l2.24 8.354c-6.324 4.213-10.501 11.405-10.501 19.556v25.427c0 12.949 10.534 23.484 23.484 23.484h50.855c12.949 0 23.484-10.534 23.484-23.484v-25.427c.002-12.947-10.532-23.481-23.482-23.481zm1.944 48.911c0 1.054-.89 1.944-1.944 1.944h-50.855c-1.054 0-1.944-.89-1.944-1.944v-25.427c0-1.046.877-1.929 1.92-1.942h.017l.048-.002h50.813c1.054 0 1.944.89 1.944 1.944v25.427zM150.16 266.555h-.783c-5.948 0-10.77 4.823-10.77 10.77 0 5.948 4.822 10.77 10.77 10.77h.783c5.949 0 10.77-4.822 10.77-10.77 0-5.947-4.822-10.77-10.77-10.77z"
      style={{
        fill: '#000003',
      }}
    />
  </svg>
}
  >
    Initiate password reset flow
  </Card>

  <Card
    title="Google Login"
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/user_management/social_login_google/NextJS"
    icon={
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={36}
    height={36}
    viewBox="0 0 32 32"
    {...props}
  >
    <defs>
      <path
        id="A"
        d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"
      />
    </defs>
    <clipPath id="B">
      <use xlinkHref="#A" />
    </clipPath>
    <g transform="matrix(.727273 0 0 .727273 -.954545 -1.45455)">
      <path d="M0 37V11l17 13z" clipPath="url(#B)" fill="#fbbc05" />
      <path
        d="M0 11l17 13 7-6.1L48 14V0H0z"
        clipPath="url(#B)"
        fill="#ea4335"
      />
      <path
        d="M0 37l30-23 7.9 1L48 0v48H0z"
        clipPath="url(#B)"
        fill="#34a853"
      />
      <path
        d="M48 48L17 24l-4-3 35-10z"
        clipPath="url(#B)"
        fill="#4285f4"
      />
    </g>
  </svg>
}
  >
    Add Google SSO support
  </Card>
</CardGroup>

## Frameworks

<CardGroup>
  <Card
    title="NextJS"
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/quickstart/nextjs"
    icon={<svg
xmlns="http://www.w3.org/2000/svg"
width={36}
height={36}
preserveAspectRatio="xMidYMid"
viewBox="0 0 256 256"
>
<path d="M119.617.069c-.55.05-2.302.225-3.879.35-36.36 3.278-70.419 22.894-91.99 53.044-12.012 16.764-19.694 35.78-22.597 55.922C.125 116.415 0 118.492 0 128.025c0 9.533.125 11.61 1.151 18.64 6.957 48.065 41.165 88.449 87.56 103.411 8.309 2.678 17.067 4.504 27.027 5.605 3.879.425 20.645.425 24.524 0 17.192-1.902 31.756-6.155 46.12-13.486 2.202-1.126 2.628-1.426 2.327-1.677-.2-.15-9.584-12.735-20.845-27.948l-20.47-27.648-25.65-37.956c-14.114-20.868-25.725-37.932-25.825-37.932-.1-.025-.2 16.84-.25 37.431-.076 36.055-.1 37.506-.551 38.357-.65 1.226-1.151 1.727-2.202 2.277-.801.4-1.502.475-5.28.475h-4.33l-1.15-.725a4.679 4.679 0 0 1-1.677-1.827l-.526-1.126.05-50.166.075-50.192.776-.976c.4-.525 1.251-1.2 1.852-1.526 1.026-.5 1.426-.55 5.755-.55 5.105 0 5.956.2 7.282 1.651.376.4 14.264 21.318 30.88 46.514 16.617 25.195 39.34 59.599 50.5 76.488l20.27 30.7 1.026-.675c9.084-5.905 18.693-14.312 26.3-23.07 16.191-18.59 26.626-41.258 30.13-65.428 1.026-7.031 1.151-9.108 1.151-18.64 0-9.534-.125-11.61-1.151-18.641-6.957-48.065-41.165-88.449-87.56-103.411-8.184-2.652-16.892-4.479-26.652-5.58-2.402-.25-18.943-.525-21.02-.325Zm52.401 77.414c1.201.6 2.177 1.752 2.527 2.953.2.65.25 14.562.2 45.913l-.074 44.987-7.933-12.16-7.958-12.16v-32.702c0-21.143.1-33.028.25-33.603.4-1.401 1.277-2.502 2.478-3.153 1.026-.525 1.401-.575 5.33-.575 3.704 0 4.354.05 5.18.5Z" />
</svg>}
  >
    Auth with NextJS
  </Card>

  <Card
    title="Node"
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/quickstart/node_react"
    icon={<svg xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
<path
  fill="#388e3c"
  d="m17.204 19.122-4.907 2.715a.563.563 0 0 0-.297.492v5.433c0 .203.113.39.297.492l4.908 2.717c.183.101.41.101.593 0l4.907-2.717a.566.566 0 0 0 .295-.492v-5.433a.564.564 0 0 0-.297-.492l-4.906-2.715a.613.613 0 0 0-.594 0m25.248 4.891-.818.452a.093.093 0 0 0-.049.082v.906c0 .034.019.065.049.082l.818.453a.102.102 0 0 0 .099 0l.818-.453a.095.095 0 0 0 .049-.082v-.906a.094.094 0 0 0-.05-.082l-.818-.452c-.015-.009-.032-.013-.049-.013s-.034.004-.049.013"
/>
<path
  fill="#37474f"
  d="m35.751 13.364-2.389-1.333a.243.243 0 0 0-.361.212L33 20.295l-2.203-1.219a.613.613 0 0 0-.594 0h.001l-4.907 2.715a.563.563 0 0 0-.297.491v5.433c0 .203.113.39.297.492l4.908 2.717c.183.101.41.101.593 0l4.907-2.717a.565.565 0 0 0 .295-.492V13.788a.487.487 0 0 0-.249-.424zm-2.885 13.094-2.23 1.235a.28.28 0 0 1-.269 0l-2.231-1.235a.255.255 0 0 1-.136-.224v-2.47c0-.092.051-.177.135-.224l2.231-1.234h-.001a.29.29 0 0 1 .27 0l2.23 1.234a.259.259 0 0 1 .135.225v2.47a.257.257 0 0 1-.134.223z"
/>
<path
  fill="#2e7d32"
  d="M17.204 19.122 12 27.762c0 .203.113.39.297.492l4.908 2.717c.183.101.41.101.593 0L23 22.329a.564.564 0 0 0-.297-.492l-4.906-2.715a.613.613 0 0 0-.594 0"
/>
<path
  fill="#4caf50"
  d="m17.204 19.122-4.907 2.715a.563.563 0 0 0-.297.492l5.204 8.642c.183.101.41.101.593 0l4.907-2.717a.565.565 0 0 0 .296-.492l-5.203-8.64a.613.613 0 0 0-.594 0"
/>
<path
  fill="#37474f"
  d="m47.703 21.791-4.906-2.715a.613.613 0 0 0-.594 0h.001l-4.907 2.715a.574.574 0 0 0-.297.503v5.411c0 .209.114.402.297.503l4.908 2.717a.613.613 0 0 0 .593 0l2.263-1.253a.3.3 0 0 0-.002-.526l-4.924-2.687a.263.263 0 0 1-.135-.228v-2.466c0-.092.05-.177.13-.221l2.235-1.236h-.001a.29.29 0 0 1 .27 0l2.235 1.237c.08.044.13.129.13.221v2.012a.241.241 0 0 0 .363.208l2.398-1.393a.483.483 0 0 0 .24-.417v-1.88a.576.576 0 0 0-.297-.505zm-37 0-4.906-2.715a.613.613 0 0 0-.594 0h.001L.297 21.791a.574.574 0 0 0-.297.503v7.465a.241.241 0 0 0 .363.208l2.398-1.393A.482.482 0 0 0 3 28.157v-4.393c0-.092.05-.177.13-.221l2.235-1.236a.29.29 0 0 1 .27 0l2.235 1.237c.08.044.13.129.13.221v4.393a.48.48 0 0 0 .24.417l2.398 1.393a.246.246 0 0 0 .242.001.245.245 0 0 0 .12-.21v-7.464a.576.576 0 0 0-.297-.504z"
/>
</svg>
}
  >
    Auth with Node
  </Card>

  <Card
    title="Remix"
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/quickstart/remix"
    icon={<svg
xmlns="http://www.w3.org/2000/svg"
width={72}
height={72}
viewBox="0 0 1024 1024"
fill="none"
{...props}
>
<g filter="url(#a)">
  <path
    fill="#FFF7FF"
    d="M583.592 97.78V228h46.946V97.78h-46.946Zm-.29-12.263h47.526v-41.46h-47.526v41.46Z"
  />
</g>
<g fill="#E8F2FF" filter="url(#b)">
  <path
    fillRule="evenodd"
    d="M193.744 183.947c1.643 21.267 1.643 31.236 1.643 42.118h-48.829c0-2.371.042-4.539.084-6.738.132-6.835.27-13.962-.829-28.356-1.452-21.072-10.457-25.755-27.015-25.755H42v-38.34h79.122c20.915 0 31.372-6.412 31.372-23.387 0-14.926-10.457-23.972-31.372-23.972H42V42h87.836c47.35 0 70.88 22.536 70.88 58.535 0 26.926-16.558 44.486-38.926 47.413 18.882 3.805 29.92 14.634 31.954 35.999Z"
    clipRule="evenodd"
  />
  <path d="M42 226.064v-28.581h51.63c8.624 0 10.496 6.445 10.496 10.289v18.292H42Z" />
</g>
<g filter="url(#c)">
  <path
    fill="#FFF0F1"
    d="M782.943 97.524h-48.395l-22.025 30.95-21.444-30.95h-51.873l46.656 63.943-50.714 66.278h48.396l25.792-35.329 25.791 35.329H787l-51.004-68.322 46.947-61.899Z"
  />
</g>
<g filter="url(#d)">
  <path
    fill="#FFFAEA"
    d="M478.111 119.105c-5.506-15.183-17.388-25.694-40.281-25.694-19.416 0-33.326 8.76-40.281 23.066V96.915h-46.947v130.22h46.947v-63.942c0-19.562 5.506-32.409 20.865-32.409 14.2 0 17.677 9.343 17.677 27.154v69.197h46.947v-63.942c0-19.562 5.216-32.409 20.865-32.409 14.199 0 17.387 9.343 17.387 27.154v69.197h46.947v-81.752c0-27.154-10.433-51.972-46.077-51.972-21.735 0-37.094 11.095-44.049 25.694Z"
  />
</g>
<g filter="url(#e)">
  <path
    fill="#F1FFF0"
    d="M301.716 176.598c-4.347 10.22-12.461 14.599-25.212 14.599-14.2 0-25.792-7.591-26.951-23.65h90.705v-13.139c0-35.328-22.893-65.11-66.073-65.11-40.281 0-70.419 29.49-70.419 70.658 0 41.46 29.559 66.57 70.999 66.57 34.196 0 57.959-16.643 64.624-46.424l-37.673-3.504Zm-51.583-31.825c1.738-12.263 8.404-21.606 23.473-21.606 13.91 0 21.444 9.927 22.024 21.606h-45.497Z"
  />
</g>
<defs>
  <filter
    id="a"
    width={103.526}
    height={239.944}
    x={555.302}
    y={16.056}
    colorInterpolationFilters="sRGB"
    filterUnits="userSpaceOnUse"
  >
    <feFlood floodOpacity={0} result="BackgroundImageFix" />
    <feColorMatrix
      in="SourceAlpha"
      result="hardAlpha"
      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
    />
    <feOffset />
    <feGaussianBlur stdDeviation={14} />
    <feComposite in2="hardAlpha" operator="out" />
    <feColorMatrix values="0 0 0 0 0.847059 0 0 0 0 0.231373 0 0 0 0 0.823529 0 0 0 1 0" />
    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3_93" />
    <feColorMatrix
      in="SourceAlpha"
      result="hardAlpha"
      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
    />
    <feOffset />
    <feGaussianBlur stdDeviation={14} />
    <feComposite in2="hardAlpha" operator="out" />
    <feColorMatrix values="0 0 0 0 0.847059 0 0 0 0 0.231373 0 0 0 0 0.823529 0 0 0 1 0" />
    <feBlend
      in2="effect1_dropShadow_3_93"
      result="effect2_dropShadow_3_93"
    />
    <feBlend
      in="SourceGraphic"
      in2="effect2_dropShadow_3_93"
      result="shape"
    />
  </filter>
  <filter
    id="b"
    width={242.715}
    height={268.065}
    x={0}
    y={0}
    colorInterpolationFilters="sRGB"
    filterUnits="userSpaceOnUse"
  >
    <feFlood floodOpacity={0} result="BackgroundImageFix" />
    <feColorMatrix
      in="SourceAlpha"
      result="hardAlpha"
      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
    />
    <feOffset />
    <feGaussianBlur stdDeviation={21} />
    <feComposite in2="hardAlpha" operator="out" />
    <feColorMatrix values="0 0 0 0 0.223529 0 0 0 0 0.572549 0 0 0 0 1 0 0 0 1 0" />
    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3_93" />
    <feColorMatrix
      in="SourceAlpha"
      result="hardAlpha"
      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
    />
    <feOffset />
    <feGaussianBlur stdDeviation={14} />
    <feComposite in2="hardAlpha" operator="out" />
    <feColorMatrix values="0 0 0 0 0.223529 0 0 0 0 0.572549 0 0 0 0 1 0 0 0 0.9 0" />
    <feBlend
      in2="effect1_dropShadow_3_93"
      result="effect2_dropShadow_3_93"
    />
    <feBlend
      in="SourceGraphic"
      in2="effect2_dropShadow_3_93"
      result="shape"
    />
  </filter>
  <filter
    id="c"
    width={215.852}
    height={194.22}
    x={603.148}
    y={65.524}
    colorInterpolationFilters="sRGB"
    filterUnits="userSpaceOnUse"
  >
    <feFlood floodOpacity={0} result="BackgroundImageFix" />
    <feColorMatrix
      in="SourceAlpha"
      result="hardAlpha"
      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
    />
    <feOffset />
    <feGaussianBlur stdDeviation={14} />
    <feComposite in2="hardAlpha" operator="out" />
    <feColorMatrix values="0 0 0 0 0.960784 0 0 0 0 0.2 0 0 0 0 0.258824 0 0 0 1 0" />
    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3_93" />
    <feColorMatrix
      in="SourceAlpha"
      result="hardAlpha"
      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
    />
    <feOffset />
    <feGaussianBlur stdDeviation={16} />
    <feComposite in2="hardAlpha" operator="out" />
    <feColorMatrix values="0 0 0 0 0.960784 0 0 0 0 0.2 0 0 0 0 0.258824 0 0 0 1 0" />
    <feBlend
      in2="effect1_dropShadow_3_93"
      result="effect2_dropShadow_3_93"
    />
    <feBlend
      in="SourceGraphic"
      in2="effect2_dropShadow_3_93"
      result="shape"
    />
  </filter>
  <filter
    id="d"
    width={273.635}
    height={189.724}
    x={322.602}
    y={65.411}
    colorInterpolationFilters="sRGB"
    filterUnits="userSpaceOnUse"
  >
    <feFlood floodOpacity={0} result="BackgroundImageFix" />
    <feColorMatrix
      in="SourceAlpha"
      result="hardAlpha"
      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
    />
    <feOffset />
    <feGaussianBlur stdDeviation={14} />
    <feComposite in2="hardAlpha" operator="out" />
    <feColorMatrix values="0 0 0 0 0.996078 0 0 0 0 0.8 0 0 0 0 0.105882 0 0 0 1 0" />
    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3_93" />
    <feColorMatrix
      in="SourceAlpha"
      result="hardAlpha"
      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
    />
    <feOffset />
    <feGaussianBlur stdDeviation={14} />
    <feComposite in2="hardAlpha" operator="out" />
    <feColorMatrix values="0 0 0 0 0.996078 0 0 0 0 0.8 0 0 0 0 0.105882 0 0 0 1 0" />
    <feBlend
      in2="effect1_dropShadow_3_93"
      result="effect2_dropShadow_3_93"
    />
    <feBlend
      in="SourceGraphic"
      in2="effect2_dropShadow_3_93"
      result="shape"
    />
  </filter>
  <filter
    id="e"
    width={192.493}
    height={193.228}
    x={175.766}
    y={61.298}
    colorInterpolationFilters="sRGB"
    filterUnits="userSpaceOnUse"
  >
    <feFlood floodOpacity={0} result="BackgroundImageFix" />
    <feColorMatrix
      in="SourceAlpha"
      result="hardAlpha"
      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
    />
    <feOffset />
    <feGaussianBlur stdDeviation={14} />
    <feComposite in2="hardAlpha" operator="out" />
    <feColorMatrix values="0 0 0 0 0.419608 0 0 0 0 0.85098 0 0 0 0 0.407843 0 0 0 1 0" />
    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3_93" />
    <feColorMatrix
      in="SourceAlpha"
      result="hardAlpha"
      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
    />
    <feOffset />
    <feGaussianBlur stdDeviation={14} />
    <feComposite in2="hardAlpha" operator="out" />
    <feColorMatrix values="0 0 0 0 0.419608 0 0 0 0 0.85098 0 0 0 0 0.407843 0 0 0 1 0" />
    <feBlend
      in2="effect1_dropShadow_3_93"
      result="effect2_dropShadow_3_93"
    />
    <feBlend
      in="SourceGraphic"
      in2="effect2_dropShadow_3_93"
      result="shape"
    />
  </filter>
</defs>
</svg>
}
  >
    Auth with Remix
  </Card>

  <Card
    title="Drizzle"
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/quickstart/drizzle"
    icon={<svg
xmlns="http://www.w3.org/2000/svg"
width={36}
height={36}
fill="none"
>
<rect width={36} height={36} fill="#17161B" rx={5} />
<path
  fill="#C5F74F"
  d="M8.108 16.658c.336-.563 1.087-.762 1.677-.446.59.316.796 1.028.46 1.59l-3.946 6.602c-.336.562-1.087.762-1.678.446-.59-.316-.796-1.028-.46-1.59l3.947-6.602ZM16.613 11.596c.336-.562 1.087-.762 1.678-.446.59.316.796 1.028.46 1.59l-3.946 6.602c-.337.563-1.088.762-1.678.446-.59-.316-.796-1.028-.46-1.59l3.946-6.602ZM29.701 11.596c.336-.562 1.087-.762 1.677-.446.59.316.797 1.029.46 1.59l-3.946 6.603c-.336.562-1.087.762-1.677.445-.59-.316-.796-1.028-.46-1.59l3.946-6.602ZM21.193 16.658c.336-.563 1.087-.762 1.678-.446.59.316.796 1.028.46 1.59l-3.946 6.602c-.337.562-1.088.762-1.678.446-.59-.316-.796-1.028-.46-1.59l3.946-6.602Z"
/>
</svg>}
  >
    Auth with Drizzle
  </Card>

  <Card
    title="Prisma"
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/quickstart/prisma"
    icon={<svg
xmlns="http://www.w3.org/2000/svg"
width={36}
height={36}
viewBox="0 0 32 32"
>
<title>{"file_type_prisma"}</title>
<path
  d="m25.21 24.21-12.471 3.718a.525.525 0 0 1-.667-.606l4.456-21.511a.43.43 0 0 1 .809-.094l8.249 17.661a.6.6 0 0 1-.376.832Zm2.139-.878L17.8 2.883A1.531 1.531 0 0 0 16.491 2a1.513 1.513 0 0 0-1.4.729L4.736 19.648a1.592 1.592 0 0 0 .018 1.7l5.064 7.909a1.628 1.628 0 0 0 1.83.678l14.7-4.383a1.6 1.6 0 0 0 1-2.218Z"
  style={{
    fill: "#d2d2d2",
    fillRule: "evenodd",
  }}
/>
</svg>
}
  >
    Auth with Prisma
  </Card>
</CardGroup>
