Skip to main content
앱이 Clerk Auth를 사용하면, 방문자는 소셜 제공자로 로그인할 수 있습니다. Replit은 기본으로 공유 자격 증명을 제공합니다. 이 페이지에서는 각 제공자에 대해 직접 OAuth 자격 증명을 가져오는 방법을 다루며, 이를 통해 로그인 화면에 앱의 이름과 브랜딩을 표시할 수 있습니다. 모든 제공자에 대한 흐름은 동일합니다: 제공자의 콘솔에서 OAuth 앱을 만들고, Replit이 보여주는 URL을 복사한 다음, 생성된 자격 증명을 제공자의 편집 패널에 붙여넣습니다.
커스텀 OAuth 자격 증명은 Production 환경에서만 사용할 수 있으므로, 먼저 앱을 게시해야 합니다. 각 제공자의 편집 패널은 Users & Auth 도구에서 엽니다: Configure 탭, SSO providers 섹션에서 Production 환경을 선택한 다음 제공자 옆의 Edit을 선택하세요. 전체 흐름은 SSO 제공자용 OAuth 자격 증명 구성하기를 참고하세요.

Google

이 가이드는 Google Cloud Console에서 Google OAuth 앱을 만드는 과정을 안내합니다. Client IDClient Secret을 수집하고, Clerk가 요구하는 JavaScript 원본과 리디렉션 URI를 구성하게 됩니다. 필요한 것: Google Cloud Console 접근 권한입니다.

1단계: Google OAuth 앱 만들기

Google Cloud Console로 이동합니다.

프로젝트 만들기 또는 선택하기

  1. 프로젝트 드롭다운에서 기존 프로젝트를 선택하거나 새 프로젝트를 만듭니다
  2. 프로젝트의 Dashboard로 리디렉션됩니다

OAuth 동의 화면 구성하기

  1. 왼쪽 사이드바에서 메뉴 아이콘(≡)을 선택하고 APIs & Services를 선택합니다
  2. OAuth consent screen을 선택합니다
  3. 필요한 정보로 앱의 동의 화면을 구성합니다
  4. 변경 사항을 저장합니다

OAuth 자격 증명 만들기

  1. APIs & Services에서 Credentials를 선택합니다
  2. 상단의 Create Credentials를 선택한 다음 OAuth client ID를 선택합니다
  3. 애플리케이션 유형으로 Web application을 선택합니다
  4. Authorized JavaScript originsAuthorized redirect URIsAuth 패널Provider setup에 표시된 정확한 값으로 설정합니다. 나열된 모든 값을 추가하세요 — 게시된 도메인과 커스텀 도메인이 모두 포함됩니다. 이 값들을 찾는 방법은 SSO 제공자용 OAuth 자격 증명 구성하기를 참고하세요.
  5. Create를 선택합니다
  6. Client IDClient Secret을 저장합니다
Client Secret을 안전하게 보관하고 절대 버전 관리 시스템에 커밋하지 마세요.
Google 로그인은 임베디드 브라우저나 인앱 웹뷰에서는 작동하지 않습니다. 사용자는 표준 웹 브라우저를 사용해야 합니다.

문제 해결

Redirect URI mismatch

  • Google Cloud Console의 리디렉션 URI가 Auth 패널Provider setup에 표시된 값과 정확히 일치하는지 확인하세요
  • 후행 슬래시나 오타가 없는지 확인하세요
  • Google의 구성이 전파되기까지 몇 분 정도 기다리세요

Invalid client

  • Client ID와 Client Secret이 올바르게 복사되었는지 다시 확인하세요
  • 여분의 공백이 없는지 확인하세요
  • OAuth 동의 화면이 구성되었는지 확인하세요

커스텀 도메인에서 작동하지 않음

  • Auth 패널Provider setup에 표시된 커스텀 도메인 항목을 Authorized JavaScript origins와 Authorized redirect URIs 모두에 추가하세요

GitHub

이 가이드는 GitHub Developer Settings에서 GitHub OAuth 앱을 만드는 과정을 안내합니다. Client IDClient Secret을 수집하여 Auth 패널에 입력하게 됩니다. 필요한 것: GitHub 계정입니다.

1단계: GitHub OAuth 앱 만들기

  1. GitHub Developer Settings로 이동합니다
  2. 사이드바에서 OAuth Apps를 선택합니다
  3. New OAuth App을 선택합니다
  4. 애플리케이션 세부 정보를 입력합니다:
Application name: 애플리케이션 이름을 입력합니다. Homepage URLAuthorization callback URL: 두 값 모두 Auth 패널Provider setup에 표시된 값으로 정확히 설정합니다. 이 값들을 찾는 방법은 SSO 제공자용 OAuth 자격 증명 구성하기를 참고하세요.
  1. Register application을 선택합니다

