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

# Guides de démarrage rapide Auth0

> Commencez à utiliser Auth0. Implémentez l’authentification pour tout type d’application en quelques 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">Application exemple</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>;
};

Guides pas à pas pour intégrer rapidement Auth0 à votre application

<div id="popular">
  ## Les plus populaires
</div>

Guides de démarrage rapide pour les frameworks populaires :

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

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

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

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

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

<div id="single-page-app">
  ## Application monopage
</div>

Application web en JavaScript qui s’exécute dans le navigateur

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

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

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

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

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

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

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

<div id="regular-web-app">
  ## Application Web classique
</div>

Application Web traditionnelle exécutée sur le serveur

<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>

<div id="nativemobile-app">
  ## Application native/mobile
</div>

Application mobile ou de bureau fonctionnant nativement sur un appareil

<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>

<div id="backendapi">
  ## Backend/API
</div>

Une API ou un service protégé par Auth0

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

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

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

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

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

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

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

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

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

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

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

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