Supabase - Auth / Auth architecture / Auth with Next.JS 공식문서 번역

프론트엔드/Supabase + Jotai

Supabase - Auth / Auth architecture / Auth with Next.JS 공식문서 번역

학습하는 청년 2025. 1. 17. 00:01

최종 수정 : 2025.1.16

공식문서를 번역한 내용입니다.

1. Auth

이용자의 인증과 승인을 위한 Supabase 기능

앱에서 인증과 권한 부여를 쉽게 구현하도록 만들어준다. 이를 위해, 유저를 생성하고 관리를 돕는 client SDKs와 API endpoints를 제공해준다.

비밀번호, magic link, OTP(one-time password), 소셜 로그인, 그리고 SSO(single sign-on)을 포함한 잘 알려진 인증 방법들을 사용할 수 있다.

# 인증과 승인

인증과 권한 부여는 Auth system의 핵심적인 부분이다.

인증(Authenication)은 사용자가 누구인지 확인하는 것을 의미한다.
권한 부여(Authorization)는 접근이 허락된 유저의 리소스를 확인하는 것을 의미한다.

Supabase Auth는 인증을 위해 JWTs(JSON Web Tokens)를 사용한다. Auth는 데이터베이스 기능과 통합되어, 인증을 위해 RLS(Row Level Security)을 쉽게 사용할 수 있다.

# Supabase 생태계

Supabase Auth는 독립형 제품으로 사용할 수 있지만, Supabase 에코시스템과 통합되도록 구축되었다.

Auth는 내부적으로 프로젝트의 Postgres 데이터베이스를 사용하여, 특별한 스키마에 유저 데이터와 다른 인증 정보를 저장한다. 트리커 및 외부 키 참조를 사용하여 이 데이터를 자신의 테이블에 연결할 수 있다.

Auth는 데이터베이스의 자동 생성된 REST API에 대한 접근 제어를 가능하게 만든다. Supabase SDKs를 사용하면 데이터 요청이 사용자의 인증 토큰과 함께 자동으로 전송된다. 인증 토큰은 RLS 정책과 함께 사용될 때 행 단위 수준에서 데이터베이스 접근 범위를 지정한다.

# 공급자

Supabase Auth는 타사 공급자를 사용하는 소셜 및 전화 인증을 포함하여 인기 있는 인증 방법과 함께 작동한다. 지원되는 타사 공급자 목록은 다음과 같다.

2. Auth architecture

Supabase의 아키텍처

# Supabase 인증에는 네 가지 주요 계층이 있다.

1. Client layer

이것은 client SDKs 중 하나일 수도 있고 선택한 HTTP 클라이언트를 사용하여 수동적으로 만든 HTTP 요청일 수도 있다.

2. Kong API gateway

이것은 모든 Supabase 제품 사이에 공유된다.

3. Auth service

이전의 GoTrue

4. Postgres database

이는 모든 Supabase 제품 사이에 공유된다.

# Client layer

이것은 앱에서 실행된다. 이는 아래를 포함하여 많은 곳에서 실행될 수 있다.

프론트엔드 브라우저 코드
백엔드 서버 코드
기본 애플리케이션

또한, 로그인하고 사용자를 관리하는 기능을 제공한다. 다음을 처리하는 데에 Supabase Client SDKs를 사용하는 것을 추천한다.

Supabase 인증 백엔드에 대한 HTTP 호출 구성 및 인증
앱의 저장 매체에서 인증 토큰의 지속성, 새로고침 및 제거
다른 Supabse 제품과의 통합

그러나 핵심적으로 이 계층은 HTTP 호출 생성을 관리하므로, 원하는 경우 자체 클라이언트 계층을 작성할 수 있다.

# 인증 서비스

Auth service는 Supabase에 의해 작성되고 관리되는 Auth API 서버이다. 이것은 Netlify에서 만든 GoTrue 프로젝트의 fork이다.

