회사별 로그인 브랜딩 (Organizations)

1개의 Auth0 테넌트에서 여러 사이트(회사/브랜드)를 운영할 때, Organizations 기능을 사용하면 사이트별로 다른 로그인 화면(로고, 테마 색상)을 보여줄 수 있습니다.

Organizations란?

Auth0 Organizations는 B2B SaaS에서 고객사(조직)별로 사용자 집단을 분리하고, 각 조직마다 독립적인 브랜딩과 인증 설정을 적용할 수 있는 기능입니다.

항목	설명
브랜딩 분리	조직별 로고, 배경색, 버튼 색상 등 커스텀
Connection 분리	조직별로 다른 로그인 수단(Google, SAML 등) 지정
멤버 관리	조직 단위로 사용자 초대 및 역할 부여
Universal Login 연동	기존 Universal Login에 조직 브랜딩이 자동 적용

:::info 전제 조건

• Universal Login(New) 을 사용해야 합니다 (Classic Login은 미지원).
• Auth0 플랜에 따라 Organizations 사용 가능 여부가 다릅니다. 요금제 확인 :::

1. Organization 생성

Dashboard에서 생성

1. Auth0 Dashboard → Organizations → Create Organization

[캡처- Auth0 Dashboard > Organizations > Create Organization 화면]

2. 기본 정보를 입력합니다.

항목	예시	설명
Name	acme-corp	URL-safe 식별자 (소문자, 하이픈만 허용)
Display Name	ACME Corporation	사용자에게 표시되는 이름

(선택) Management API로 생성

Dashboard 대신 API로도 Organization을 생성할 수 있습니다. 여러 Organization을 스크립트로 일괄 생성하거나 CI/CD 파이프라인에서 자동화할 때 유용합니다.

curl --request POST \
  --url 'https://YOUR_TENANT.auth0.com/api/v2/organizations' \
  --header 'Authorization: Bearer MGMT_API_TOKEN' \
  --header 'Content-Type: application/json' \
  --data '{
    "name": "acme-corp",
    "display_name": "ACME Corporation"
  }'

2. 회사별 브랜딩 설정

Dashboard에서 설정

Organization 생성 후 Branding 탭에서 설정합니다.

1. Organizations → 대상 Organization 선택 → Branding

[캡처- Auth0 Organization > Branding 탭에서 로고/색상 설정 화면]

2. 아래 항목을 설정합니다.

항목	설명	예시
Logo URL	로그인 화면 상단 로고 이미지	https://cdn.example.com/acme-logo.png
Primary Color	버튼, 링크 등 주요 색상	#FF6B35
Background Color	로그인 페이지 배경색	#1A1A2E

(선택) Management API로 설정

Dashboard 대신 API를 통해 프로그래밍 방식으로도 브랜딩을 설정할 수 있습니다. 여러 Organization을 일괄 생성하거나 자동화가 필요한 경우 유용합니다.

curl --request PATCH \
  --url 'https://YOUR_TENANT.auth0.com/api/v2/organizations/ORG_ID' \
  --header 'Authorization: Bearer MGMT_API_TOKEN' \
  --header 'Content-Type: application/json' \
  --data '{
    "branding": {
      "logo_url": "https://cdn.example.com/acme-logo.png",
      "colors": {
        "primary": "#FF6B35",
        "page_background": "#1A1A2E"
      }
    }
  }'

여러 회사 브랜딩 예시

Organization	로고	Primary Color	Background Color
acme-corp	acme-logo.png	#FF6B35 (주황)	#1A1A2E (남색)
beta-inc	beta-logo.png	#2563EB (파랑)	#FFFFFF (흰색)
gamma-labs	gamma-logo.png	#16A34A (초록)	#F0FDF4 (연초록)

3. Organization에 Connection 연결

각 Organization이 사용할 로그인 수단(Connection)을 지정합니다.

Dashboard에서 연결

1. Organizations → 대상 Organization → Connections
2. Enable Connections 클릭 → 사용할 Connection 선택

(선택) Management API로 연결

Dashboard 대신 API로도 Connection을 연결할 수 있습니다. 여러 Organization에 동일한 Connection을 일괄 적용할 때 편리합니다.

curl --request POST \
  --url 'https://YOUR_TENANT.auth0.com/api/v2/organizations/ORG_ID/enabled_connections' \
  --header 'Authorization: Bearer MGMT_API_TOKEN' \
  --header 'Content-Type: application/json' \
  --data '{
    "connection_id": "CONNECTION_ID",
    "assign_membership_on_login": true
  }'

