[feat]: 회원가입 페이지 개선 및 폼 자동 포맷팅 기능 추가
주요 변경사항: - 회원가입 폼에 사업자등록번호 자동 포맷팅 (000-00-00000) - 핸드폰 번호 자동 포맷팅 (010-1111-1111 / 010-111-1111) - 약관 전체 동의 체크박스 추가 및 개별 약관 연동 - 모든 입력 필드에 autocomplete 속성 추가 (브라우저 자동완성 지원) - 회원가입 API 연동 및 백엔드 통신 구현 - LoginPage 폼 태그 추가 및 DOM 경고 수정 - LanguageSelect 언어 변경 시 전체 페이지 새로고침으로 변경 - 다국어 번역 키 추가 (ko, en, ja) 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
byeongcheolryu
@@ -11,22 +11,91 @@ import type { NextRequest } from 'next/server';
|
||||
*/
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
// Get token from HttpOnly cookie
|
||||
const token = request.cookies.get('user_token')?.value;
|
||||
// Get tokens from HttpOnly cookies
|
||||
const accessToken = request.cookies.get('access_token')?.value;
|
||||
const refreshToken = request.cookies.get('refresh_token')?.value;
|
||||
|
||||
if (!token) {
|
||||
// No tokens at all - not authenticated
|
||||
if (!accessToken && !refreshToken) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Not authenticated', authenticated: false },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
// Optional: Verify token with PHP backend
|
||||
// (현재는 토큰 존재 여부만 확인, 필요시 PHP API 호출 추가 가능)
|
||||
// Has access token - authenticated
|
||||
if (accessToken) {
|
||||
return NextResponse.json(
|
||||
{ authenticated: true },
|
||||
{ status: 200 }
|
||||
);
|
||||
}
|
||||
|
||||
// Only has refresh token - try to refresh
|
||||
if (refreshToken && !accessToken) {
|
||||
console.log('🔄 Access token missing, attempting refresh...');
|
||||
|
||||
// Attempt token refresh
|
||||
try {
|
||||
const refreshResponse = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/refresh`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'Authorization': `Bearer ${refreshToken}`,
|
||||
'X-API-KEY': process.env.NEXT_PUBLIC_API_KEY || '',
|
||||
},
|
||||
});
|
||||
|
||||
if (refreshResponse.ok) {
|
||||
const data = await refreshResponse.json();
|
||||
|
||||
// Set new tokens
|
||||
const accessTokenCookie = [
|
||||
`access_token=${data.access_token}`,
|
||||
'HttpOnly',
|
||||
'Secure',
|
||||
'SameSite=Strict',
|
||||
'Path=/',
|
||||
`Max-Age=${data.expires_in || 7200}`,
|
||||
].join('; ');
|
||||
|
||||
const refreshTokenCookie = [
|
||||
`refresh_token=${data.refresh_token}`,
|
||||
'HttpOnly',
|
||||
'Secure',
|
||||
'SameSite=Strict',
|
||||
'Path=/',
|
||||
'Max-Age=604800',
|
||||
].join('; ');
|
||||
|
||||
console.log('✅ Token auto-refreshed in auth check');
|
||||
|
||||
const response = NextResponse.json(
|
||||
{ authenticated: true, refreshed: true },
|
||||
{ status: 200 }
|
||||
);
|
||||
|
||||
response.headers.append('Set-Cookie', accessTokenCookie);
|
||||
response.headers.append('Set-Cookie', refreshTokenCookie);
|
||||
|
||||
return response;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Token refresh failed in auth check:', error);
|
||||
}
|
||||
|
||||
// Refresh failed - not authenticated
|
||||
return NextResponse.json(
|
||||
{ error: 'Token refresh failed', authenticated: false },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
// Fallback - not authenticated
|
||||
return NextResponse.json(
|
||||
{ authenticated: true },
|
||||
{ status: 200 }
|
||||
{ error: 'Not authenticated', authenticated: false },
|
||||
{ status: 401 }
|
||||
);
|
||||
|
||||
} catch (error) {
|
||||
|
||||
@@ -23,7 +23,7 @@ export async function POST(request: NextRequest) {
|
||||
}
|
||||
|
||||
// Call PHP backend API
|
||||
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/login`, {
|
||||
const backendResponse = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
@@ -33,18 +33,26 @@ export async function POST(request: NextRequest) {
|
||||
body: JSON.stringify({ user_id, user_pwd }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
if (!backendResponse.ok) {
|
||||
// Don't expose detailed backend error messages to client
|
||||
// Use generic error messages based on status code
|
||||
let errorMessage = 'Authentication failed';
|
||||
|
||||
if (backendResponse.status === 422) {
|
||||
errorMessage = 'Invalid credentials provided';
|
||||
} else if (backendResponse.status === 429) {
|
||||
errorMessage = 'Too many login attempts. Please try again later';
|
||||
} else if (backendResponse.status >= 500) {
|
||||
errorMessage = 'Service temporarily unavailable';
|
||||
}
|
||||
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: errorData.message || 'Login failed',
|
||||
status: response.status
|
||||
},
|
||||
{ status: response.status }
|
||||
{ error: errorMessage },
|
||||
{ status: backendResponse.status === 422 ? 401 : backendResponse.status }
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const data = await backendResponse.json();
|
||||
|
||||
// Prepare response with user data (no token exposed)
|
||||
const responseData = {
|
||||
@@ -52,26 +60,38 @@ export async function POST(request: NextRequest) {
|
||||
user: data.user,
|
||||
tenant: data.tenant,
|
||||
menus: data.menus,
|
||||
token_type: data.token_type,
|
||||
expires_in: data.expires_in,
|
||||
expires_at: data.expires_at,
|
||||
};
|
||||
|
||||
// Set HttpOnly cookie with token
|
||||
const cookieOptions = [
|
||||
`user_token=${data.user_token}`,
|
||||
// Set HttpOnly cookies for both access_token and refresh_token
|
||||
const accessTokenCookie = [
|
||||
`access_token=${data.access_token}`,
|
||||
'HttpOnly', // ✅ JavaScript cannot access
|
||||
'Secure', // ✅ HTTPS only (production)
|
||||
'SameSite=Strict', // ✅ CSRF protection
|
||||
'Path=/',
|
||||
'Max-Age=604800', // 7 days
|
||||
`Max-Age=${data.expires_in || 7200}`, // Use backend expiry (default 2 hours)
|
||||
].join('; ');
|
||||
|
||||
console.log('✅ Login successful - Token stored in HttpOnly cookie');
|
||||
const refreshTokenCookie = [
|
||||
`refresh_token=${data.refresh_token}`,
|
||||
'HttpOnly', // ✅ JavaScript cannot access
|
||||
'Secure', // ✅ HTTPS only (production)
|
||||
'SameSite=Strict', // ✅ CSRF protection
|
||||
'Path=/',
|
||||
'Max-Age=604800', // 7 days (longer for refresh token)
|
||||
].join('; ');
|
||||
|
||||
return NextResponse.json(responseData, {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Set-Cookie': cookieOptions,
|
||||
},
|
||||
});
|
||||
console.log('✅ Login successful - Access & Refresh tokens stored in HttpOnly cookies');
|
||||
|
||||
const response = NextResponse.json(responseData, { status: 200 });
|
||||
|
||||
response.headers.append('Set-Cookie', accessTokenCookie);
|
||||
response.headers.append('Set-Cookie', refreshTokenCookie);
|
||||
|
||||
return response;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Login proxy error:', error);
|
||||
|
||||
@@ -11,10 +11,10 @@ import type { NextRequest } from 'next/server';
|
||||
*/
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
// Get token from HttpOnly cookie
|
||||
const token = request.cookies.get('user_token')?.value;
|
||||
// Get access_token from HttpOnly cookie
|
||||
const accessToken = request.cookies.get('access_token')?.value;
|
||||
|
||||
if (token) {
|
||||
if (accessToken) {
|
||||
// Call PHP backend logout API
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/logout`, {
|
||||
@@ -22,7 +22,7 @@ export async function POST(request: NextRequest) {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Authorization': `Bearer ${accessToken}`,
|
||||
'X-API-KEY': process.env.NEXT_PUBLIC_API_KEY || '',
|
||||
},
|
||||
});
|
||||
@@ -32,9 +32,9 @@ export async function POST(request: NextRequest) {
|
||||
}
|
||||
}
|
||||
|
||||
// Clear HttpOnly cookie
|
||||
const cookieOptions = [
|
||||
'user_token=',
|
||||
// Clear both HttpOnly cookies
|
||||
const clearAccessToken = [
|
||||
'access_token=',
|
||||
'HttpOnly',
|
||||
'Secure',
|
||||
'SameSite=Strict',
|
||||
@@ -42,18 +42,27 @@ export async function POST(request: NextRequest) {
|
||||
'Max-Age=0', // Delete immediately
|
||||
].join('; ');
|
||||
|
||||
console.log('✅ Logout complete - HttpOnly cookie cleared');
|
||||
const clearRefreshToken = [
|
||||
'refresh_token=',
|
||||
'HttpOnly',
|
||||
'Secure',
|
||||
'SameSite=Strict',
|
||||
'Path=/',
|
||||
'Max-Age=0', // Delete immediately
|
||||
].join('; ');
|
||||
|
||||
return NextResponse.json(
|
||||
console.log('✅ Logout complete - Access & Refresh tokens cleared');
|
||||
|
||||
const response = NextResponse.json(
|
||||
{ message: 'Logged out successfully' },
|
||||
{
|
||||
status: 200,
|
||||
headers: {
|
||||
'Set-Cookie': cookieOptions,
|
||||
},
|
||||
}
|
||||
{ status: 200 }
|
||||
);
|
||||
|
||||
response.headers.append('Set-Cookie', clearAccessToken);
|
||||
response.headers.append('Set-Cookie', clearRefreshToken);
|
||||
|
||||
return response;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Logout proxy error:', error);
|
||||
return NextResponse.json(
|
||||
|
||||
99
src/app/api/auth/refresh/route.ts
Normal file
99
src/app/api/auth/refresh/route.ts
Normal file
@@ -0,0 +1,99 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import type { NextRequest } from 'next/server';
|
||||
|
||||
/**
|
||||
* Token Refresh Route Handler
|
||||
*
|
||||
* Purpose:
|
||||
* - Refresh expired access_token using refresh_token
|
||||
* - Update HttpOnly cookies with new tokens
|
||||
* - Maintain user session without re-login
|
||||
*/
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
// Get refresh_token from HttpOnly cookie
|
||||
const refreshToken = request.cookies.get('refresh_token')?.value;
|
||||
|
||||
if (!refreshToken) {
|
||||
return NextResponse.json(
|
||||
{ error: 'No refresh token available' },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
// Call PHP backend refresh API
|
||||
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/refresh`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'Authorization': `Bearer ${refreshToken}`,
|
||||
'X-API-KEY': process.env.NEXT_PUBLIC_API_KEY || '',
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
// Refresh token is invalid or expired
|
||||
console.warn('⚠️ Token refresh failed - user needs to re-login');
|
||||
|
||||
// Clear both tokens
|
||||
const clearAccessToken = 'access_token=; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=0';
|
||||
const clearRefreshToken = 'refresh_token=; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=0';
|
||||
|
||||
const failResponse = NextResponse.json(
|
||||
{ error: 'Token refresh failed', needsReauth: true },
|
||||
{ status: 401 }
|
||||
);
|
||||
|
||||
failResponse.headers.append('Set-Cookie', clearAccessToken);
|
||||
failResponse.headers.append('Set-Cookie', clearRefreshToken);
|
||||
|
||||
return failResponse;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Prepare response
|
||||
const responseData = {
|
||||
message: 'Token refreshed successfully',
|
||||
token_type: data.token_type,
|
||||
expires_in: data.expires_in,
|
||||
expires_at: data.expires_at,
|
||||
};
|
||||
|
||||
// Set new HttpOnly cookies
|
||||
const accessTokenCookie = [
|
||||
`access_token=${data.access_token}`,
|
||||
'HttpOnly',
|
||||
'Secure',
|
||||
'SameSite=Strict',
|
||||
'Path=/',
|
||||
`Max-Age=${data.expires_in || 7200}`,
|
||||
].join('; ');
|
||||
|
||||
const refreshTokenCookie = [
|
||||
`refresh_token=${data.refresh_token}`,
|
||||
'HttpOnly',
|
||||
'Secure',
|
||||
'SameSite=Strict',
|
||||
'Path=/',
|
||||
'Max-Age=604800', // 7 days
|
||||
].join('; ');
|
||||
|
||||
console.log('✅ Token refresh successful - New tokens stored');
|
||||
|
||||
const successResponse = NextResponse.json(responseData, { status: 200 });
|
||||
|
||||
successResponse.headers.append('Set-Cookie', accessTokenCookie);
|
||||
successResponse.headers.append('Set-Cookie', refreshTokenCookie);
|
||||
|
||||
return successResponse;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Token refresh error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Internal server error' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
91
src/app/api/auth/signup/route.ts
Normal file
91
src/app/api/auth/signup/route.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import type { NextRequest } from 'next/server';
|
||||
|
||||
/**
|
||||
* Signup Proxy Route Handler
|
||||
*
|
||||
* Purpose:
|
||||
* - Proxy signup requests to PHP backend
|
||||
* - Handle registration errors gracefully
|
||||
* - Return user-friendly error messages
|
||||
*/
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
|
||||
// Validate required fields
|
||||
const requiredFields = [
|
||||
'user_id',
|
||||
'name',
|
||||
'email',
|
||||
'phone',
|
||||
'password',
|
||||
'password_confirmation',
|
||||
'company_name',
|
||||
'business_num',
|
||||
'company_scale',
|
||||
'industry',
|
||||
];
|
||||
|
||||
for (const field of requiredFields) {
|
||||
if (!body[field]) {
|
||||
return NextResponse.json(
|
||||
{ error: `${field} is required` },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Call PHP backend API
|
||||
const backendResponse = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/register`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'X-API-KEY': process.env.NEXT_PUBLIC_API_KEY || '',
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (!backendResponse.ok) {
|
||||
// Handle backend errors with user-friendly messages
|
||||
let errorMessage = 'Registration failed';
|
||||
|
||||
if (backendResponse.status === 422) {
|
||||
// Validation error
|
||||
const data = await backendResponse.json();
|
||||
errorMessage = data.message || 'Invalid registration data';
|
||||
} else if (backendResponse.status === 409) {
|
||||
errorMessage = 'User ID or email already exists';
|
||||
} else if (backendResponse.status === 429) {
|
||||
errorMessage = 'Too many registration attempts. Please try again later';
|
||||
} else if (backendResponse.status >= 500) {
|
||||
errorMessage = 'Service temporarily unavailable';
|
||||
}
|
||||
|
||||
return NextResponse.json(
|
||||
{ error: errorMessage },
|
||||
{ status: backendResponse.status }
|
||||
);
|
||||
}
|
||||
|
||||
const data = await backendResponse.json();
|
||||
|
||||
console.log('✅ Signup successful');
|
||||
|
||||
return NextResponse.json(
|
||||
{
|
||||
message: data.message || 'Registration successful',
|
||||
user: data.user,
|
||||
},
|
||||
{ status: 201 }
|
||||
);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Signup proxy error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Internal server error' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user