OAuth 소셜 로그인

1. 사용자가 "Google로 로그인" 버튼 클릭
2. 브라우저가 Google 인증 페이지로 리다이렉트
3. 사용자가 Google에서 로그인 + 권한 동의
4. Google이 우리 서비스의 callback URL로 리다이렉트 (authorization code 포함)
5. 우리 서버가 이 code를 Google에 보내서 access token으로 교환
6. access token으로 Google API에서 사용자 정보 조회
7. 사용자 정보로 우리 서비스의 계정 생성/로그인 처리

[브라우저]  --code-->  [우리 서버]  --code + client_secret-->  [Google]
                       [우리 서버]  <--access_token--          [Google]

https://yourdomain.com/auth/provider.google/continue

https://accounts.google.com/o/oauth2/v2/auth?
  client_id=YOUR_CLIENT_ID
  &redirect_uri=https://yourdomain.com/auth/provider.google/continue
  &response_type=code
  &scope=openid email profile
  &state=RANDOM_STATE_VALUE
  &access_type=offline

// API 호출로 로그인 URL 받기
const { refetch: getGoogleUrl } = useQuery({
  queryKey: ['auth', 'google-url'],
  queryFn: authApi.getGoogleLoginUrl,
  enabled: false,  // 버튼 클릭 시에만 호출
});

const handleGoogleLogin = async () => {
  const { data } = await getGoogleUrl();
  window.location.href = data.url;  // Google 인증 페이지로 이동
};

https://yourdomain.com/auth/provider.google/continue?code=4/0AX4XfWh...&state=RANDOM_STATE_VALUE

// 콜백 페이지 (클라이언트)
function useGoogleOAuthCallback() {
  const searchParams = useSearchParams();
  const { mutate: continueGoogleLogin } = useContinueGoogleLogin();

  useEffect(() => {
    const code = searchParams.get('code');
    const error = searchParams.get('error');

    if (error) {
      // 사용자가 취소했거나 에러 발생
      redirect('/sign-in');
      return;
    }

    if (code) {
      // 서버에 code 전송 → 서버가 token 교환 처리
      continueGoogleLogin({ code });
    }
  }, []);
}

// 서버 측 (개념적 코드)
async function handleGoogleCallback(code: string) {
  // 1. code → access token 교환
  const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {
    method: 'POST',
    body: JSON.stringify({
      code,
      client_id: process.env.GOOGLE_CLIENT_ID,
      client_secret: process.env.GOOGLE_CLIENT_SECRET,
      redirect_uri: 'https://yourdomain.com/auth/provider.google/continue',
      grant_type: 'authorization_code',
    }),
  });
  const { access_token } = await tokenResponse.json();

  // 2. access token으로 사용자 정보 조회
  const userInfo = await fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
    headers: { Authorization: `Bearer ${access_token}` },
  });
  const { email, name, picture } = await userInfo.json();

  // 3. 우리 서비스의 계정 생성 또는 기존 계정 연결
  const user = await findOrCreateUser({ email, name, picture, provider: 'google' });

  // 4. 우리 서비스의 JWT 토큰 발급
  return { accessToken: generateJWT(user) };
}

GET /callback?code=xxx&state=yyy

POST /callback
Content-Type: application/x-www-form-urlencoded

code=xxx&state=yyy

// app/auth/provider.apple/callback/route.ts
export async function POST(request: NextRequest) {
  const formData = await request.formData();
  const code = formData.get('code') as string | null;
  const error = formData.get('error') as string | null;

  const origin = getOrigin(request);

  if (error) {
    return NextResponse.redirect(
      new URL(`/auth/provider.apple/continue?error=${encodeURIComponent(error)}`, origin),
      303,
    );
  }

  if (!code) {
    return NextResponse.redirect(
      new URL('/auth/provider.apple/continue?error=missing_code', origin),
      303,
    );
  }

  // 303 See Other: POST → GET 자동 변환
  return NextResponse.redirect(
    new URL(`/auth/provider.apple/continue?code=${encodeURIComponent(code)}`, origin),
    303,
  );
}

function useAppleOAuthCallback() {
  const searchParams = useSearchParams();
  const { mutate: continueAppleLogin } = useContinueAppleLogin();

  useEffect(() => {
    const code = searchParams.get('code');
    const error = searchParams.get('error');

    if (error) {
      redirect('/sign-in');
      return;
    }

    if (code) {
      continueAppleLogin({ code });
    }
  }, []);
}

1. 공격자가 자신의 Google 계정으로 인증해서 code를 받음
2. 이 code가 포함된 콜백 URL을 피해자에게 보냄
3. 피해자가 링크를 클릭하면, 피해자의 계정이 공격자의 Google 계정과 연결됨

// 1. 로그인 시작 시 랜덤 state 생성 후 세션에 저장
const state = crypto.randomUUID();
session.set('oauth_state', state);
// state를 포함한 URL로 리다이렉트

// 2. 콜백에서 state 검증
const returnedState = searchParams.get('state');
const savedState = session.get('oauth_state');
if (returnedState !== savedState) {
  throw new Error('Invalid state parameter');
}

const { mutate: continueGoogleLogin } = useMutation({
  mutationFn: (data: { code: string }) => authApi.continueGoogleLogin(data),
  onSuccess: (response) => {
    // 서버가 발급한 우리 서비스의 JWT 저장
    setToken(response.accessToken);

    // 사용자 정보 캐시 업데이트
    authApi.getCurrentUser().then((user) => {
      queryClient.setQueryData(['auth', 'user'], user);
    });

    // 워크스페이스로 리다이렉트
    redirectToWorkspace();
  },
});

// 로그인 전: 접근하려던 URL 저장
localStorage.setItem('auth_redirect_url', currentUrl);

// 로그인 후: 저장된 URL로 리다이렉트
const redirectUrl = localStorage.getItem('auth_redirect_url');
if (redirectUrl) {
  localStorage.removeItem('auth_redirect_url');
  router.push(redirectUrl);
}