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

# Introduction

> Discover how to build real world apps using Hanko for secure and efficient authentication.

## By Team Hanko

<CardGroup cols={2}>
  <Card
    title="Add authorization with Permit.io"
    icon={
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="icon icon-tabler icon-tabler-apps"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    strokeWidth="2"
    stroke="currentColor"
    fill="none"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 7l6 0"></path>
    <path d="M17 4l0 6"></path>
  </svg>
}
    href="/integrations/permit"
  >
    By Daniel Bass

    <br />

    **Tech Stack:** Nextjs, Permit.io, Hanko.

    <br />

    Learn how to add an easily manageable authoization layer on top of your Hanko implementation.
  </Card>

  <Card
    title="Todo App"
    icon={
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="icon icon-tabler icon-tabler-apps"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    strokeWidth="2"
    stroke="currentColor"
    fill="none"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 7l6 0"></path>
    <path d="M17 4l0 6"></path>
  </svg>
}
    href="/tutorials/nextjs-todo"
  >
    By [Esther Lizardo](https://twitter.com/esther_ligar)

    <br />

    **Tech Stack:** Nextjs, Prisma, Hanko.

    <br />

    Build a Todo app with Hanko Auth, Next.js 13 and Prisma.
  </Card>
</CardGroup>

## By Community

<CardGroup cols={2}>
  <Card
    title="SpecFlow"
    icon={
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="icon icon-tabler icon-tabler-apps"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    strokeWidth="2"
    stroke="currentColor"
    fill="none"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 7l6 0"></path>
    <path d="M17 4l0 6"></path>
  </svg>
}
    href="https://dev.to/riccardoperra/specflow-integrating-hanko-and-supabase-in-a-solidjs-client-side-application-550m"
  >
    By [Riccardo Perra](https://twitter.com/riccardoperra0)

    <br />

    **Tech Stack:** SolidJS, Supabase, Hanko

    <br />

    Write markdown documentation and generate mermaid diagrams with ease - Made
    with Hanko, SolidJS and Supabase.
  </Card>

  <Card
    title="Budget Guru"
    icon={
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="icon icon-tabler icon-tabler-apps"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    strokeWidth="2"
    stroke="currentColor"
    fill="none"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 7l6 0"></path>
    <path d="M17 4l0 6"></path>
  </svg>
}
    href="https://dev.to/josedonato/my-journey-with-hankoio-how-to-build-a-financial-app-in-record-time-4ipg"
  >
    By [José Donato](https://twitter.com/josedonato__)

    <br />

    **Tech Stack:** SvelteKit, DrizzleORM, Tailwind, Hanko.

    <br />

    BudgetGuru is your AI-powered guide to smarter personal finance.
  </Card>

  <Card
    title="Rapid Product Shoots"
    icon={
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="icon icon-tabler icon-tabler-apps"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    strokeWidth="2"
    stroke="currentColor"
    fill="none"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 7l6 0"></path>
    <path d="M17 4l0 6"></path>
  </svg>
}
    href="https://blog.varunbalani.com/posts/hanko-integration-product-shoots/"
  >
    By [Varun Balani](https://twitter.com/varunbln)

    <br />

    **Tech Stack:** Nextjs (Pages Router), Prisma, Supabase, Replicate, OpenAI, Hanko.

    <br />

    Create beautiful product shoots with AI.
  </Card>

  <Card
    title="AI Magic"
    icon={
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="icon icon-tabler icon-tabler-apps"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    strokeWidth="2"
    stroke="currentColor"
    fill="none"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 7l6 0"></path>
    <path d="M17 4l0 6"></path>
  </svg>
}
    href="https://johanguse.dev/blog/hanko-auth-hackathon"
  >
    By [Johan Guse](https://twitter.com/johanguse)

    <br />

    **Tech Stack:** Nextjs, Replicate, Supabase, Resend, Tailwind, Hanko.

    <br />

    Transform Your Photos with AI Magic
  </Card>

  <Card
    title="Blogging Platform"
    icon={
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="icon icon-tabler icon-tabler-apps"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    strokeWidth="2"
    stroke="currentColor"
    fill="none"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
    <path d="M14 7l6 0"></path>
    <path d="M17 4l0 6"></path>
  </svg>
}
    href="https://dev.to/novu/building-a-blog-with-a-liking-feature-using-react-hanko-and-novu-1m81"
  >
    By [Nevo David](https://twitter.com/nevodavid)

    <br />

    **Tech Stack:** React, Novu, Hanko.

    <br />

    Building a blogging platform using Hanko, React and Novu.
  </Card>
</CardGroup>