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

# クイックスタート

> 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 ? "クイックスタート" : docs ? "はじめに" : "";
  return <article className="
      libraries_card mb-[16px]
      rounded-xl border bg-white shadow-sm hover:shadow-md transition-shadow
      border-gray-200 dark:border-gray-800 dark:bg-black
    ">
      <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">
              <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-xs 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 py-[0.5px] text-[10px] font-medium
                  border border-emerald-700 text-emerald-700 bg-emerald-200
                  dark:border-emerald-400 dark:text-emerald-300 dark:bg-emerald-900/30
                ">
                {badge}
              </span>}
            {!!date && <span className="mr-[5px] text-[10px] text-gray-500 dark:text-gray-400">
                on {date.replace(/^on\s+/i, "")}
              </span>}
          </div>
        </div>
      </div>

      <div className="h-px mx-3 bg-gray-200 dark:bg-gray-800" />

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

          {sample && <a href={sample.url} target="_blank" rel="noopener noreferrer" className="
                no_external_icon inline-flex items-center gap-1.5 text-xs font-medium
                !text-black dark:!text-white
                !no-underline !border-0
                transition-colors duration-200
                hover:!text-neutral-700 dark:hover:!text-neutral-200
              " style={{
    borderBottom: "none !important"
  }}>
              <Icon icon="download" className="w-3 h-3 shrink-0" />
              <span className="leading-none">サンプルアプリ</span>
            </a>}

          {tertiary && <a href={tertiary.url} className="
                no_external_icon inline-flex items-center gap-1.5 text-xs font-medium
                !text-black dark:!text-white
                !no-underline !border-0
                transition-colors duration-200
                hover:!text-neutral-700 dark:hover:!text-neutral-200
              " 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="leading-none">{tertiaryLabel}</span>
            </a>}
        </div>
      </div>
    </article>;
};

段階的な手順のあるガイドを使って、Auth0をアプリケーションに素早く統合できるようにします

<div id="popular">
  ## Popular
</div>

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

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

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

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

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

<div id="single-page-app">
  ## シングルページアプリ
</div>

ブラウザー内で動作するJavaScript Webアプリ

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

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

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

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

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

<div id="regular-web-app">
  ## 通常のWebアプリ
</div>

サーバー上で動作する従来型のWebアプリ

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

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

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

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

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

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

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

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

  <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: "ASP.NET Core Blazor Server",
subtext: "",
logo: "dotnet-platform.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/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/quickstart/webapp/aspnet-core/interactive" }
],
}}
  />

  <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/interactive" }
],
}}
  />

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

<div id="nativemobile-app">
  ## ネイティブ/モバイルアプリ
</div>

デバイス上でネイティブに動作するモバイルまたはデスクトップのアプリ

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

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

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

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

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

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

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

  <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/interactive" },
],
}}
  />
</Columns>

<div id="backendapi">
  ## バックエンド/API
</div>

Auth0で保護されたAPIまたはサービス

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

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

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

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

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

  <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/interactive" },
],
}}
  />

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