새로운 Supabase 프로젝트를 배포하면, 데이터베이스와 함께 이 서버의 인스턴스가 배포되고, 필요한 인증 스키마가 데이터베이스에 주입된다.

인증 서비스는 다음을 담당한다.`

JWT 검증, 발급, 새로고침
앱과 데이터베이스의 인증 정보 사이의 중개자 역할을 한다.
소셜 로그인 및 SSO를 위한 외부 공급자와 통신

Single Sign-On(SSO)은 1회 사용자 인증으로 다수의 애플리케이션 및 웹사이트에 대한 사용자 로그인을 허용하는 인증 솔루션을 말한다. 요즘은 브라우저에서 직접 애플리케이션에 접근하기 때문에 조직은 보안 및 사용자 경험 모두를 개선하는 액세스 관리 전략에 우선 순위를 둔다. SSO는 한 번 자격 증명이 검증된 사용자에게는 반복되는 로그인 없이 모든 암호 보호 리소스에 액세스하도록 하여 보안과 사용자 경험을 모두 충족할 수 있다.

# Postgres

Supabase Auth는 유저 테이블 및 기타 정보를 저장하기 위해 Postgres 데이터베이인증 스키마를 사용한다. 이 스키마는 보안을 위해 자동 생성된 API에 노출되지 않는다.

database triggers and foreign keys를 사용하여 인증 정보를 자신의 개체에 연결할 수 있다. 인증 데이터를 위해 생성한 모든 뷰(view)가 RLS를 가능하게 함으로써, 또는 권한 부여를 취소함으로써 적절하게 보호되는지 확인하라.

인증 데이터를 위해 생성한 모든 뷰(view)가 보호되는지 확인하라.
Postgres 버전 15부터는 보기들은 security_invoker로 생성된 경우 기본 테이블의 RLS 정책을 상속한다. 이전 버전이거나 security_invoker 없이 생성된 보기들에 대해서는 RLS의 권한을 우회할 수 있소유자의 권한을 상속한다.

3. Use Supabase Auth

1) with Next.js

Next.js 앱 라우터를 위한 Supabase 인증 설정 방법 알아보기

ⓛ 새로운 Supabase 프로젝트를 만들어라

database.new로 이동하여 새로운 Supabas 프로젝트를 만들어라. 새로운 데이터베이스는 사용자를 저장할 수 있는 테이블이 있다. SQL Editor에서 일부 SQL을 실행하면 이 테이블이 현재 비어 있는 것을 알 수 있다.

// SQL_EDITOR
select * from auth.users;

② Next.js app을 생성하라

create-next-app 명령어와 with-supabase 템플릿을 사용하여, 사전에 구성된 Next.js 앱을 만들어라.

// Terminal
npx create-next-app -e with-supabase

쿠키 기반 Auth : 이제 Auth-helpers가 비활성화되었다. @supabase/ssr을 사용하여 Next.js 앱에 Auth를 설정하라. Next.js Server-Side Auth 가이드를 참조하라.
타입스크립트
Tailwind CSS

GitHub repo 보기

③ Supabase 환경 변수를 선언하라

.env.local.example에서 .env.local로 이름을 바꾸고 프로젝트의 URL과 Anon Key를 입력하라.

// .env.local
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

④ 앱을 시작하라

배포 서버를 시작하고, 브라우저에서 http://localhost:3000로 이동하라. 그러면 app/page.tsx의 내용을 볼 수 있을 것이다.

새 사용자를 가입시키기 위해서는 http://localhost:3000/login으로 이동한 다음 지금 가입하기를 클릭하라.

===> Next.js 딥 다이브를 위한 Server-Side Auth 설정, 이곳에 Next.JS에 적용할 수 있는 내용이 상세히 있다.

2) with React

위 링크를 그대로 따라 하면 다음과 같은 페이지가 만들어진다.

저작자표시 비영리 변경금지