Logto 첫 번째 앱 연동

Logto 테넌트에 애플리케이션을 등록하고, SDK를 설치하여 로그인 기능을 구현하는 방법을 안내합니다. React 예시를 기준으로 설명하며, 다른 프레임워크에도 동일한 흐름이 적용됩니다.

2.1 Admin Console에서 앱 등록

Step 1: 애플리케이션 유형 선택

Admin Console → Applications → Create application을 클릭합니다.

앱 유형	설명	예시
Single Page App (SPA)	브라우저에서 실행되는 프론트엔드 앱	React, Vue, Angular
Traditional Web	서버에서 렌더링되는 웹 앱	Next.js SSR, Django, Rails
Native App	모바일/데스크탑 앱	iOS, Android, Electron
Machine to Machine	서버 간 통신	API 서버, cron job

React 앱의 경우 Single Page App을 선택합니다.

Step 2: 앱 기본 정보 입력

App name: My React App

Create application 버튼을 클릭하면 앱이 생성됩니다.

Step 3: Redirect URI 설정

생성된 앱의 설정 페이지에서 Redirect URIs를 등록합니다.

Redirect URI:          http://localhost:3000/callback
Post sign-out URI:     http://localhost:3000/

운영 환경에서는 https://yourdomain.com/callback 형태로 변경하십시오.

Step 4: 앱 인증 정보 확인

설정 페이지 상단에서 다음 값을 확인하고 메모하십시오.

App ID:     your-app-id
App Secret: your-app-secret (Traditional Web, M2M만 해당)
Endpoint:   https://your-tenant-id.logto.app

2.2 SDK 설치 및 초기화

React SDK 설치

1npm install @logto/react2# 또는3yarn add @logto/react

LogtoProvider 설정

앱의 최상위 컴포넌트에 LogtoProvider를 감쌉니다.

1// src/index.tsx 또는 src/main.tsx2import React from 'react';3import ReactDOM from 'react-dom/client';4import { LogtoProvider, LogtoConfig } from '@logto/react';5import App from './App';6 7const config: LogtoConfig = {8  endpoint: 'https://your-tenant-id.logto.app',9  appId: 'your-app-id',10};11 12ReactDOM.createRoot(document.getElementById('root')!).render(13  <React.StrictMode>14    <LogtoProvider config={config}>15      <App />16    </LogtoProvider>17  </React.StrictMode>18);

2.3 로그인 / 로그아웃 구현

useLogto 훅 사용

1// src/components/AuthButton.tsx2import { useLogto } from '@logto/react';3 4export function AuthButton() {5  const { signIn, signOut, isAuthenticated, isLoading } = useLogto();6 7  if (isLoading) return <div>로딩 중...</div>;8 9  if (isAuthenticated) {10    return (11      <button onClick={() => signOut('http://localhost:3000/')}>12        로그아웃13      </button>14    );15  }16 17  return (18    <button onClick={() => signIn('http://localhost:3000/callback')}>19      로그인20    </button>21  );22}

콜백 페이지 처리

로그인 후 Redirect URI로 돌아올 때 인증 코드를 처리합니다.

1// src/pages/Callback.tsx2import { useEffect } from 'react';3import { useLogto } from '@logto/react';4import { useNavigate } from 'react-router-dom';5 6export function Callback() {7  const { handleSignInCallback } = useLogto();8  const navigate = useNavigate();9 10  useEffect(() => {11    handleSignInCallback(window.location.href)12      .then(() => navigate('/'))13      .catch(console.error);14  }, []);15 16  return <div>로그인 처리 중...</div>;17}

라우터 설정 (React Router v6)

1// src/App.tsx2import { Routes, Route } from 'react-router-dom';3import { Callback } from './pages/Callback';4import { Home } from './pages/Home';5 6export default function App() {7  return (8    <Routes>9      <Route path="/" element={<Home />} />10      <Route path="/callback" element={<Callback />} />11    </Routes>12  );13}

2.4 사용자 정보 가져오기

기본 클레임 조회

1// src/pages/Profile.tsx2import { useLogto } from '@logto/react';3import { useEffect, useState } from 'react';4 5export function Profile() {6  const { fetchUserInfo, isAuthenticated } = useLogto();7  const [userInfo, setUserInfo] = useState(null);8 9  useEffect(() => {10    if (isAuthenticated) {11      fetchUserInfo().then(setUserInfo);12    }13  }, [isAuthenticated]);14 15  if (!userInfo) return null;16 17  return (18    <div>19      <h2>프로필</h2>20      <p>이름: {userInfo.name}</p>21      <p>이메일: {userInfo.email}</p>22      <img src={userInfo.picture} alt="프로필 사진" />23    </div>24  );25}

접근 토큰(Access Token) 획득

API 서버 호출 시 Bearer 토큰이 필요한 경우:

1import { useLogto } from '@logto/react';2 3function useApiClient() {4  const { getAccessToken } = useLogto();5 6  const fetchData = async (url: string) => {7    const token = await getAccessToken('https://api.yourapp.com');8    9    const response = await fetch(url, {10      headers: {11        Authorization: `Bearer ${token}`,12      },13    });14    15    return response.json();16  };17 18  return { fetchData };19}

Access Token을 사용하려면 먼저 Admin Console에서 API Resources를 등록해야 합니다. 자세한 내용은 Logto 인가(Authorization) 설정 페이지를 참고하십시오.

2.5 인증 보호 라우트

로그인한 사용자만 접근할 수 있는 페이지를 보호합니다.

1// src/components/ProtectedRoute.tsx2import { useLogto } from '@logto/react';3import { Navigate } from 'react-router-dom';4 5interface Props {6  children: React.ReactNode;7}8 9export function ProtectedRoute({ children }: Props) {10  const { isAuthenticated, isLoading } = useLogto();11 12  if (isLoading) return <div>로딩 중...</div>;13  if (!isAuthenticated) return <Navigate to="/login" replace />;14 15  return <>{children}</>;16}

2.6 Next.js 연동 (참고)

Next.js App Router 기반 프로젝트의 경우:

1npm install @logto/next

1// app/logto.ts2import LogtoClient from '@logto/next';3 4export const logtoClient = new LogtoClient({5  appId: process.env.LOGTO_APP_ID!,6  appSecret: process.env.LOGTO_APP_SECRET!,7  endpoint: process.env.LOGTO_ENDPOINT!,8  baseUrl: process.env.APP_BASE_URL!,9  cookieSecret: process.env.LOGTO_COOKIE_SECRET!,10  cookieSecure: process.env.NODE_ENV === 'production',11});

1// app/api/logto/[action]/route.ts2import { logtoClient } from '@/app/logto';3 4export const GET = logtoClient.handleAuthRoutes();

다음 단계

앱 연동이 완료되었습니다. 이메일, 소셜 로그인, MFA 등 다양한 인증 방식을 설정할 수 있습니다.

다음: Logto 인증 방식 설정 — 이메일, 소셜 로그인, OTP, MFA 설정

참고: Logto React SDK — https://docs.logto.io/sdk/react