[Service] Auth0

Auth0

들어가며

• 인증(Authentication) 및 사용자 관리 기능을 쉽게 도와주는 Auth0 서비스에 대해 정리해본다.
• 이 서비스를 이용하면, 소셜 로그인 등 인증을 위한 기능들을 직접 코드로 구현하여 만들어주지 않아도 된다.

 

Auth0

개념

• 사용자가 애플리케이션의 인증 및 권한 관리를 간단하고 안전하게 구현할 수 있도록 지원하는 인증 및 권한 관리 플랫폼
• 개발자는 Auth0를 이용하여 복잡한 인증 시스템을 직접 개발하지 않아도 되고, 다양한 인증 방식을 쉽게 통합할 수 있다.

 

주요 특징

• 다양한 인증 방식 지원
  • 이메일/비밀번호
  • 소셜 로그인 (Google, Facebook, GitHub, Twitter 등)
  • 다중 인증(Multi Factor Authentication)
  • SSO(Single Sign-On)
  • Passwordless 로그인 (Magic Link, OTP 등)
• OAuth 2.0, OpenID Connect와 같은 표준 프로토콜을 지원하여 보안과 확장성을 제공한다.
• 웹 애플리케이션, 모바일 애플리케이션, API 서버 등을 포함한 다양한 플랫폼과 기술 스택에서 쉽게 통합 가능하다.

Auth0에서 지원하는 플랫폼

• 사용자 등록, 로그인 기록, 사용자 데이터 관리 및 역할/권한 부여 등을 위한 대시보드(Dashboard)를 제공한다.
  
  • 커스텀 사용자 데이터베이스 통합 가능
• MFA 및 브루트포스 공격 방지 등을 위한 보안 기능이 내장되어 있다.
• GDPR, CCPA, SOC2 등의 데이터 보호 및 보안 규정을 준수한다.
• 로그인 UI, 이메일 템플릿, 워크플로우 등 다양한 요소를 브랜드에 맞게 커스터마이징 할 수 있다.
• Auth0 Rules와 Actions를 사용해 맞춤 로직을 추가할 수 있다.

ⓒ Auth0 Docs

주요 구성 요소

구성 요소	설명
Application	애플리케이션을 Auth0에 등록하여 인증 기능 통합
Tenant	- 특정 도메인과 연결된 Auth0 계정 - 하나의 테넌트는 여러 개의 애플리케이션을 포함할 수 있다.
Rules & Actions	- 인증 프로세스 중, 특정 시점에 실행되는 커스텀 코드 - 예) 사용자의 메타 데이터 업데이트
Auth0 Management API	사용자 및 애플리케이션 데이터를 프로그래밍 방식으로 관리할 수 있는 API

 

장단점

장점

• 개발자가 인증 및 권한 관리 시스템을 직접 구축할 필요 없이 빠르게 통합할 수 있다.
• 강력한 보안 기능과 표준 프로토콜을 지원한다.
• 다양한 기술 스택과의 통합이 쉽다.

 

단점

• 무료 플랜은 제한적이며, 고급 기능 사용 시 비용이 발생한다.
• 대규모 트래픽이나 고도로 커스터마이징된 요구 사항이 있는 경우 복잡성이 증가할 수 있다.

Auth0 요금제

 

사용하기

• Auth0 서비스를 구성하고 리액트(React.js) 프로젝트에 적용하는 방법을 정리해본다.
• 다른 플랫폼에서 적용하고자 할 경우, 아래의 글을 참고한다.

Auth0

 

① Auth0 회원 가입하기

• Auth0 사이트에서 회원 가입을 한다.

Auth0: Secure access for everyone. But not just anyone.

 

② 애플리케이션 생성하기

리액트에 적용하고자 할 경우 SPA를 선택해준다.

 

③ 도메인(Domain), 클라이언트 ID(Client ID) 키 값 확인하기

• 생성한 애플리케이션 페이지의 [Settings] 탭에서 도메인(Domain)과 클라이언트 ID(Client ID) 키 값을 확인한다.

도메인과 클라이언트 ID 키 값을 확인한다.

