인프런 커뮤니티 질문&답변

안녕하세요! 강사님의 강의를 듣고 질문 타이틀에 적힌 대로 시도하는 과정에 어려움이 생겨 질문 드립니다.

제가 시도한 인증/인가 흐름은 다음과 같이 진행됩니다.

1. 클라이언트가 로그인 요청 (성공)

2. 서버에서는 이에 대해 access token과 refresh token을 생성하고, access token은 response body에, refresh token은 cookie에 담아 응답을 보냅니다. (성공)

3. 클라이언트의 요청에 대해 응답이 성공적으로 들어오면 / 화면으로 redirect되고, response body에 담긴 access token은 변수에 저장되고 (성공), refresh token은 brower cookie에 저장됩니다. (실패)

2번까지는 성공했지만 3번에서 cookie에 저장하는 것에 실패했습니다.

코드는 다음과 같습니다.

클라이언트단 코드

    const onFinish = (values) => {

        setFieldErrors({});

        async function fn() {
            try {
                const { data: token } = await Axios.post("http://localhost:8000/accounts/auth",
                    values,
                    { credentials: "include" }
                );
                axios.defaults.headers.common["Authorization"] = `Bearer ${token.access}`
                navigation("/");

                ...

서버단 코드 (accounts/auth)

아래 코드를 작성하는데 참고한 django 공식문서는 [여기](https://docs.djangoproject.com/en/3.0/ref/request-response/#django.http.HttpResponse.set_cookie) 입니다.

Access-Control-Allow-Credentials의 경우, django-cors-header가 있어도 발생하여 해당 헤더를 추가하니 해결되었습니다. 또한 클라이언트단에도 credentials를 추가했습니다.

from rest_framework_simplejwt.views import TokenObtainPairView

class AuthView(TokenObtainPairView):
    def post(self, request, *args, **kwargs)):
        ...

        response = Response(
            {"access": serializer.validated_data.get("access", None)},
            status=status.HTTP_200_OK,
        )
        refresh_token = serializer.validated_data.get("refresh", None)
        response.set_cookie(
            "refresh",
            refresh_token,
            httponly=True,
            samesite=None,
            max_age=24 * 60 * 60,
            secure=False,
            domain="localhost",
        )
        response.headers["Access-Control-Allow-Credentials"] = True
        return response

위 코드의 응답 결과는 다음 이미지와 같습니다.

response headers에 담긴 전체 정보이고, Set-Cookie에 관한 내용은 다음과 같이 나왔습니다.

Set-Cookie:

refresh=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTY4ODcxMzE5OSwiaWF0IjoxNjg4NjI2Nzk5LCJqdGkiOiIwZTNkNGYwN2RiZTI0NGUyYWMyMmVlODIzYjAzMzZkMCIsInVzZXJfaWQiOjd9.xAsVsvuoUcukBZ0t2iVo-yIlplDy2JlwE_R4cX1YwmU; Domain=localhost; expires=Fri, 07 Jul 2023 06:59:59 GMT; HttpOnly; Max-Age=86400; Path=/

그래서 시도한 것들은 다음과 같습니다.

1. httponly, samesite, secure 각 값들에 대해서 하나씩 값을 바꿔가면서 시도했습니다.

2. domain keyword 인자를 없애기도 했습니다.

3. chrome의 캐쉬 설정이 문제인가 하여 third-party cache 허용으로도 바꿨습니다.

4. middleware가 문제인가 하여 django-cors-header와 debug toolbar를 꺼서 시도해봤습니다.

5. application/Cookies 뭔가 남아있으면 삭제하고 다시 로그인으르 시도했습니다.

하지만 위 시도들을 했음에도 불구하고도 해결이 되지 않아 강사님에게 여쭤봅니다 ㅠㅠ