Add Auth layer in ui

[2wheeh]

Content

• UI에서 로그인 관련 fetch 요청을 보내고, 그 데이터를 다룰 layer 를 추가합니다.
• UI standalone 으로 작업 가능하도록 로그인 성공의 응답 데이터를 모킹합니다.

[2wheeh]

auth 관련 데이터를 nextjs 서버에서 다룰지에대한 결정은 나중으로 미루기로했습니다.
우선 인증이 필요한 부분은 모두 브라우저에서 다루고, 나중에 UX를 위해 csr, ssr 를 정리하며 결정하겠습니다.

서버에서 auth 를 다루게 될 경우 확인이 필요한 부분:

• cookie samesite 옵션: strict -> lax 일때 nextjs 로의 redirect 요청 헤더에 쿠키가 올바르게 세팅되어 사파리, 크롬에서 정상 동작함. 관련 문서 추가 확인필요
• next auth의 인터페이스 참고: https://github.com/balazsorban44/auth-poc-next

간단한 구현예시:

'use server';

import { redirect } from 'next/navigation';
import { cookies } from 'next/headers';
import { GetUserDetailResponse } from '@/lib/definitions/user';

export async function signIn() {
  redirect('/api/v1/google/sign-in');
}

export async function signOut() {
  const res = await fetch(`${process.env.BACKEND_URL}/api/v1/auth/sign-out`);

  if (res.ok) {
    cookies().set('mrcToken', '', { expires: new Date(0) });
  }
}

export async function getUserInfo() {
  const mrcToken = cookies().get('mrcToken')?.value;

  if (!mrcToken) return null;

  const response = await fetch(`${process.env.BACKEND_URL}/api/v1/users/self`, {
    headers: { authorization: `Bearer ${mrcToken}` },
  });

  if (!response.ok) {
    // handle error properly
    return null;
  }

  return (await response.json()) as { user: GetUserDetailResponse };
}

import Text from '@/components/atomic/text';
import { signOut, signIn, getUserInfo } from '@/lib/actions/auth';

export async function ServerSignButton() {
  const isLoggedIn = !!(await getUserInfo());

  if (isLoggedIn) {
    return (
      <form
        action={async () => {
          'use server';

          await signOut();
        }}
      >
        <button>
          <Text size="lg" weight="medium">
            Sign Out
          </Text>
        </button>
      </form>
    );
  }

  return (
    <form
      action={async () => {
        'use server';

        await signIn();
      }}
    >
      <button>
        <Text size="lg" weight="medium">
          Sign In
        </Text>
      </button>
    </form>
  );
}