> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Démarrages rapides

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

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

## Popular

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

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

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

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

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

## Application à page unique

Application Web JavaScript qui s’exécute dans le navigateur

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

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

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

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

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

## Application Web classique

Application Web classique qui s’exécute sur le serveur

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## Application native/mobile

Application mobile ou de bureau à exécution native

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## Dorsale/API

Une API ou un service protégé par Auth0

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

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

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

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

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

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

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

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

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

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