• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

회원가입시 redirect가 안됩니다.

24.04.03 20:11 작성 24.04.03 20:23 수정 조회수 164

0

클라이언트 컴포넌트에서 Server Actions 사용하기에서 가입하기를 누르면

response에는 message: null이 잘 오는데 redirect에서 에러가 납니다.

404
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:5329:19)
    at successSteps (node:internal/deps/undici/undici:5300:27)
    at fullyReadBody (node:internal/deps/undici/undici:1447:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async specConsumeBody (node:internal/deps/undici/undici:5309:7)
    at async onSubmit (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:49:21)
    at async C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:406
    at async t2 (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:6412)
    at async rS (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:41:1369)
    at async doRender (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1378:30)     
    at async cacheEntry.responseCache.get.routeKind (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1539:28)
    at async DevServer.renderToResponseWithComponentsImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1447:28)
    at async DevServer.renderPageComponent (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1844:24)
    at async DevServer.renderToResponseImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1882:32)
    at async DevServer.pipeImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:895:25)
    at async NextNodeServer.handleCatchallRenderRequest (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\next-server.js:269:17)
    at async DevServer.handleRequestImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:791:17)
    at async C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\dev\next-dev-server.js:331:20
    at async Span.traceAsyncFn (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\trace\trace.js:151:20)    
    at async DevServer.handleRequest (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\dev\next-dev-server.js:328:24)
    at async invokeRender (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\router-server.js:174:21)
    at async handleRequest (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\router-server.js:353:24)
    at async requestHandlerImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\router-server.js:377:13)
    at async Server.requestListener (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\start-server.js:140:13)

at async onSubmit (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:49:21) 에러가 난것을 확인했을때 다른것은 되는데 redirect가 안되는 것 같습니다.

signup.ts는

"use server";

import { redirect } from "next/navigation";
import { signIn } from "@/auth";

export default async function onSubmit(prevState: any, formData: FormData) {
  if (!formData.get("id") || !(formData.get("id") as string)?.trim()) {
    return { message: "no_id" };
  }
  if (!formData.get("name") || !(formData.get("name") as string)?.trim()) {
    return { message: "no_name" };
  }
  if (
    !formData.get("password") ||
    !(formData.get("password") as string)?.trim()
  ) {
    return { message: "no_password" };
  }
  if (!formData.get("image")) {
    return { message: "no_image" };
  }
  let shouldRedirect = false;
  try {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`,
      {
        method: "post",
        body: formData,
        credentials: "include",
      }
    );
    console.log(response.status);
    if (response.status === 403) {
      return { message: "user_exists" };
    }
    console.log(await response.json());
    shouldRedirect = true;
    await signIn("credentials", {
      username: formData.get("id"),
      password: formData.get("password"),
      redirect: false,
    });
  } catch (err) {
    console.error(err);
    return { message: null };
  }

  if (shouldRedirect) {
    redirect("/home");
  }
  return { message: null };
}

ESLint 오류가 나서 return {message:null}을 추가해준것과

export default async function onSubmit(prevState: any, formData: FormData) {}

async function onSubmit 형태로 바꾼것 외에는 건드린게 없고,

공지사항대로 @auth/core와 next-auth 버전을

npm i @auth/core@0.27 next-auth@5.0.0-beta.11 msw@2.1

이렇게 설정해줬고,

.env.local도

NEXT_PUBLIC_API_MOCKING=enabled
API_MOCKING=hello
NEXT_PUBLIC_BASE_URL=http://localhost:9090/

.env도

AUTH_SECRET=mustkeepinsecret
NEXT_PUBLIC_API_MOCKING=enabled

SingupModal.tsx

"use client";

import style from "./signup.module.css";
import onSubmit from "../_lib/signup";
import BackButton from "@/app/(beforeLogin)/_component/BackButton";
import { useFormState, useFormStatus } from "react-dom";

function showMessage(messasge: string | null) {
  if (messasge === "no_id") {
    return "아이디를 입력하세요.";
  }
  if (messasge === "no_name") {
    return "닉네임을 입력하세요.";
  }
  if (messasge === "no_password") {
    return "비밀번호를 입력하세요.";
  }
  if (messasge === "no_image") {
    return "이미지를 업로드하세요.";
  }
  if (messasge === "user_exists") {
    return "이미 사용 중인 아이디입니다.";
  }
  return "";
}

export default function SignupModal() {
  const [state, formAction] = useFormState(onSubmit, { message: null });
  const { pending } = useFormStatus();

  return (
    <>
      <div className={style.modalBackground}>
        <div className={style.modal}>
          <div className={style.modalHeader}>
            <BackButton />
            <div>계정을 생성하세요.</div>
          </div>
          <form action={formAction}>
            <div className={style.modalBody}>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="id">
                  아이디
                </label>
                <input
                  id="id"
                  name="id"
                  className={style.input}
                  type="text"
                  placeholder=""
                  required
                />
              </div>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="name">
                  닉네임
                </label>
                <input
                  id="name"
                  name="name"
                  className={style.input}
                  type="text"
                  placeholder=""
                  required
                />
              </div>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="password">
                  비밀번호
                </label>
                <input
                  id="password"
                  name="password"
                  className={style.input}
                  type="password"
                  placeholder=""
                  required
                />
              </div>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="image">
                  프로필
                </label>
                <input
                  id="image"
                  name="image"
                  required
                  className={style.input}
                  type="file"
                  accept="image/*"
                />
              </div>
            </div>
            <div className={style.modalFooter}>
              <button
                type="submit"
                className={style.actionButton}
                disabled={pending}
              >
                가입하기
              </button>
              <div className={style.error}>
                {showMessage(state?.message || null)}
              </div>
            </div>
          </form>
        </div>
      </div>
    </>
  );
}

showMessage에 TS오류나서 타입을 state?.message || null로 바꿔준것 외에는 없습니다.

캐시도 다 삭제하고 mock서버랑 next서버 다 껐다가 다시 키고 vscode도 껐다가 다시 켜도 똑같습니다.. 리다이렉트가 안됩니다 ㅠㅠ 자꾸 404 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON이 나옵니다...

 

auth.ts도 바꾼것이 없습니다..

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials";
import {NextResponse} from "next/server";

export const {
  handlers: { GET, POST },
  auth,
  signIn,
} = NextAuth({
  pages: {
    signIn: '/i/flow/login',
    newUser: '/i/flow/signup',
  },
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}}/api/login`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            id: credentials.username,
            password: credentials.password,
          }),
        })

        if (!authResponse.ok) {
          return null
        }

        const user = await authResponse.json()
        console.log('user', user);
        return {
          email: user.id,
          name: user.nickname,
          image: user.image,
          ...user,
        }
      },
    }),
  ]
});
course-thumbnail

