내 앱에 rld.kr로 로그인 붙이기

rld.kr의 표준 discovery 엔드포인트는 다음과 같아요. 대부분의 OIDC/OAuth 라이브러리는 이 주소만 있으면 나머지 엔드포인트를 자동으로 찾아냅니다.

Issuer:    https://yiinrxtvrhlvnfkthkvy.supabase.co/auth/v1
Discovery: https://yiinrxtvrhlvnfkthkvy.supabase.co/auth/v1/.well-known/openid-configuration

rld.kr은 동적 클라이언트 등록(Dynamic Client Registration)을 지원합니다. 지원하는 SDK는 자동으로 client_id를 발급받아 사용할 수 있어요. 수동 등록이 필요하다면 아래 정보로 hello@rld.kr로 문의하세요.

• 앱 이름
• Redirect URI (예: https://myapp.com/auth/callback)
• 요청할 스코프 (기본: openid email profile)

당신이 만드는 다른 Lovable 프로젝트에서 rld 계정으로 로그인 받으려면:

1. 해당 프로젝트에서 Lovable Cloud를 활성화하세요.
2. 환경 변수에 rld 발급자와 클라이언트 ID를 저장하세요:

   VITE_RLD_ISSUER=https://yiinrxtvrhlvnfkthkvy.supabase.co/auth/v1
   VITE_RLD_CLIENT_ID=<발급받은 client_id>

3. Lovable AI 챗에 이렇게 말하세요:

   rld.kr OAuth (Issuer: https://yiinrxtvrhlvnfkthkvy.supabase.co/auth/v1)로 로그인하는
   "rld.kr로 로그인" 버튼과 콜백 라우트를 만들어줘.
   Authorization Code + PKCE 흐름을 사용하고,
   성공 시 사용자 정보를 로컬 profiles 테이블에 저장해줘.

4. Redirect URI (https://당신의앱.lovable.app/auth/callback)를 rld 팀에 알려주고 등록받으세요.

바닐라 JS/TS 기준 최소 예시입니다. React 앱에서도 동일합니다.

// 1) 로그인 시작
async function loginWithRld() {
  const verifier = crypto.randomUUID() + crypto.randomUUID();
  sessionStorage.setItem("rld_verifier", verifier);
  const challenge = await sha256base64url(verifier);

  const url = new URL("https://yiinrxtvrhlvnfkthkvy.supabase.co/auth/v1/authorize");
  url.searchParams.set("response_type", "code");
  url.searchParams.set("client_id", import.meta.env.VITE_RLD_CLIENT_ID);
  url.searchParams.set("redirect_uri", location.origin + "/auth/callback");
  url.searchParams.set("scope", "openid email profile");
  url.searchParams.set("code_challenge", challenge);
  url.searchParams.set("code_challenge_method", "S256");
  location.href = url.toString();
}

// 2) 콜백에서 code → token 교환
async function handleCallback() {
  const code = new URL(location.href).searchParams.get("code")!;
  const verifier = sessionStorage.getItem("rld_verifier")!;

  const res = await fetch("https://yiinrxtvrhlvnfkthkvy.supabase.co/auth/v1/token", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams({
      grant_type: "authorization_code",
      code,
      code_verifier: verifier,
      client_id: import.meta.env.VITE_RLD_CLIENT_ID,
      redirect_uri: location.origin + "/auth/callback",
    }),
  });
  const { access_token, id_token } = await res.json();

  // 3) 사용자 정보 조회
  const user = await fetch("https://yiinrxtvrhlvnfkthkvy.supabase.co/auth/v1/userinfo", {
    headers: { Authorization: "Bearer " + access_token },
  }).then((r) => r.json());
  // → { sub, email, name, picture }
}

사용자가 당신의 앱에서 "rld.kr로 로그인"을 누르면 rld의 동의 화면으로 이동해요. 승인하면 앱이 rld 계정 정보를 받고, 이 연결은 사용자의 rld 계정 대시보드에서 언제든 확인 · 해제할 수 있습니다.