[Next.js] Oauth와 자체 로그인 같이 구현

자체 로그인구현하는데 몇일이 걸린지 모르겠다.....

그래서 결국 해낸거같아서 내자신에게 아주 칭찬해!!!!!!!!!!!!!!

 

몽고DB를 연결해서 구현했는데.

왜 계속 console.log(요청.body)하면 아무것도 안잡히지 하면서 많이 찾아보고 했는데 원인을 알았다.

가장 큰 이유는 axios를 이용해서 post로 데이터를 보내줄때 body를 제대로 안보내줬던것 같다.

이게 가장 큰 문제였던 것으로 예상된다.

그래서

axios
      .post("/api/auth/login", body)
      //.then(res => console.log(res.data))
      .then(res => {
        setEmail(res.data.email),
          setPw(res.data.pw),
          alert("로그인성공"),
          router.push("/");
      })
      .catch(err => {
        alert("실패"), setEmail(""), setPw("");
      });

 

이렇게 해주니 res.data에서 내가 입력한 email과 pw값을 딱 가져올수 있었다.

 

2. 

이제 몽고DB에 있는 여러회원들의 email과 password와 내가 입력한 것과 비교를 할수 있게 작업했다.

export default async function handle(요청, 응답) {
  if (요청.method === "POST") {
    const client = await connectDB;
    const db = client.db("market");
    let 모든회원 = await db.collection("user_cred").find().toArray();
    let 맞는이메일 = 모든회원.filter(ele => ele.email === 요청.body.email);
    }}

 

이런식으로

일단 find를 이용해서 DB에 있는 모든회원의 데이터를 가져왔고

거기서 내가 입력한 이메일과 동일한 이메일을 필터로 골라냈다.

그럼 그 이메일로 되어있는 회원의 정보를 비교해서 email과 password가 모두 동일하면 로그인에 성공하도록 구현했다.

 

---

pages/api/auth/login.js

여긴 서버컴포넌트

import { connectDB } from "@/util/database";
import { ObjectId } from "mongodb";

export default async function handle(요청, 응답) {
  if (요청.method === "POST") {
    const client = await connectDB;
    const db = client.db("market");
    let 모든회원 = await db.collection("user_cred").find().toArray();
    let 맞는이메일 = 모든회원.filter(ele => ele.email === 요청.body.email);
    //console.log(맞는이메일[0].email);
    //console.log(요청.body.email);
    if (
      맞는이메일[0]?.email === 요청.body.email &&
      맞는이메일[0]?.password === 요청.body.pw
    ) {
      //return 응답.status(200).json(console.log(요청.body));
      //return console.log(요청.body);
      //return 응답.redirect(302, "/");
      return 응답.status(200).json(요청.body);
      return 응답.redirect(302, "/");
    } else {
      return 응답.status(500).json("틀림");
      return 응답.redirect(302, "/login");
    }
  }
}

 

 

login/part.js

part라는 컴포넌트를 생성해서 login/page.js에서 사용했다.

"use client";

import axios from "axios";
import { useState } from "react";
import { useRouter } from "next/navigation";

export default function Part() {
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  const handleEmail = e => {
    setEmail(e.target.value);
  };
  const handlePw = e => {
    setPw(e.target.value);
  };
  let router = useRouter();

  const handleLogin = () => {
    LoginAxios();
  };
  const LoginAxios = () => {
    const body = { email, pw };
    axios
      .post("/api/auth/login", body)
      //.then(res => console.log(res.data))
      .then(res => {
        setEmail(res.data.email),
          setPw(res.data.pw),
          alert("로그인성공"),
          router.push("/");
      })
      .catch(err => {
        alert("실패"), setEmail(""), setPw("");
      });
  };

  return (
    <div>
      <h4>Email</h4>
      <input value={email} onChange={handleEmail} />
      <h4>Password</h4>
      <input type="password" value={pw} onChange={handlePw} />
      <button onClick={handleLogin}>로그인</button>
    </div>
  );
}

 

---

 

3. 이제 리덕스를 이용해서 로그인이 되었을때 회원이름이 헤더에 나오게 구현할차례이다.

to be continue.............