2단계: 클라이언트 자격 증명 생성하기

  1. 앱의 설정 페이지에서 Client ID가 표시됩니다 - 복사하세요
  2. Generate a new client secret을 선택합니다
  3. Client Secret을 즉시 복사하세요
Client Secret을 안전하게 저장하세요. 페이지를 벗어난 후에는 다시 볼 수 없습니다. 잃어버렸다면 새로 생성해야 합니다.

문제 해결

Redirect URI mismatch

  • Authorization callback URL이 Auth 패널Provider setup에 표시된 값과 정확히 일치하는지 확인하세요
  • 오타나 잘못된 프로토콜이 없는지 확인하세요
  • 후행 슬래시가 없어야 합니다

Invalid client

  • Client ID와 Client Secret이 올바르게 복사되었는지 다시 확인하세요
  • 붙여넣을 때 여분의 공백이 없는지 확인하세요

커스텀 도메인에서 작동하지 않음

  • Homepage URL과 Authorization callback URL을 Auth 패널Provider setup에 표시된 커스텀 도메인 값으로 업데이트하세요

Apple

이 가이드는 Sign in with Apple에 필요한 Apple App ID, Services ID, Private Key를 생성하는 과정을 안내합니다. Team ID, Services ID, Key ID, Private Key를 수집하여 Auth 패널에 입력하게 됩니다. 필요한 것: Apple Developer 계정입니다(Apple Developer Program 가입 필요).

1단계: Apple App ID 만들기

  1. Apple Developer 포털로 이동합니다
  2. Certificates, IDs & Profiles로 이동한 다음 Identifiers를 선택합니다
  3. 드롭다운에서 App IDs를 선택합니다
  4. + 아이콘을 선택하여 새 식별자를 등록합니다
  5. App IDs를 선택한 다음 Continue를 선택합니다
  6. App을 선택한 다음 Continue를 선택합니다
  7. 다음 항목을 입력합니다:
    • Description: App ID의 이름
    • Bundle ID: 고유 식별자
  8. Capabilities에서 Sign In with Apple을 활성화합니다
  9. Continue를 선택한 다음 Register를 선택합니다
  10. App ID Prefix를 저장하세요(상단에 표시됨) - 이것이 Team ID입니다

2단계: Apple Services ID 만들기

  1. Identifiers 페이지에서 드롭다운에서 Services IDs를 선택합니다
  2. **+**를 선택하여 새 식별자를 등록합니다
  3. Services IDs를 선택한 다음 Continue를 선택합니다
  4. 다음 항목을 입력합니다:
    • Description: Services ID의 이름
    • Identifier: 고유 식별자(저장해 두세요 - 이것이 Services ID입니다)
  5. Continue를 선택한 다음 Register를 선택합니다

