JWT + WPGraphQL 연동 구조
좋습니다 👍. 앞서 JWT 인증을 통한 LocalWP + Next.js 보안 구조까지 확장했으니, 다음 단계는 JWT 인증을 WPGraphQL과 결합해 Headless WordPress를 더욱 안전하게 운영하는 구조를 설계하는 것입니다.
🔐 JWT + WPGraphQL 연동 구조
1. WordPress (LocalWP) 설정
- WPGraphQL 플러그인 설치 →
http://local.test/graphql엔드포인트 제공. - JWT Authentication 플러그인 설치 → 토큰 발급 및 검증.
- wp-config.php 설정
define('JWT_AUTH_SECRET_KEY', 'your-secret-key-here'); define('JWT_AUTH_CORS_ENABLE', true);
2. Next.js 프로젝트 구조 확장
frontend-nextjs/
├── graphql/
│ ├── queries/
│ │ ├── getPosts.js
│ │ └── getPostBySlug.js
│ └── mutations/
│ └── createPost.js # JWT 인증 필요
│
├── lib/
│ ├── api.js # GraphQL 요청 함수
│ └── auth.js # JWT 토큰 관리
│
├── pages/
│ ├── index.js # 공개 글 목록
│ ├── dashboard.js # 인증 필요한 페이지
│ └── api/
│ └── graphql.js # GraphQL 요청 프록시 (JWT 포함)
3. GraphQL 요청에 JWT 적용
// lib/api.js
import { request } from 'graphql-request';
import { getToken } from './auth';
const endpoint = process.env.WP_GRAPHQL_URL;
export async function gqlRequest(query, variables = {}) {
const token = getToken();
const headers = token ? { Authorization: `Bearer ${token}` } : {};
return request(endpoint, query, variables, headers);
}
4. 인증 필요한 GraphQL Mutation 예시
// graphql/mutations/createPost.js
import { gql } from 'graphql-request';
export const CREATE_POST = gql`
mutation CreatePost($title: String!, $content: String!) {
createPost(input: { title: $title, content: $content }) {
post {
id
title
content
}
}
}
`;
// pages/dashboard.js
import { gqlRequest } from '../lib/api';
import { CREATE_POST } from '../graphql/mutations/createPost';
export default function Dashboard() {
async function handleCreate() {
const newPost = await gqlRequest(CREATE_POST, {
title: "JWT 인증 테스트",
content: "이 글은 인증된 사용자만 작성할 수 있습니다."
});
console.log(newPost);
}
return (
<div>
<h1>보호된 대시보드</h1>
<button onClick={handleCreate}>새 글 작성</button>
</div>
);
}
5. 보안 구조 요약
- LocalWP (WordPress) → WPGraphQL + JWT 플러그인 설치.
- JWT 발급 → 로그인 시 토큰 반환.
- Next.js API → GraphQL 요청 시 JWT 토큰을 헤더에 포함.
- 보호된 Mutation → 인증된 사용자만 글 작성/수정 가능.
👉 다음 단계로, 제가 JWT 인증을 적용한 Next.js + WPGraphQL 전체 아키텍처 다이어그램을 그려드릴 수 있습니다. 원하시면 시각적으로 구조를 정리해드릴게요.
