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

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://auth0.com/feedback

```json
{
  "path": "/docs/quickstarts",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Auth0 Quickstarts

> Get started using Auth0. Implement authentication for any kind of application in minutes.

export const SectionCard = ({item}) => {
  if (!item) return null;
  const getLink = (item, label) => item.links?.find(l => l.label?.toLowerCase() === label.toLowerCase());
  const github = getLink(item, "github");
  const sample = getLink(item, "sample app");
  const quickstart = getLink(item, "quickstart");
  const docs = getLink(item, "Get started");
  const title = item?.name ?? "";
  const subtext = item?.subtext ?? "";
  const badge = item?.badge ?? "";
  const date = item?.date ?? "";
  const isHttpsLogo = typeof item?.logo === "string" && (/^https:\/\//i).test(item.logo);
  const src = isHttpsLogo ? item.logo : `/docs/images/icons/light/${item?.logo}`;
  const srcDark = isHttpsLogo ? item.logo : `/docs/images/icons/dark/${item?.logo}`;
  const imgClass = "!my-0 w-8 h-8 object-contain shrink-0 " + (isHttpsLogo ? "mint-filter mint-grayscale" : "");
  const tertiary = quickstart || docs;
  const tertiaryLabel = quickstart ? "Quickstart" : docs ? "Get started" : "";
  return <article className="libraries_card rounded-2xl transition-shadow mb-4">
      <div className="px-4 md:px-5 pt-4 md:pt-5 pb-3">
        <div className="flex items-start justify-between gap-3">
          <div className="flex gap-3 min-w-0">
            {item?.logo && <>
                <img noZoom src={src} alt={title} className={`${imgClass} mint-block dark:mint-hidden`} />
                <img noZoom src={srcDark} alt={title} className={`${imgClass} mint-hidden dark:mint-block`} />
              </>}

            <div className="min-w-0 truncate">
              <h4 className="text-base md:text-lg font-semibold text-gray-900 dark:text-white truncate !m-0 leading-snug">
                {title}
              </h4>
              {!!subtext && <p className="!text-sm text-gray-500 dark:text-gray-400 truncate !m-0 leading-tight">
                  {subtext}
                </p>}
            </div>
          </div>

          <div className="flex flex-col items-end gap-0.5 shrink-0">
            {!!badge && <span className="inline-flex items-center rounded-full px-1.5 h-5 text-base font-semibold">
                {badge}
              </span>}
            {!!date && <span className="mr-[5px] !text-xs font-medium text-gray-500 dark:text-gray-400">
                on {date.replace(/^on\s+/i, "")}
              </span>}
          </div>
        </div>
      </div>

      <div className="libraries_card_divider" />

      <div className="px-4 md:px-5 pt-3 pb-4">
        <div className="flex flex-col gap-3 w-full">
          <div className="libraries_cards flex items-center w-full gap-5">
            {github && <a href={github.url} target="_blank" rel="noopener noreferrer" className="no_external_icon inline-flex flex-1 items-center gap-1.5 text-sm font-medium !text-black dark:!text-white !no-underline !border-0 transition-colors duration-200 hover:!text-neutral-700 dark:hover:!text-neutral-200 h-6" style={{
    borderBottom: "none !important"
  }}>
                <Icon icon="github" className="w-3 h-3 shrink-0" />
                <span className="w-full">Github</span>
              </a>}

            {sample && <a href={sample.url} target="_blank" rel="noopener noreferrer" className="no_external_icon inline-flex flex-1 items-center gap-1.5 text-sm font-medium !text-black dark:!text-white !no-underline !border-0 transition-colors duration-200 hover:!text-neutral-700 dark:hover:!text-neutral-200 h-6" style={{
    borderBottom: "none !important"
  }}>
                <Icon icon="download" className="w-3 h-3 shrink-0" />
                <span className="w-full">Sample App</span>
              </a>}
          </div>

          {tertiary && <a href={tertiary.url} className="no_external_icon inline-flex flex-1 items-center gap-1.5 text-sm font-medium !text-black dark:!text-white !no-underline !border-0 transition-colors duration-200 hover:!text-neutral-700 dark:hover:!text-neutral-200 h-6" style={{
    borderBottom: "none !important"
  }}>
              {tertiaryLabel === "Quickstart" ? <Icon icon="play" className="w-3 h-3 shrink-0" /> : <Icon icon="file-lines" className="w-3 h-3 shrink-0" />}
              <span className="w-full">{tertiaryLabel}</span>
            </a>}
        </div>
      </div>
    </article>;
};

Step-by-step guides to quickly integrate Auth0 into your application

## Popular

Quickstarts for popular frameworks:

<Columns cols={2}>
  <SectionCard
    item={{
name: "React",
subtext: "",
logo: "react.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/spa/react" },
],
}}
  />

  <SectionCard
    item={{
name: "Next.js",
subtext: "",
logo: "nextjs.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/webapp/nextjs" }],
}}
  />

  <SectionCard
    item={{
name: "Angular",
subtext: "",
logo: "angular.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/spa/angular" }],
}}
  />

  <SectionCard
    item={{
name: "iOS",
subtext: "",
logo: "apple.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/native/ios-swift" }],
}}
  />

  <SectionCard
    item={{
name: "Android",
subtext: "",
logo: "android.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/android" },
],
}}
  />
</Columns>

## Single Page App

JavaScript web app that runs in the browser

<Columns cols={2}>
  <SectionCard
    item={{
name: "React",
subtext: "",
logo: "react.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/spa/react" },
],
}}
  />

  <SectionCard
    item={{
name: "Angular",
subtext: "",
logo: "angular.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/spa/angular" }],
}}
  />

  <SectionCard
    item={{
name: "JavaScript",
subtext: "",
logo: "javascript.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/spa/vanillajs" }],
}}
  />

  <SectionCard
    item={{
name: "Cap'n Web",
subtext: "",
logo: "javascript.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/spa/capn-web" }],
}}
  />

  <SectionCard
    item={{
name: "Vue",
subtext: "",
logo: "vuejs.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/spa/vuejs" }],
}}
  />

  <SectionCard
    item={{
name: "Flutter (Web)",
subtext: "",
logo: "flutter.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/spa/flutter" }],
}}
  />

  <SectionCard
    item={{
name: "Svelte",
subtext: "",
logo: "svelte.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/spa/svelte" },
],
}}
  />
</Columns>

## Regular Web App

Traditional web app that runs on the server

<Columns cols={2}>
  <SectionCard
    item={{
name: "Next.js",
subtext: "",
logo: "nextjs.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/nextjs" }
],
}}
  />

  <SectionCard
    item={{
name: "Nuxt.js",
subtext: "",
logo: "nuxt.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/webapp/nuxt" }],
}}
  />

  <SectionCard
    item={{
name: "Express",
subtext: "",
logo: "express.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/webapp/express" }],
}}
  />

  <SectionCard
    item={{
name: "Fastify",
subtext: "",
logo: "fastify.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/webapp/fastify" }],
}}
  />

  <SectionCard
    item={{
name: "Flask",
subtext: "",
logo: "flask.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/webapp/python" }],
}}
  />

  <SectionCard
    item={{
name: "Django",
subtext: "",
logo: "django.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/webapp/django/interactive",
  },
],
}}
  />

  <SectionCard
    item={{
name: "FastAPI",
subtext: "",
logo: "fastapi.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/webapp/fastapi" }],
}}
  />

  <SectionCard
    item={{
name: "Go",
subtext: "",
logo: "golang.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/webapp/golang",
  },
],
}}
  />

  <SectionCard
    item={{
name: "Java",
subtext: "",
logo: "java.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/webapp/java" }],
}}
  />

  <SectionCard
    item={{
name: "Java EE",
subtext: "",
logo: "java.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/webapp/java-ee" }],
}}
  />

  <SectionCard
    item={{
name: "Java Spring Boot",
subtext: "",
logo: "spring.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/java-spring-boot" },
],
}}
  />

  <SectionCard
    item={{
name: "ASP.NET (OWIN)",
subtext: "",
logo: "dotnet.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/webapp/aspnet-owin/interactive",
  },
],
}}
  />

  <SectionCard
    item={{
name: "Blazor Server",
subtext: "",
logo: "dotnet-platform.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/webapp/aspnet-core-blazor-server",
  },
],
}}
  />

  <SectionCard
    item={{
name: "ASP.NET Core MVC",
subtext: "",
logo: "dotnet-platform.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/aspnet-core" },
],
}}
  />

  <SectionCard
    item={{
name: "Laravel",
subtext: "",
logo: "laravel.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/webapp/laravel/interactive",
  },
],
}}
  />

  <SectionCard
    item={{
name: "PHP",
subtext: "",
logo: "php.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/php/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "NGINX Plus",
subtext: "",
logo: "nginx.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/webapp/nginx-plus/interactive",
  },
],
}}
  />

  <SectionCard
    item={{
name: "Apache",
subtext: "",
logo: "apache.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/webapp/apache",
  },
],
}}
  />

  <SectionCard
    item={{
name: "Ruby On Rails",
subtext: "",
logo: "rails.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/rails/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Hono",
subtext: "",
logo: "hono.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/hono" }
],
}}
  />
</Columns>

## Native/Mobile App

Mobile or Desktop app that runs natively on a device

<Columns cols={2}>
  <SectionCard
    item={{
name: "iOS / macOS",
subtext: "",
logo: "apple.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/ios-swift" },
],
}}
  />

  <SectionCard
    item={{
name: "Android",
subtext: "",
logo: "android.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/native/android" }],
}}
  />

  <SectionCard
    item={{
name: "Android - Facebook Login",
subtext: "",
logo: "android.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/native/android-facebook-login",
  },
],
}}
  />

  <SectionCard
    item={{
name: "iOS - Facebook Login",
subtext: "",
logo: "apple.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/native/ios-swift-facebook-login",
  },
],
}}
  />

  <SectionCard
    item={{
name: "React Native",
subtext: "",
logo: "react.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/react-native" },
],
}}
  />

  <SectionCard
    item={{
name: "Expo",
subtext: "",
logo: "expo.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/react-native-expo" },
],
}}
  />

  <SectionCard
    item={{
name: "Flutter",
subtext: "",
logo: "flutter.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/native/flutter" }],
}}
  />

  <SectionCard
    item={{
name: ".NET Android & iOS",
subtext: "",
logo: "dotnet.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/net-android-ios" },
],
}}
  />

  <SectionCard
    item={{
name: "MAUI",
subtext: "",
logo: "dotnet-platform.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/maui/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Ionic & Capacitor (Angular)",
subtext: "",
logo: "ionic.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/native/ionic-angular/interactive",
  },
],
}}
  />

  <SectionCard
    item={{
name: "Ionic & Capacitor (React)",
subtext: "",
logo: "ionic.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/native/ionic-react/interactive",
  },
],
}}
  />

  <SectionCard
    item={{
name: "Ionic & Capacitor (Vue)",
subtext: "",
logo: "ionic.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/native/ionic-vue/interactive",
  },
],
}}
  />

  <SectionCard
    item={{
name: "UWP",
subtext: "",
logo: "windows.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/native/windows-uwp-csharp/interactive",
  },
],
}}
  />

  <SectionCard
    item={{
name: "WPF / Winforms",
subtext: "",
logo: "dotnet-platform.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/native/wpf-winforms/interactive",
  },
],
}}
  />

  <SectionCard
    item={{
name: "Device Authorization Flow",
subtext: "",
logo: "auth0.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/native/device/interactive",
  },
],
}}
  />

  <SectionCard
    item={{
name: "Xamarin",
subtext: "",
logo: "xamarin.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/xamarin" },
],
}}
  />
</Columns>

## Backend/API

An API or service protected by Auth0

<Columns cols={2}>
  <SectionCard
    item={{
name: "Express API",
subtext: "",
logo: "express.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/nodejs/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Fastify API",
subtext: "",
logo: "fastify.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/backend/fastify" }],
}}
  />

  <SectionCard
    item={{
name: "Django API",
subtext: "",
logo: "django.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/backend/django/interactive",
  },
],
}}
  />

  <SectionCard
    item={{
name: "Flask API",
subtext: "",
logo: "flask.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/backend/python" }],
}}
  />

  <SectionCard
    item={{
name: "FastAPI API",
subtext: "",
logo: "fastapi.svg",
date: "",
badge: "",
links: [{ label: "Quickstart", url: "/docs/quickstart/backend/fastapi" }],
}}
  />

  <SectionCard
    item={{
name: "Java Springboot API",
subtext: "",
logo: "spring.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/backend/java-spring-security5",
  },
],
}}
  />

  <SectionCard
    item={{
name: "Go API",
subtext: "",
logo: "golang.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/golang" },
],
}}
  />

  <SectionCard
    item={{
name: "ASP.NET Core Web API",
subtext: "",
logo: "dotnet-platform.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/backend/aspnet-core-webapi",
  },
],
}}
  />

  <SectionCard
    item={{
name: "ASP.NET Web API (OWIN)",
subtext: "",
logo: "dotnet.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/backend/webapi-owin",
  },
],
}}
  />

  <SectionCard
    item={{
name: "Laravel API",
subtext: "",
logo: "laravel.svg",
date: "",
badge: "",
links: [
  {
    label: "Quickstart",
    url: "/docs/quickstart/backend/laravel/interactive",
  },
],
}}
  />

  <SectionCard
    item={{
name: "PHP API",
subtext: "",
logo: "php.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/php/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Ruby On Rails API",
subtext: "",
logo: "rails.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/rails/interactive" },
],
}}
  />
</Columns>