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 설치

npm install @logto/react
# 또는
yarn add @logto/react

LogtoProvider 설정

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

// src/index.tsx 또는 src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { LogtoProvider, LogtoConfig } from '@logto/react';
import App from './App';

const config: LogtoConfig = {
  endpoint: 'https://your-tenant-id.logto.app',
  appId: 'your-app-id',
};

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <LogtoProvider config={config}>
      <App />
    </LogtoProvider>
  </React.StrictMode>
);

---

2.3 로그인 / 로그아웃 구현

useLogto 훅 사용

// src/components/AuthButton.tsx
import { useLogto } from '@logto/react';

export function AuthButton() {
  const { signIn, signOut, isAuthenticated, isLoading } = useLogto();

  if (isLoading) return <div>로딩 중...</div>;

  if (isAuthenticated) {
    return (
      <button onClick={() => signOut('http://localhost:3000/')}>
        로그아웃
      </button>
    );
  }

  return (
    <button onClick={() => signIn('http://localhost:3000/callback')}>
      로그인
    </button>
  );
}

콜백 페이지 처리

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

// src/pages/Callback.tsx
import { useEffect } from 'react';
import { useLogto } from '@logto/react';
import { useNavigate } from 'react-router-dom';

export function Callback() {
  const { handleSignInCallback } = useLogto();
  const navigate = useNavigate();

  useEffect(() => {
    handleSignInCallback(window.location.href)
      .then(() => navigate('/'))
      .catch(console.error);
  }, []);

  return <div>로그인 처리 중...</div>;
}

라우터 설정 (React Router v6)

// src/App.tsx
import { Routes, Route } from 'react-router-dom';
import { Callback } from './pages/Callback';
import { Home } from './pages/Home';

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/callback" element={<Callback />} />
    </Routes>
  );
}

---

2.4 사용자 정보 가져오기

기본 클레임 조회

// src/pages/Profile.tsx
import { useLogto } from '@logto/react';
import { useEffect, useState } from 'react';

export function Profile() {
  const { fetchUserInfo, isAuthenticated } = useLogto();
  const [userInfo, setUserInfo] = useState(null);

  useEffect(() => {
    if (isAuthenticated) {
      fetchUserInfo().then(setUserInfo);
    }
  }, [isAuthenticated]);

  if (!userInfo) return null;

  return (
    <div>
      <h2>프로필</h2>
      <p>이름: {userInfo.name}</p>
      <p>이메일: {userInfo.email}</p>
      <img src={userInfo.picture} alt="프로필 사진" />
    </div>
  );
}

접근 토큰(Access Token) 획득

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

import { useLogto } from '@logto/react';

function useApiClient() {
  const { getAccessToken } = useLogto();

  const fetchData = async (url: string) => {
    const token = await getAccessToken('https://api.yourapp.com');
    
    const response = await fetch(url, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
    
    return response.json();
  };

  return { fetchData };
}

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

---

2.5 인증 보호 라우트

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

// src/components/ProtectedRoute.tsx
import { useLogto } from '@logto/react';
import { Navigate } from 'react-router-dom';

interface Props {
  children: React.ReactNode;
}

export function ProtectedRoute({ children }: Props) {
  const { isAuthenticated, isLoading } = useLogto();

  if (isLoading) return <div>로딩 중...</div>;
  if (!isAuthenticated) return <Navigate to="/login" replace />;

  return <>{children}</>;
}

---

2.6 Next.js 연동 (참고)

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

npm install @logto/next

// app/logto.ts
import LogtoClient from '@logto/next';

export const logtoClient = new LogtoClient({
  appId: process.env.LOGTO_APP_ID!,
  appSecret: process.env.LOGTO_APP_SECRET!,
  endpoint: process.env.LOGTO_ENDPOINT!,
  baseUrl: process.env.APP_BASE_URL!,
  cookieSecret: process.env.LOGTO_COOKIE_SECRET!,
  cookieSecure: process.env.NODE_ENV === 'production',
});

// app/api/logto/[action]/route.ts
import { logtoClient } from '@/app/logto';

export const GET = logtoClient.handleAuthRoutes();

---

다음 단계

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

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

---

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