• 그리고 해당 페이지의 밑의 Allowed Callback URLs, Allowed Logout URLs, Allowed Web Origins에 로컬 서버(localhost)의 주소를 넣어준다. (구분 : 쉼표(,))
  • http://localhost:5173 : VITE로 프로젝트를 생성했을 경우의 로컬 서버 포트 주소
  • http://localhost:3000 : React-Create-App으로 프로젝트를 생성했을 경우의 로컬 서버 포트 주소

 

• 그리고 맨 하단의 [Save Changes] 버튼을 클릭하여 저장 해준다.

 

④ 데이터베이스 생성하기

• 좌측 사이드바의 [Authentication] 탭에 있는 [Database]를 클릭한다.
• 그리고 우측의 [Create DB Connection] 버튼을 클릭하여 사용자 정보를 저장할 DB를 생성해준다.

 

• DB 이름(Name) 적어주고, Username 항목을 선택해준다.
• 그리고 하단의 [Create] 버튼을 클릭하여 DB를 생성해준다.

 

• 생성한 DB 페이지의 [Application] 탭에서 ②에서 생성한 애플리케이션 항목을 찾아서 활성화 시켜준다.

 

⑤ 소셜 로그인 연결 설정하기

• 좌측 사이드바의 [Authentication] 탭에 있는 [Social]를 클릭한다.
• 그리고 우측의 [Create Connection] 버튼을 클릭하여 원하는 소셜 로그인 방식을 추가해준다.

 

• 해당 소셜 로그인 항목 페이지의 [Application] 탭에서 ②에서 생성한 애플리케이션 항목을 찾아서 활성화 시켜준다.

 

 

⑥ 패키지 설치하기

• 이제 개발하고자 하는 프로젝트에서 아래 명령을 실행하여 패키지를 설치해준다.

			
			
			
		
$ npm install auth0/auth0-react    # yarn add auth0/auth0-react

 

⑦ 환경 변수 파일(.env)에 도메인, 클라이언트 ID 추가하기

• ③에서 확인했던 도메인과 클라이언트 ID를 프로젝트의 환경 변수 파일(.env)에 추가해준다.

/.env

			
			
			
		
VITE_DOMAIN=your_domain
VITE_CLIENT_ID=your_client_id

 

⑧ 최상위 컴포넌트(index.js 또는 main.jsx)에 프로바이더 추가하기

• 최상위 컴포넌트에 Auth0 프로바이더(Provider)를 추가해준다.
  • Create-React-App으로 프로젝트를 생성한 경우, /src/index.js 파일에 추가해준다.
  • VITE로 프로젝트를 생성한 경우, /src/main.jsx 파일에 추가해준다.

 

/src/index.js (또는 /src/main.jsx)

			
			
			
		
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
 
import { Auth0Provider } from '@auth0/auth0-react';
 
import './index.css';
import App from './App.jsx';
 
const domain = import.meta.env.VITE_DOMAIN;
const clientId = import.meta.env.VITE_CLIENT_ID;
 
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      redirectUri={window.location.origin}
    >
      <App />
    </Auth0Provider>
  </StrictMode>
);

 

환경 변수 파일(.env)에서 환경 변수를 가져오는 방법은 다음 글을 참고한다.
🌐https://dev-astra.tistory.com/600

 

⑨ 로그인 기능 구현하기

• 로그인과 로그아웃 기능을 구현하려면, 다음과 같이 코드를 작성한다.

./src/components/Navbar.jsx

			
			
			
		
import styled from 'styled-components';
import { useAuth0 } from '@auth0/auth0-react';
 
const Navbar = () => {
  const { isAuthenticated, loginWithRedirect, logout, user, isLoading } = useAuth0();
 
  return (
    <Wrapper>
      <button onClick={loginWithRedirect}>Login</button>
      <button
        onClick={() => {
          logout({
            returnTo: window.location.origin,
          });
        }}
      >
        Logout
      </button>
    </Wrapper>
  );
};

 

로그인 화면

 

공식 문서

Auth0

 

참고 사이트

Auth0: Secure access for everyone. But not just anyone.

Auth0