Server Actions 를 사용하여 Next.js 애플리케이션에 Logto 인증 추가하기

Server Actions은 전통적인 REST API 없이 강력한 웹 애플리케이션을 생성할 수 있는 새로운 접근 방법을 제공합니다. 우리는 이전에 우리의 기사에서 이에 대해 논의했습니다.

오늘은 실험적인 기능임에도 불구하고 우리의 Next.js SDK에서 Server Actions에 대한 공식 지원을 발표하게 되어 기쁩니다.

간단한 개요를 보려면 이 샘플을 확인하고 이 가이드에서 Server Actions 를 사용하여 Logto 를 통합하는 방법을 자세히 보세요.

사전 준비 사항#

시작하려면 다음 사항을 확인하세요:

• 실행 중인 Logto 인스턴스 또는 Logto Cloud 계정에 대한 액세스.
• Server Actions 기능이 활성화된 Next.js 프로젝트.

Logto 구성#

Logto를 자체 호스팅하는 경우, Logto 인스턴스를 설정하려면 Logto의 "시작하기" 문서를 참조하세요.

Logto Cloud를 사용하는 경우 URL https://cloud.logto.io/를 입력하여 Logto 콘솔을 엽니다. 아니면 자체 호스팅을 위해 설정한 엔드포인트를 사용하세요.

다음으로 "애플리케이션" 탭으로 이동하여 "애플리케이션 생성"을 클릭하세요.

나타나는 모달에서 "Next.js (앱 라우터)"를 선택하고 "Next.js App"과 같은 애플리케이션 이름을 입력하세요. 그런 다음 "애플리케이션 생성"을 클릭합니다.

Logto 에서 튜토리얼 페이지로 이동됩니다. 진행하려면 "마무리 및 완료"를 클릭하여 애플리케이션 세부 사항 페이지로 이동합니다.

"리디렉션 URI" 섹션에 다음 값을 입력하세요:

예를 들어, Next.js 를 **http://localhost:3000**에 호스팅하는 경우 값은 다음과 같아야 합니다:

하단의 "변경 저장" 버튼을 클릭합니다. 성공하면 이 페이지를 열어 두세요. Next.js 구성에 유용하게 사용할 수 있습니다.

Next.js 애플리케이션 설정#

최신 버전의 Next.js가 있는 프로젝트를 준비하세요. 아직 없다면, 공식 설치 가이드를 따라 하나를 생성할 수 있습니다.

이 가이드를 작성할 시점에서는 실험적 기능이며, next.config.js에서 활성화가 필요합니다.

Logto 라이브러리 정의#

먼저 @logto/next 모듈을 다음과 같이 npm을 사용하여 설치합니다:

yarn 또는 pnpm을 사용할 수도 있습니다.

그런 다음 "서버 액션"으로 몇 가지 함수를 생성해 보겠습니다. 새로운 파일 libraries/logto.ts를 생성하세요:

이 파일에서는 인증을 위한 네 가지 기능을 내보냅니다. 첫 번째 줄의 "use server"는 파일의 코드가 서버 측에서만 실행될 수 있음을 나타냅니다. 우리는 "next/headers"를 사용하여 쿠키 기반 세션을 관리합니다.

• "use server"에 대한 참조: https://react.dev/reference/react/use-server
• 쿠키 관리를 위한 "next/headers" 사용 참조: https://nextjs.org/docs/api-reference/next/headers

위의 우리가 내보낸 함수들은 클라이언트 측의 React 컴포넌트에서 직접 호출될 수 있습니다. 이것이 Server Actions 를 사용하는 주요 장점입니다. 다음 장으로 넘어가 이 함수들을 사용하는 방법을 보십시오.

로그인 및 로그아웃 버튼 구현하기#

인증 함수가 준비되었으므로 페이지를 구성해 보겠습니다. 로그인 및 로그아웃 작업을 시작하기 위해 두 개의 클라이언트 컴포넌트를 생성하겠습니다.

로그인#

/app/sign-in.tsx:

여기서 우리는 이전 장에서 정의한 signIn 함수를 가져옵니다. 코드는 서버 측에서 실행되지만, 이 함수는 사용자가 로그인 버튼을 클릭할 때 <button> 컴포넌트에 의해 직접 호출될 수 있습니다. 이를 통해 로그인 프로세스를 처리하기 위한 REST API를 작성할 필요가 없습니다. 사실, Next.js 는 "POST" 요청 디스패처 세부 정보들을 처리해 줍니다. redirectUrl을 받으면, 우리는 router.push를 호출하여 Logto 로그인 페이지로 리디렉션할 수 있습니다.

로그아웃#

/app/sign-out.tsx:

로그아웃 프로세스는 로그인 프로세스와 유사합니다.

콜백 페이지 준비#

표준 OIDC 인증 제공자로서, Logto 는 인증 후 사용자들을 콜백 URL로 리디렉션합니다. 따라서, 우리는 로그인 결과를 처리할 콜백 페이지를 준비해야 합니다.

/app/callback/page.tsx

여기서 우리는 useEffect를 이용한 클라이언트 컴포넌트를 사용하여 더 나은 사용자 경험을 위해 "로딩 중" 페이지를 쉽게 표시할 수 있습니다.

사용자 컨텍스트와 보안 페이지 표시#

이제 Logto SDK의 유용성을 나타내는 최소한의 홈 페이지를 만들어 보겠습니다. 필요시, isAuthenticated 값을 확인하여 알 수 없는 사용자로부터 리소스를 보호하고 로그인 페이지로 리디렉션하거나 오류 메시지를 표시하세요.

app/page.tsx

보시다시피, 이것은 서버 컴포넌트로, useEffect와 복잡한 상태 변경 관리를 필요로 하지 않습니다.

결론#

서버 액션은 전통적인 REST API에 의존하는 Next.js 애플리케이션과 비교하여 인증 구현을 간소화하고 직관적인 방법을 제공합니다.

전체 코드 샘플은 이 저장소에서 찾을 수 있습니다: https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample

Logto Cloud를 사용해 보고 이를 직접 경험해 보세요!