
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
튜터님 안녕하세요! 지금 auth, middleware 부분을 학습 중인데 강의를 듣다 어느부분을 놓쳤는지 accessToekn 값이 생성되지 않습니다. 보통 이런 경우에 혼자 검색을 해서 해결하려하는 편인데 제가 이해하지 못한 부분이 어떤 것인지 몰라 질문 남깁니다! 코드에 누락된 부분이나 추가적으로 해당 부분을 학습하려면 어떤 것을 공부해야할지 궁금합니다!
// src > app > api > sign-in > route.ts
import { cookies } from "next/headers"
import { NextResponse } from "next/server"
export const POST = async (request:Request) =>{
const payload = await request.json()
const res = await fetch('http://localhost:8000/signIn',
{
method: 'POST',
headers : {'Content-Type' : 'application/json'},
cache: 'no-store',
body: JSON.stringify({...payload})})
const data = await res.json()
const cookieStore = cookies()
cookieStore.set('accessToken',data.accessToken, {
httpOnly: true
})
return NextResponse.json({
data: true
})
}
// src > middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
const isLogin = !!request.cookies.get('accessToken')?.valueif (!isLogin && request.nextUrl.pathname.includes("/cart")){
return NextResponse.redirect(new URL('/sign-in', request.url));
}
}
export const config = {
matcher: '/about/:path*',
};
// src > app > components > _ > SignInForm.tsx
"use client";
import { POST } from "@/app/api/sign-in/route";
import { zodResolver } from "@hookform/resolvers/zod";
import { FieldValues, useForm } from "react-hook-form";
import { z } from "zod";
const SignInSchema = z.object({
email : z.string().email({
message : 'invailed email'
}).min(1,{
message: 'required email'
}).max(20, {message:'too long'}),
password: z.string()
});
const SignInForm = () => {
const {register , handleSubmit, formState} = useForm({
mode : 'onChange',
defaultValues: {
email:'test@test.com',
password: '12341234'
},
resolver: zodResolver(SignInSchema)
})
const onSubmit = async (value:FieldValues ) => {
const res = await fetch('/api/sign-in', {
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({
...value
})
})
const data = await res.json()
console.log(SignInSchema.parse(value))
}
return (
<formonSubmit={handleSubmit(onSubmit)}className="flex flex-col gap-4 p-5 items-center w-full m-auto"
><div className="flex flex-col gap-2"><label htmlFor="email">Email</label><inputid="email"type="email"
{...register('email')}
placeholder="Email"className="text-black"
/>
{formState.errors.email?.message}
</div>
<div className="flex flex-col gap-2"><label htmlFor="password">Password</label><inputtype="password"
{...register('password')}
placeholder="Password"className="text-black"
/></div><buttonclassName="bg-gray-800 text-white px-4 py-2 rounded-md"type="submit"
>
Sign In
</button></form>
);
};
export default SignInForm;
--------------------
db에 있는 붙여넣은 비밀번호가 달라서 저장되지 않는 것이었습니다 😂 해결하였슴당 ..ㅎㅎ
