12. 27. 41일차 TIL next 팀프로젝트 트러블슈팅

왜 이러는건지 진짜 하나도 모르겠다.

"use server"

import { createServerClient } from '@supabase/ssr';

import { cookies } from 'next/headers';

export const serverSupabase = () => {
  const cookieStore = cookies();

  return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
    cookies: {
      getAll() {
        return cookieStore.getAll();
      },
      setAll(cookiesToSet) {
        try {
          cookiesToSet.forEach(({ name, value, options }) => {
            cookieStore.set(name, value, options);
          });
        } catch (error) {
          // The `set` method was called from a Server Component.
          // This can be ignored if you have middleware refreshing
          // user sessions.
        }
      }
    }
  });
};

그래도 어디가 문제인지 확인해보자..

---

1) 요청 데이터 값 확인하기

// api/sign-in/route.ts

const { email, password } = await request.json();
console.log('요청 데이터:', { email, password });

// 확인 결과
요청 데이터: { email: 'minseock4308@hanmail.net', password: 'asd15243' }

 

다행히 로그인 폼을 통해 입력한 정보가 제대로 전송되고 있는 것을 확인했다.

 

2) 클라이언트가 초기화 되었는지 확인하기

서버클라이언트는 서버마다 초기화를 해준 뒤 사용해야한다.

// api/sign-in/route.ts

  if (!supabase || typeof supabase.auth === 'undefined') {
    console.error('Supabase 클라이언트가 제대로 초기화되지 않았습니다.');
    return NextResponse.json({ errorMsg: 'Supabase 클라이언트 초기화 실패' }, { status: 500 });
  }

// 확인 결과
Supabase 클라이언트가 제대로 초기화되지 않았습니다.
 POST /api/sign-in 500 in 2733ms

 

아.. Supabase가 undefined로 나오지 않고 있었구나.. 그래도 설정에는 문제가 없는데...왜 초기화가 안되는걸까?

이유는 정말 간단했다.. 

Supabase 객체: Promise {
  SupabaseClient {
     ---
   }
}

우리가 받아올 데이터는 Promise로 되어있으니 비동기로 받아줘야한다..
그리고 요청값 데이터를 확인할 때에도 이를 기억하고 await를 사용했다.

const { email, password } = await request.json();

 

하지만 서버클라이언트를 새로 생성해줄 때, await를 하지 않았기 때문에 초기화가 되지 못하였던 것이다.

// 이전 버전
const supabase = serverSupabase();

// 수정 버전
const supabase = await serverSupabase();

try문 안에 있는 로직만 await를 사용하면 될 것이라고 생각했는데 아니었다..
그리고 수정한 이후 로그인 기능이 잘 작동하고 있음을 확인하였다.

---

이제 .. 빨리 회원가입의 오류를 찾아 수정해야한다..마이페이지는 React Query로 캐싱된 값만 다시 받아와서 뿌려주면 되니 회원가입 기능만 제대로 구현한다면 디자인을 시작할 수 있다! 이번에도 좀 이쁜 사이트가 만들어졌으면 좋겠다.