1.2콜백

Intro

Next.js App Router 프로젝트에 supabase - Google OAuth login을 구현하는 과정에서

app/api/auth/callback/route.ts

라는 경로를 만들라고 문서에 적혀있었는데, 왜 auth/route.ts가 아니고 굳이 callback이라는 폴더를 통해야하는지 의문이 생겼다. 어차피 auth 폴더안에 다른게 들어갈 일이 없는데(현재로썬), auth/callback이어야 할만큼 callback이라는 기능을 분리해야할 필요가 있을까?

callback이란?

위키백과에 의하면,

프로그래밍에서 콜백 또는 콜백 함수는 다른 코드의 인수(argument)로서 넘겨주는 실행 가능한 코드를 말한다.

우선, callback이라는 말 자체가 프로그래밍에서 함수를 지칭하는 것이므로 callback과 callback function은 혼용되는 동일한 용어이다.

이 callback 함수를 받은 함수가 나중에 이 callback 함수를 말 그대로 call back, 즉 다시 불러낼 것이므로 이런 이름이 붙었다.

그래서, 왜 auth/callback?

auth에 관련된 기능이지만 직접 auth를 하는 코드가 아니라 OAuth의 맥락에선 auth를 해주는 Provider가 나중에 부르는 api이기 때문에 이렇게 구분을 해준 것으로 보인다.

OAuth 컨텍스트에서, callback이란 OAuth Provider가 유저임을 확인하고 권한을 줄 때 내 앱으로 리다이렉트 하는 endpoint를 일컫는다.

OAuth로 로그인하려면, 유저가 Provider쪽 로그인 화면으로 가서 해당 Provider에게 유저 본인임을 증명 받는데, 이 때 내 앱으로 돌아올 때 특정 엔드포인트를 다시 불러와야(call back)하고 그러기에 auth/callback/route.ts라는 접점을 만드는 것이다.

예를 들면, 아래는 utils/handleSignIn.ts이다.

javascript
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';

const handleSignIn = async () => {
  const supabase = createClientComponentClient();

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      **redirectTo: `${window.location.origin}/auth/callback`,**
      queryParams: {
        access_type: 'offline',
        prompt: 'consent',
      },
    },
  });

  if (error) {
    console.error('OAuth error:', error);
  }
};

export default handleSignIn;

signInWithOAuth로 로그인을 하면, 구글에게 redirect를 auth/callback으로 하라고 옵션으로 설정한다.

그러면 로그인을 마친 후 구글은 아래의 app/api/auth/callback/route.ts를 요청한다.