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

# Fr CA

export const BgImage = () => {
  return <>
      <span className="fixed inset-0 -z-10 pointer-events-none dark:hidden" style={{
    backgroundImage: "url('/docs/images/bg_light.svg')",
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",
    backgroundPosition: "left -250px",
    backgroundAttachment: "fixed"
  }} />
      <span className="fixed inset-0 -z-10 pointer-events-none hidden dark:block" style={{
    backgroundImage: "url('/docs/images/bg_dark.svg')",
    backgroundRepeat: "no-repeat",
    backgroundSize: "",
    backgroundPosition: "center 0",
    backgroundAttachment: "fixed"
  }} />
    </>;
};

export const LearnBasicsGrid = () => {
  const items = [{
    title: "Concepts de base",
    desc: "Cours complet sur les principes fondamentaux de l’identité.",
    href: "https://auth0.com/learn#concepts",
    img: "/docs/images/home/basics-card1"
  }, {
    title: "Guides pratiques",
    desc: "Collection open source d’exemples et de guides.",
    href: "https://developer.auth0.com/resources/guides?_gl=1*hg464v*_gcl_aw*R0NMLjE3NTg1NTU5NTQuQ2owS0NRanc1OFBHQmhDa0FSSXNBRGJEaWx6TGFiRWtJUWNCR0Iybi1WcjA2Z2lZX0FoTjdpaFoxTjRValdTMGZJX2sxVjNNV3FOOUowY2FBdmg2RUFMd193Y0I.*_gcl_au*MjYwOTY4MDAwLjE3NTUwODIyNDM.*_ga*NTU0NzcwODMwLjE3NTUwODIyNDM.*_ga_QKMSDV5369*czE3NjAzNjgxMDYkbzEwMCRnMSR0MTc2MDM2ODEyNCRqNDIkbDAkaDA.",
    img: "/docs/images/home/basics-card2"
  }, {
    title: "Communauté",
    desc: "Rejoignez la communauté pour poser des questions, faire des suggestions et donner votre avis sur les produits.",
    href: "https://community.auth0.com/?_gl=1*1mc779c*_gcl_aw*R0NMLjE3NTg1NTU5NTQuQ2owS0NRanc1OFBHQmhDa0FSSXNBRGJEaWx6TGFiRWtJUWNCR0Iybi1WcjA2Z2lZX0FoTjdpaFoxTjRValdTMGZJX2sxVjNNV3FOOUowY2FBdmg2RUFMd193Y0I.*_gcl_au*MjYwOTY4MDAwLjE3NTUwODIyNDM.*_ga*NTU0NzcwODMwLjE3NTUwODIyNDM.*_ga_QKMSDV5369*czE3NjAzNjgxMDYkbzEwMCRnMSR0MTc2MDM2ODk2OSRqNTkkbDAkaDA.",
    img: "/docs/images/home/basics-card3"
  }, {
    title: "Soutien",
    desc: "Bénéficiez d’une assistance pour votre implémentation Auth0.",
    href: "https://support.auth0.com/",
    img: "/docs/images/home/basics-card4"
  }];
  return <section className="max-w-[962px] mx-auto py-12 pb-30 px-8 lg:px-0">
      <h2 className="font-inter !font-medium text-[24px] text-gray-900 dark:text-white mb-6 text-left">
        Ressources et soutien
      </h2>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {items.map(it => <a key={it.title} href={it.href} target="_blank" className="no_external_icon group block rounded-2xl border border-gray-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 hover:border-black dark:hover:border-white hover:shadow-lg transition-all">
            {}
            <div className="w-12 h-12 mb-4 overflow-hidden">
              <img src={`${it.img}.svg`} alt={it.title} className="block dark:hidden w-full h-full object-cover" />
              <img src={`${it.img}-dark.svg`} alt={it.title} className="hidden dark:block w-full h-full object-cover" />
            </div>

            {}
            <div>
              <h3 className="font-inter font-medium text-lg text-gray-900 dark:text-white mb-2">{it.title}</h3>
              <p className="text-[15px] leading-6 text-gray-600 dark:text-gray-400">{it.desc}</p>
            </div>
          </a>)}
      </div>
    </section>;
};

export const ProductGrid = () => {
  const products = [{
    label: "Authentification",
    href: "https://auth0.com/platform/authentication"
  }, {
    label: "Autorisation à granularité fine",
    href: "https://auth0.com/fine-grained-authorization"
  }, {
    label: "Auth0 pour les agents IA",
    href: "https://auth0.com/ai"
  }];
  return <section className="max-w-[962px] mx-auto py-12 px-8 lg:px-0">
      <h2 className="font-inter !font-medium text-[24px] text-gray-900 dark:text-white mb-6 text-left">
        Par produit
      </h2>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {products.map(p => <a key={p.href} href={p.href} className="
              no_external_icon
              group
              flex items-center justify-center
              rounded-2xl
              min-h-[72px] md:min-h-[80px]
              px-6
              text-base md:text-lg font-inter font-medium
              bg-white/70 dark:bg-neutral-900/60
              border border-gray-200 dark:border-white/10
              shadow-sm
              hover:shadow-md
              hover:border-black dark:hover:border-white
              transition
              focus:outline-none focus-visible:ring-2 focus-visible:ring-black/60 dark:focus-visible:ring-white/60
            ">
            <span className="text-gray-900 dark:text-white">{p.label}</span>
          </a>)}
      </div>
    </section>;
};