Next + React Query로 SNS 서비스 만들기

답변 2

·

답변을 작성해보세요.

1

조현영님의 프로필

조현영

지식공유자

2024.04.03

NEXT_PUBLIC_BASE_URL=http://localhost:9090/ 여기서 마지막 / 빼세요.

그리고 auth.ts에서도 } 오타나있습니다.

const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}}/api/login`, {

apinksky00님의 프로필

apinksky00

질문자

2024.04.03

헉 NEXT_PUBLIC_BASE_URL에서 /빼도 다른 오류가 났었어서 다시 붙였었는데

auth.ts에서 오타가 나있을줄은 몰랐네요 감사합니다 바로 됐습니다.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.04.03

안녕하세요, 인프런 AI 인턴입니다. apinksky00님의 질문에 대해 유사한 문제를 겪은 다른 수강생의 해결 과정을 찾아보았습니다. 여기서의 핵심 문제는 로그인 후 리다이렉트가 작동하지 않는 것으로 보입니다.

비슷한 상황에서 해결 방안을 찾을 수 있는 게시글을 찾았습니다:
- “로그인 문제” - 이 게시물에서는 next-auth 라이브러리와 관련하여 로그인 후 리다이렉트가 작동하지 않는 문제를 논의하고 있습니다. 구체적으로, 이 게시물은 signIn 함수 후 예상한대로 리다이렉트가 이루어지지 않는 상황을 지적합니다. 여러분의 경우에도 signIn 함수 이후 redirect가 제대로 작동하지 않는 것으로 보입니다. 따라서, 이 게시물에서 제안하는 해결 방안이 도움이 될 수 있습니다.

이 링크에서 제공하는 정보는 질문에서 나온 리다이렉트가 안 되는 문제를 해결하는 데 있어 유용한 인사이트를 제공할 수 있습니다. 특히, 로그인 성공 후 페이지 이동이 제대로 이루어지지 않는 경우에는 signIn 함수의 redirect 옵션 처리 방법과 관련된 설정을 조정해볼 필요가 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

이 글과 비슷한 Q&A