:::tip assign_membership_on_login true로 설정하면 해당 Connection으로 처음 로그인하는 사용자가 자동으로 Organization 멤버로 추가됩니다. :::

4. Application에 Organizations 활성화

1. Auth0 Dashboard → Applications → 대상 Application → Login Experience
2. Organization Types 섹션에서 아래 옵션 중 하나를 선택합니다.

[캡처- Auth0 Application > Login Experience > Organization Types 선택 화면]

옵션	설명	사용 사례
Individuals	Organizations 미사용 (기본값)	일반 B2C 앱
Team members of organizations	Organization 필수	모든 사용자가 특정 조직 소속
Both	Organization 선택적	조직 소속 + 개인 사용자 혼합

5. Next.js에서 Organization 로그인 구현

환경 변수 추가

.env.local

# 기존 Auth0 설정 (nextjs.md 참고)
AUTH0_SECRET='임의의-긴-랜덤-문자열'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://YOUR_TENANT.auth0.com'
AUTH0_CLIENT_ID='YOUR_CLIENT_ID'
AUTH0_CLIENT_SECRET='YOUR_CLIENT_SECRET'

방법 A: 사이트별로 Organization 고정

사이트(도메인)마다 어떤 Organization으로 로그인할지 미리 정해두는 방식입니다.

app/api/auth/[auth0]/route.ts

import { handleAuth, handleLogin } from '@auth0/nextjs-auth0';

export const GET = handleAuth({
  login: handleLogin({
    authorizationParams: {
      organization: 'org_ACME_ORG_ID',
    },
  }),
});

이렇게 하면 이 사이트의 로그인 버튼을 누르면 항상 ACME Corporation 브랜딩의 로그인 화면이 표시됩니다.

방법 B: 동적으로 Organization 전환

하나의 앱에서 여러 Organization을 지원하려면, 로그인 시 Organization을 동적으로 지정합니다.

app/api/auth/[auth0]/route.ts

import { handleAuth, handleLogin } from '@auth0/nextjs-auth0';
import { NextRequest } from 'next/server';

export const GET = handleAuth({
  login: async (req: NextRequest) => {
    const orgId = req.nextUrl.searchParams.get('org');

    return handleLogin(req, {
      authorizationParams: {
        organization: orgId || undefined,
      },
    });
  },
});

components/LoginButton.tsx

'use client';

export default function LoginButton({ orgId }: { orgId: string }) {
  return (
    <a href={`/api/auth/login?org=${orgId}`}>로그인</a>
  );
}

방법 C: Organization Name으로 로그인

Organization ID 대신 사람이 읽기 쉬운 이름으로 지정할 수도 있습니다.

app/api/auth/[auth0]/route.ts

import { handleAuth, handleLogin } from '@auth0/nextjs-auth0';
import { NextRequest } from 'next/server';

export const GET = handleAuth({
  login: async (req: NextRequest) => {
    const orgName = req.nextUrl.searchParams.get('org_name');

    return handleLogin(req, {
      authorizationParams: {
        organization: orgName ? `org_name:${orgName}` : undefined,
      },
    });
  },
});

# 아래 URL로 접속하면 acme-corp 브랜딩 로그인 화면이 표시됩니다.
/api/auth/login?org_name=acme-corp

로그인 후 Organization 정보 확인

app/dashboard/page.tsx

import { getSession } from '@auth0/nextjs-auth0';

export default async function DashboardPage() {
  const session = await getSession();

  if (!session) {
    return <div>로그인이 필요합니다</div>;
  }

  // session.user.org_id — 로그인한 Organization ID
  return (
    <div>
      <p>{session.user.name}님 환영합니다</p>
      <p>소속 조직: {session.user.org_id}</p>
    </div>
  );
}

전체 흐름 요약

1. Auth0 Dashboard에서 Organization 생성 (회사별)
2. 각 Organization에 브랜딩 설정 (로고, 색상)
3. Organization에 Connection 연결
4. Application에서 Organizations 활성화
5. Next.js 로그인 라우트에 organization 파라미터 추가
6. 사용자가 로그인 → 해당 Organization 브랜딩의 Universal Login 표시

사이트 A (acme.example.com)
  └─ /api/auth/login?org=org_ACME
       └─ Auth0 Universal Login (ACME 로고 + 주황색 테마)

사이트 B (beta.example.com)
  └─ /api/auth/login?org=org_BETA
       └─ Auth0 Universal Login (Beta 로고 + 파란색 테마)

참고 자료

• Auth0 Organizations 공식 문서
• Organization 브랜딩 설정
• nextjs-auth0 Organizations 가이드