export const LanguageGrid = () => {
  const languages = [{
    img: "react.svg",
    label: "React",
    href: "/docs/fr-CA/quickstart/spa/react"
  }, {
    img: "angular.svg",
    label: "Angular",
    href: "/docs/fr-CA/quickstart/spa/angular"
  }, {
    img: "nextjs.svg",
    label: "Next.js",
    href: "/docs/fr-CA/quickstart/webapp/nextjs"
  }, {
    img: "apple.svg",
    label: "iOS",
    href: "/docs/fr-CA/quickstart/native/ios-swift"
  }, {
    img: "android.svg",
    label: "Android",
    href: "/docs/fr-CA/quickstart/native/android"
  }, {
    img: "java.svg",
    label: "Java",
    href: "/docs/fr-CA/quickstart/backend/java-spring-security5/interactive"
  }, {
    img: "dotnet.svg",
    label: ".NET",
    href: "/docs/fr-CA/quickstart/backend/aspnet-core-webapi"
  }, {
    img: "python.svg",
    label: "Python",
    href: "/docs/fr-CA/quickstart/backend/python"
  }];
  return <section className="max-w-[962px] mx-auto py-12 px-8 lg:px-0">
      <h2 className="font-inter !font-medium text-[24px] text-gray-900 dark:text-white mb-6">
        Commencez avec l’authentification
      </h2>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
        {languages.map((lang, idx) => <a key={idx} href={lang.href} className="flex flex-col items-center justify-center px-8 py-4 rounded-2xl 
                      bg-white/60 dark:bg-neutral-900/60 
                      border border-gray-200 dark:border-white/10 
                      shadow-sm hover:shadow-md 
                      hover:border-black dark:hover:border-white 
                      transition">
            <img noZoom src={`/docs/images/icons/light/${lang.img}`} alt={lang.label} className="h-8 w-8 mb-4 block dark:hidden" />
            <img noZoom src={`/docs/images/icons/dark/${lang.img}`} alt={lang.label} className="h-8 w-8 mb-4 hidden dark:block" />
            <span className="font-inter text-base text-gray-900 dark:text-white">{lang.label}</span>
          </a>)}
      </div>
    </section>;
};

export const DocsFeatureCards = () => {
  const features = [{
    title: "Documentation",
    link: "/docs/get-started",
    icon: "/docs/images/home/icon1",
    external: true
  }, {
    title: "Références d’API",
    link: "/docs/api",
    icon: "/docs/images/home/icon2",
    external: false
  }, {
    title: "Trousses de développement logiciel (SDK)",
    link: "/docs/libraries",
    icon: "/docs/images/home/icon3",
    external: false
  }];
  return <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-[962px] mx-auto py-6 px-8 lg:px-0">
      {features.map((f, i) => <a key={i} href={f.link} className="group flex flex-col items-start justify-between rounded-2xl px-6 py-6 
                     bg-white dark:bg-neutral-900/60 
                     border border-gray-200 dark:border-white/10 
                     hover:border-black dark:hover:border-white 
                     transition no_external_icon">
          <div className="flex flex-col items-start gap-3 w-full">
            <div className="h-9 w-9 flex items-center justify-center rounded-md">
              <img src={`${f.icon}.svg`} alt={f.title} className="block dark:hidden h-7 w-7" />
              <img src={`${f.icon}-dark.svg`} alt={f.title} className="hidden dark:block h-7 w-7" />
            </div>

            <div className="flex items-center justify-between w-full">
              <h3 className="font-inter font-medium text-gray-900 dark:text-gray-100 text-xl">{f.title}</h3>
              <span className="opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 
                  transition-all duration-200 ease-out
                  flex items-center justify-center h-7 w-7 rounded-full 
                  bg-black dark:bg-white">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" className="fill-white dark:fill-black">
                  <path d="M204,64V168a12,12,0,0,1-24,0V93L72.49,200.49a12,12,0,0,1-17-17L163,76H88a12,12,0,0,1,0-24H192A12,12,0,0,1,204,64Z"></path>
                </svg>
              </span>
            </div>
          </div>
        </a>)}
    </div>;
};

export const DocsBanner = () => {
  return <div className="gap-5 flex justify-center p-6 bg-[radial-gradient(1200px_600px_at_50%_-10%,rgba(180,160,255,.45)_0%,rgba(255,235,240,.35)_40%,rgba(255,245,235,.6)_100%)]">
      <div className="w-[min(860px,90vw)] text-center px-0 py-2 md:px-6 md:py-12">
        <h1 className="mb-5 font-inter font-semibold text-5xl text-center text-gray-900 dark:text-white">Documentation Auth0</h1>
        <p className="mt-4 mb-10 font-inter font-normal text-body-l leading-body-l tracking-body-l text-center text-gray-600 max-w-2xl mx-auto dark:text-white">
          Parcourez les plus récents exemples de code, articles, tutoriels,
          <br /> et la référence de l’API.
        </p>

        <div className="flex justify-center mt-5">
          {}
          <img noZoom src="/docs/images/home/banner-mobile.svg" alt="Bannière de la documentation Auth0" className="block w-full h-auto sm:hidden" />

          {}
          <img noZoom src="/docs/images/home/banner.svg" alt="Bannière de la documentation Auth0" className="hidden w-full h-auto sm:block dark:hidden" />
          {}
          <img noZoom src="/docs/images/home/banner-dark.svg" alt="Bannière de la documentation Auth0 (mode sombre)" className="hidden w-full h-auto sm:dark:block" />
        </div>
      </div>
    </div>;
};

<BgImage />

<DocsBanner />

<DocsFeatureCards />

<LanguageGrid />

<ProductGrid />

<LearnBasicsGrid />