Clein's Portfolio

// /api/oauth/callback/url/route.ts 예시 코드
 
import { cookies } from 'next/headers'
import { NextResponse, type NextRequest } from 'next/server'
 
export async function GET(request: NextRequest) {
  const queryParams = request.nextUrl.searchParams
  const code = queryParams.get('code')
 
  const response = await fetch('벡앤드_서버_주소/로그인_API_경로', {
    method: 'POST',
    body: JSON.stringify({ provider: 'google', code }),
  })
 
  if (!response.ok) {
    throw new Error('로그인 실패')
  }
 
  return NextResponse.redirect('프론트_서버_주소')
}

// 응답받은 쿠키 헤더 파싱 후 새로운 쿠키를 설정하는 로직
 
const responseCookies = response.headers.get('Set-Cookie')
const parsedCookies = responseCookies
  .split(';')
  .map((s) => s.trim().split('='))
  .reduce((obj: { [key: string]: string }, [key, value]) => {
    return Object.assign(obj, { [key]: value ?? true })
  }, {})
 
cookies().set(SESSION_ID, parsedCookies[SESSION_ID], {
  path: '/',
  httpOnly: true,
  sameSite: 'strict',
  secure: true,
})

try {
  // 로그인 로직
 
  return NextResponse.redirect('프론트_서버_주소/?로그인-성공')
} catch {
  cookies().delete(SESSION_ID) // 에러 발생 시 클라이언트에 남아있는 쿠키 삭제 처리
 
  return NextResponse.redirect('프론트_서버_주소/?로그인-실패')
}

'use server'
 
import { cookies } from 'next/headers'
 
export default async function getUserInfo() {
  const response = await fetch('백엔드_서버_주소/인증이_필요한_API_경로', {
    headers: {
      'Content-Type': 'application/json',
      Cookie: `${SESSION_ID}=${cookies().get(SESSION_ID)?.value ?? ''}`,
    },
    credentials: 'include',
    cache: 'no-store',
    next: { revalidate: 0 },
  })
 
  if (!response.ok) {
    throw new Error('에러 발생')
  }
 
  const { data } = await response.json()
 
  return { data, response }
}

import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
 
export default function SignInPage() {
  const isLogin = cookies().has(SESSION_ID)
 
  if (isLogin) {
    return redirect('프론트_서버_주소/?이미-로그인-되어있음')
  }
 
  return <SignIn />
}

// /app/layout.tsx 예시 코드
 
'use server'
 
export default async function RootLayout({ children }: React.PropsWithChildren) {
  const authProps = await useSession()
 
  return <AuthProvider {...authProps}>{children}</AuthProvider>
}

// useSession 예시 코드
 
'use server'
 
import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
 
export default async function useSession(): Promise<AuthState> {
  const cookieStore = cookies()
  const sessionId = cookieStore.get(SESSION_ID)?.value
  const isLogin = !!sessionId
 
  if (!isLogin) {
    return { isLogin: false }
  }
 
  try {
    // 유저 정보 조회 로직
 
    return { isLogin: true }
  } catch {
    return redirect('프론트_서버_주소/?로그인-실패')
  }
}

// AuthProvider 예시 코드
 
'use client'
 
import { createContext, useContext } from 'react'
 
const AuthContext = createContext<AuthState>({
  isLogin: false,
})
 
export function useAuth() {
  return useContext(AuthContext)
}
 
export function AuthProvider({ children, ...authProps }: React.PropsWithChildren<AuthState>) {
  return <AuthContext.Provider value={authProps}>{children}</AuthContext.Provider>
}

// WithAuth.tsx 예시 코드
 
'use client'
 
import { useAuth } from '../model'
 
export default function WithAuth({ children }: React.PropsWithChildren) {
  const { isLogin } = useAuth()
 
  if (isLogin) {
    return children
  }
 
  return <NeedLogin />
}

// WithAuth.tsx 사용 예시 코드 (/my-page/page.tsx)
 
'use server'
 
export default function MyPage() {
  return (
    <WithAuth>
      <MyPageContent />
    </WithAuth>
  )
}