Services ID 구성하기

  1. 새로 만든 Services ID를 선택합니다
  2. Sign In with Apple을 활성화합니다
  3. Configure를 선택합니다
  4. 다음을 설정합니다:
    • Primary App ID: 1단계에서 만든 App ID를 선택합니다
    • Domains and Subdomains: Auth 패널Provider setup에 표시된 값을 복사합니다(https:// 프로토콜 접두사 제외)
    • Return URLs: Auth 패널Provider setup에 표시된 값을 복사합니다
    이 값들을 찾는 방법은 SSO 제공자용 OAuth 자격 증명 구성하기를 참고하세요.
  5. Next를 선택한 다음 Done, Continue, Save를 순서대로 선택합니다

3단계: Apple Private Key 만들기

  1. Apple Developer 포털 사이드바에서 Keys를 선택합니다
  2. **+**를 선택하여 새 키를 등록합니다
  3. Key Name을 입력합니다
  4. Sign In with Apple을 활성화합니다
  5. Configure를 선택한 다음 1단계에서 만든 App ID를 선택합니다
  6. Save를 선택한 다음 Continue, Register를 순서대로 선택합니다
  7. Key ID를 저장하세요
  8. 프라이빗 키 파일(.p8)을 다운로드합니다
프라이빗 키는 한 번만 다운로드할 수 있습니다. 안전하게 보관하세요 — 다시 다운로드할 수 없습니다.

4단계: Apple Private Email Relay 구성하기

Apple의 Hide My Email 기능을 사용하면 사용자가 실제 이메일을 노출하지 않고 로그인할 수 있습니다. 이런 사용자에게 이메일을 보내려면 이메일 소스를 등록해야 합니다.
  1. Apple Developer 포털 사이드바에서 Services를 선택합니다
  2. Sign in with Apple for Email Communication 아래에서 Configure를 선택합니다
  3. **+**를 선택하여 Email Source를 추가합니다
  4. Auth 패널Provider setup에 표시된 Email Source 값을 입력합니다
  5. Next를 선택한 다음 Register, Done을 순서대로 선택합니다
  6. DNS 확인을 기다립니다(녹색 체크 아이콘)
일부 지역(중국, 인도)에서는 Apple ID가 이메일 대신 전화번호에 연결되어 있을 수 있습니다. 앱이 모든 사용자에게 이메일을 요구하는 경우, 이러한 지역의 사용자에게는 Sign in with Apple이 실패할 수 있습니다.

문제 해결

Invalid client

  • 모든 자격 증명이 올바르게 입력되었는지 확인하세요
  • 프라이빗 키에 BEGIN 및 END 줄이 포함되어 있는지 확인하세요
  • Services ID가 올바르게 구성되었는지 확인하세요

Invalid redirect URI

  • Apple Services ID 구성의 Return URL이 Auth 패널Provider setup에 표시된 값과 정확히 일치하는지 확인하세요
  • Domains and Subdomains의 도메인이 게시된 도메인과 일치하는지 확인하세요(https:// 제외)

이메일 릴레이가 작동하지 않음

  • Apple Developer 포털에서 Email Source에 녹색 체크가 표시되는지 확인하세요
  • 최근에 추가했다면 DNS 전파를 기다리세요

커스텀 도메인에서 작동하지 않음

  • Auth 패널Provider setup에 표시된 커스텀 도메인 항목을 Domains and Subdomains(https:// 제외)와 Return URLs에 추가하세요

추가 자료

X (Twitter)

이 가이드는 X Developer Portal에서 X OAuth 앱을 만드는 과정을 안내합니다. Client IDClient Secret을 수집하여 Auth 패널에 입력하게 됩니다. 필요한 것: X Developer 계정입니다(무료 등급 사용 가능).

1단계: X Developer 앱 설정하기

개발자 계정 만들기(필요한 경우)

  1. X Developer Portal로 이동합니다
  2. 개발자 계정이 없다면 신청합니다
  3. 사용 사례를 설명하는 신청서를 작성합니다

앱 만들기 또는 선택하기

  1. X Developer Portal에서 Projects & Apps로 이동합니다
  2. 기존 앱을 사용하거나 Add App을 선택합니다
  3. 앱 이름을 입력하고 Next를 선택합니다
  4. App settings를 선택합니다

2단계: 인증 구성하기

  1. User authentication settings로 스크롤합니다
  2. Set up을 선택합니다
App permissions: 최소 권한 수준을 선택하세요.
  • Read - 사용자 프로필에 필요(최소 요구 사항)
  • Write - 사용자를 대신하여 게시하기 위해 필요(선택 사항)
  • Direct Messages - DM 접근을 위해 필요(선택 사항)
권한은 요청된 스코프와 일치해야 합니다. 앱이 tweet.write를 요청하는데 Read만 활성화했다면 인증이 실패합니다.
Type of app: Web App, Automated App or Bot을 선택하세요 App info:
  • Callback URI / Redirect URL: Auth 패널Provider setup에 표시된 값을 복사합니다
  • Website URL: Auth 패널Provider setup에 표시된 값을 복사합니다
이 값들을 찾는 방법은 SSO 제공자용 OAuth 자격 증명 구성하기를 참고하세요.
  1. Save를 선택합니다
  2. Client ID와 Client Secret을 저장하세요
Client Secret을 안전하게 보관하세요. 잃어버리면 재생성 시 기존 값이 무효화됩니다.

문제 해결

Redirect URI mismatch

  • Callback URI가 Auth 패널Provider setup에 표시된 값과 정확히 일치하는지 확인하세요
  • 오타나 잘못된 프로토콜이 없는지 확인하세요
  • 후행 슬래시가 없어야 합니다

Invalid client

  • Client ID와 Client Secret을 다시 확인하세요
  • 여분의 공백이 없는지 확인하세요
  • OAuth 1.0a가 아닌 OAuth 2.0 자격 증명을 사용하고 있는지 확인하세요

Scope/permission 오류

  • 스코프가 X Developer Portal에서 활성화된 권한과 일치하는지 확인하세요
  • 최소한 Read 권한이 활성화되어 있는지 확인하세요

개발 모드의 앱

  • X 앱은 제한된 사용자 수로 개발 모드에서 시작합니다
  • 프로덕션 용도로는 상향된 접근 권한을 신청해야 할 수 있습니다

커스텀 도메인에서 작동하지 않음

  • Website URL과 Callback URI를 Auth 패널Provider setup에 표시된 커스텀 도메인 값으로 업데이트하세요

추가 자료