오늘 Product Hunt에 올라왔어요! 댓글 남기기

Supabase 인증 앱 사용하기

Supabase 다단계 인증은 어떤 인증 앱이든 만드는 시간 기반 코드(TOTP)를 사용하며, 브라우저 안의 인증 앱도 마찬가지입니다. 대시보드에서 Account(계정) → Security(보안)를 열고 Multi-factor authentication(다단계 인증) 아래의 ‘Add app’(앱 추가)을 클릭한 다음, Authenticator 확장 프로그램으로 화면의 QR 코드를 스캔하세요.

Supabase 계정으로는 내가 속한 모든 프로젝트를 열 수 있습니다. 사용자 데이터가 담긴 데이터베이스, API 키, 스토리지, 결제까지요. 비밀번호를 도용당하면 이 모두를 읽거나 삭제할 수 있습니다. MFA를 켜면 Supabase가 인증 앱의 6자리 코드도 요구하며, 유료 요금제의 조직은 모든 멤버에게 이를 요구할 수 있습니다.

Supabase에서 다단계 인증 켜기

이 설정은 내 Supabase 계정을 보호합니다. Supabase로 만든 앱의 사용자를 위한 MFA는 별개의 설정으로, 프로젝트의 Auth 설정에 있습니다. MFA를 활성화하면 Supabase가 다른 모든 세션에서 로그아웃시키므로, 코드로 다시 로그인하게 됩니다.

  1. 컴퓨터에서 Supabase Dashboard에 로그인합니다.
  2. 계정 메뉴를 열고 ‘Account’(계정)를 선택한 다음 사이드바에서 ‘Security’(보안)를 선택합니다. supabase.com/dashboard/account/security로 바로 이동해도 됩니다.
  3. ‘Multi-factor authentication’(다단계 인증) 아래의 ‘Add app’(앱 추가)을 클릭합니다.
  4. ‘Authenticator app name’(인증 앱 이름)에 알아볼 수 있는 이름을 입력하고 ‘Generate QR’(QR 생성)을 클릭합니다.
  5. Supabase에 QR 코드가 표시되면 그 페이지를 열어 둔 채 아래 설명대로 확장 프로그램에 추가합니다. 키는 ‘Unable to scan?’(스캔할 수 없나요?) 아래에 있습니다. 그런 다음 확장 프로그램의 코드를 ‘Authentication code’(인증 코드)에 입력하고 ‘Confirm’(확인)을 클릭합니다.
Supabase 공식 안내

Authenticator에 Supabase 추가하기

  1. Chrome Web Store에서 2FA Authenticator – OTP 인증기를 설치하고 툴바에 고정해 두면 클릭 한 번으로 아이콘을 열 수 있습니다.
  2. QR 코드가 표시된 Supabase 페이지는 그대로 열어 둡니다. Authenticator 아이콘을 클릭한 다음 ‘계정 추가’ → ‘QR 코드’ → ‘화면에서 QR 스캔’을 선택합니다.
  3. 목록에 계정이 추가되고 30초마다 바뀌는 6자리 코드가 표시됩니다. 원하면 이름을 바꿔도 됩니다. 이름은 나만 보는 표시입니다.
  4. Supabase 페이지로 돌아가 현재 코드를 확인 입력란에 입력합니다. 곧 만료될 것 같으면 다음 코드를 기다리세요.
  5. Supabase에서 2단계 인증이 켜졌다고 알려 줍니다. 이제부터 로그인할 때마다 코드를 요구하니, 확장 프로그램 아이콘을 클릭해 복사하세요.

QR 코드가 없거나 스캔되지 않나요? Supabase 설정 화면에서 키를 직접 입력하는 옵션을 찾아 키를 복사한 다음, 확장 프로그램에서 ‘계정 추가’ → ‘수동 입력’ → ‘비밀 키’로 추가하세요.

Chrome에 2FA Authenticator – OTP 인증기 설치 — 무료

Supabase에는 복구 코드가 없습니다 — 두 번째 앱을 추가하세요

Supabase 문서에 따르면 복구 코드를 제공하지 않으며, 2단계 인증 수단을 모두 잃은 계정의 접근은 복구해 줄 수 없습니다. Supabase가 권하는 것은 백업 수단입니다. 앱이 하나만 등록되어 있을 때 나타나는 ‘Add another app’(다른 앱 추가)을 클릭하고, 휴대폰처럼 다른 기기의 인증 앱으로 두 번째 QR 코드를 스캔하세요. Supabase는 비밀 키를 주 인증 앱과 떨어진 안전한 곳에 보관하라고도 권합니다. 확장 프로그램의 자동 백업도 켜 두세요.

코드가 인식되지 않나요?

가장 흔한 원인은 QR 코드가 바뀐 것입니다. 웹사이트는 설정 페이지를 새로 고치거나 다시 열 때마다 새 QR 코드를 만들기 때문에, 먼저 추가한 계정은 더 이상 맞지 않습니다. 설정을 처음부터 다시 시작하고, 지금 화면에 있는 QR 코드를 추가한 뒤 그 코드를 바로 입력하세요. 같은 웹사이트 항목이 두 개인가요? 가장 최근 것을 쓰세요. 다른 원인: 코드가 거부되는 이유.

키를 직접 입력하셨나요? 키를 TOTP 코드 생성기에 붙여 넣고 나온 코드를 확장 프로그램의 코드와 비교합니다. 다르다면 키가 잘못 복사된 것이니 계정을 다시 추가하세요.

자주 묻는 질문

Supabase에서 쓸 수 있는 인증 앱은 무엇인가요?
표준 시간 기반 코드를 만드는 앱이라면 무엇이든 됩니다. Supabase는 1Password, Authy, Google Authenticator, Apple 키체인을 예로 듭니다. Authenticator 확장 프로그램도 같은 방식으로 작동하며 대시보드의 QR 코드를 바로 읽으므로 휴대폰이 필요 없습니다.
인증 앱을 사용할 수 없게 되면 어떻게 하나요?
두 번째 인증 앱을 등록해 두었다면 그것으로 로그인해 잃어버린 앱을 교체하세요. 그렇지 않다면 돌아갈 방법이 없습니다. Supabase는 보안상의 이유로 2단계 인증 수단을 모두 잃은 계정의 접근은 복구하지 않는다고 말합니다. 두 번째 앱이 중요한 이유가 바로 이것입니다.
조직의 프로젝트를 열 수 없는 이유는 무엇인가요?
조직이 MFA를 요구하기 때문입니다. 조직 소유자가 ‘Require MFA to access organization’(조직 접근 시 MFA 요구)을 켜면, MFA가 없는 멤버는 즉시 조직의 프로젝트에 접근할 수 없게 됩니다. 멤버 자격은 그대로이니, 위 설명대로 MFA를 켜면 권한이 돌아옵니다.
이렇게 하면 내 앱 사용자에게도 MFA가 켜지나요?
아니요. 이 단계는 대시보드에 로그인하는 내 Supabase 계정을 보호합니다. Supabase로 만든 앱에 로그인하는 사람들을 위한 MFA는 Supabase Auth의 기능이며, 프로젝트에서 따로 설정합니다.

로그인 화면에서 클릭 한 번으로 코드를

Authenticator는 2FA 코드를 브라우저 안, 내 기기에만 보관합니다. 무료로 사용할 수 있고 오픈 소스이며, 계정도 휴대폰도 필요 없습니다. 로컬 백업과 선택형 비밀번호 보호가 기본으로 들어 있습니다.

Chrome에 2FA Authenticator – OTP 인증기 설치 — 무료