[React JS] 5. 회원가입/로그인/로그아웃 기능 구현하기

[React JS] 5. 로그인 기능 구현하기

 

1. 회원가입 페이지 UI 생성하기

RegisterPage.js

import React from "react";

const RegisterPage = () => {
  return (
    <section className="flex flex-col justify-center mt-20 max-w-[400px] m-auto">
      <div className="p-6 bg-white rounded-md shadow">
        <h1 className="text-3xl front-semibold text-center">회원가입</h1>
        <form className="mt-6">
          <div className="mb-2">
            <label
              htmlFor="email"
              className="text-sm font-semibold text-gray-800"
            >
              Email
            </label>
            <input
              type="email"
              id="email"
              className="w-full px-4 py-2 mt-2 bg-white border rounded-md"
            />
          </div>
          <div className="mb-2">
            <label
              htmlFor="name"
              className="text-sm font-semibold text-gray-800"
            >
              Name
            </label>
            <input
              type="text"
              id="name"
              className="w-full px-4 py-2 mt-2 bg-white border rounded-md"
            />
          </div>
          <div className="mb-2">
            <label
              htmlFor="password"
              className="text-sm font-semibold text-gray-800"
            >
              Password
            </label>
            <input
              type="password"
              id="password"
              className="w-full px-4 py-2 mt-2 bg-white border rounded-md"
            />
          </div>
          <div className="mt-6">
            <button
              type="submit"
              className="w-full bg-black text-white px-4 py-2 rounded-md hover:bg-gray-700 duration-200"
            >
              회원가입
            </button>
          </div>
          <p className="mt-8 text-xs font-light text-center text-gray-700">
            아이디가 있다면{" "}
            <a href="/login" className="font-medium hover:underline">
              로그인
            </a>
          </p>
        </form>
      </div>
    </section>
  );
};

export default RegisterPage;

---

2. React-Hook-Form

유효성 검사

- 라이브러리 없이 만들어도 되지만 react-hook-form 사용하면 편리 + re-랜더링 최소화 가능 (적은 코드, 높은 성능)

 

React-Hook-Form

npm i react-hook-form

- useForm() 사용

import React from "react";
import { useForm } from "react-hook-form";

const RegisterPage = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm( {mode: 'onChange'});

  const onSubmit = ({ email, password, name }) => {
    reset();
  };

  const userEmail = {
    required: "필수 필드입니다.",
  };

  const userName = {
    required: "필수 필드입니다.",
  };

  const userPassword = {
    required: "필수 필드입니다.",
    minLength: {
      value: 6,
      message: "최소 6자입니다.",
    },
  };

  return (
    <section className="flex flex-col justify-center mt-20 max-w-[400px] m-auto">
      <div className="p-6 bg-white rounded-md shadow">
        <h1 className="text-3xl front-semibold text-center">회원가입</h1>
        <form className="mt-6" onSubmit={handleSubmit(onSubmit)}>
          <div className="mb-2">
            <label
              htmlFor="email"
              className="text-sm font-semibold text-gray-800"
            >
              Email
            </label>
            <input
              type="email"
              id="email"
              className="w-full px-4 py-2 mt-2 bg-white border rounded-md"
              {...register("email", userEmail)}
            />
            {errors?.email && (
              <div>
                <span className="text-red-500">{errors.email.message}</span>
              </div>
            )}
          </div>
          

export default RegisterPage;

---

3. Axios Instance

Axios- 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP  비동기 통신 라이브러리- 백엔드 - 프론트엔드 통신 쉽게하기 위해 Ajax와 함께 사용= fetch(내장)이 아닌 Axios 사용한다는 말

npm i axios

 

Axios 인스턴스화

- 인스턴스화 하는 이유 : 중복된 요청 편하게 가능

- ex) localhost:4000 을 base URL로  등등

 

* 토큰을 interceptor에 넣어줘야됨 (요청 보낼때마다 확인해야하기 때문 - 나중에)

 

utils > axios 폴더

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: import.meta.env.PROD ? "" : "http://localhost:4000",
});

export default axiosInstance

(4000번 서버, 개발환경)

---

4. 회원가입 기능 생성하기

Redux 이용해서 백엔드로 데이터 보내기- 받아온 데이터를 redux store에 넣어줄 것 - action을 dispatch하면 action이 reducer 전달되기 전에 middleware이용해서 요청 보내고 백엔드 처리(정보저장)하고 응답주면 response data = action의 payload를 처리

 

RegisterPage.js

  const dispatch = useDispatch();

  const onSubmit = ({ email, password, name }) => {
    const body = {
      email,
      password,
      name,
      image:
        "https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2Fdf%2F77%2F7a%2Fdf777a668034cb80e6d0d0fa1a1d83cb.jpg&type=ofullfill340_600_png",
    };

    dispatch(registerUser(body));
    reset();
  };

userSlice.js

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
    .addCase(registerUser.pending, (state) => {
      state.isLoading = true;
    })
    .addCase(registerUser.fulfilled, (state) => {
      state.isLoading = false;
    })
    .addCase(registerUser.rejected, (state, action) => {
      state.isLoading = false;
      state.error = action.payload;
    })
  },
});

thunkFunctions.js (store)

import { createAsyncThunk } from "@reduxjs/toolkit";
import axiosInstance from "../utils/axios";

export const registerUser = createAsyncThunk(
  "user/registerUser",
  async (body, thunkAPI) => {
    try {
      const response = await axiosInstance.post("/users/register", body);
      return response.data;
    } catch (error) {
      console.log(error);
      return thunkAPI.rejectWithValue(error.response.data || error.message);
    }
  }
);

---

5. react toast 이용하기

설치

npm i react-toastify

- 일정 시간동안 alert 보여주는 기능 

App.jsx

<ToastContainer
        position="bottom-right"
        theme="light"
        pauseOnHover
        autoClose={1500}
      />

userSlice.js

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(registerUser.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(registerUser.fulfilled, (state) => {
        state.isLoading = false;
        toast.info("회원가입 성공");
      })
      .addCase(registerUser.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.payload;
        toast.error(action.payload);
      });
  },
});

---

6. register route 생성하기

index.js

app.use("/users", require("./routes/users"));

routes/users.js

const express = require("express");
const { User } = require("../models/User");
const router = express.Router();

router.post("/register", async (req, res, next) => {
  try {
    const user = new User(req.body);
    await user.save();
    return res.sendStatus(200);
  } catch (error) {
    next(error);
  }
});

router.post("/users/login", (req, res) => {});

router.post("/users/auth", (req, res) => {});

module.exports = router;

---

7. 비밀번호 암호화하기

bcryptjs 모듈 사용

- 양방향 (암호 노출되면 X)

- 단방향 (hash, 복호화 불가)

 

문제점

-> 레인보우 테이블을 통해 찾을 수 있음 (지정돼있는 것)

 

해결

-> salt

-> 랜덤값을 넣어주는 것

-> salt + 비밀번호 -> 복호화 -> 해시화된 암호

 

User.js

userSchema.pre("save", async function (next) {
  let user = this;

  if (user.isModified("password")) {
    const salt = await bcrypt.genSalt(10);
    const hash = await bcrypt.hash(user.password, salt);
    user.password = hash;
  }
});

---

8. 로그인페이지 생성하기 (Json Web Token)

프론트 : 페이지 추가 -> thunkFunctions.js 추가 -> userSlice.js 추가

백엔드 : 라우터 추가

 

* 인증 절차가 필요한 이유

- HTTP는 stateless (상태를 유지하지 않음)

- 너무 많은 것을 넣어 보내면 성능이 안좋기 때문에

- 인증절차 기본 흐름

1) 서버에 요청 보냄

2) 서버에서 유저 정보 포함하는 토큰 생성

3) response header에 토큰 올려서 보냄

4) 클라이언트에서 쿠키/로컬/메모리에 토큰 저장

5) 이후 요청 보낼 때 토큰을 같이 보내줌

-> 서버에서는 토큰 복호화해서 유저 정보 알 수 있음

 

* JWT란? (JSON Web Token) 모듈

- 당사자간 정보를 JSON 객체로 안전하게 전송하기 위한 컴팩트하고 독립적인 방식을 정의하는 개방형 표준 (RFC 7519)

- 디지털 서명이 되어있기 때문에 확인하고 신뢰가능

- 구조 (header / payload / verify signature)

1) 토큰 유효 판단

2) 유저 정보 판단

 

비교 : headers(클라이언트) + payload(클라이언트) + secrete text(서버)

 

* login router

users.js

router.post("/login", async (req, res, next) => {
  // req.body / password / emali
  try {
    // 존재하는 유저인지 체크
    const user = await User.findOne({ email: req.body.email });
    if (!user) {
      return res.status(400).send("Auth failed, email not found");
    }
    
    // 비밀번호가 올바른 것인지 체크
    const isMatch = await user.comparePassword(req.body.password);
    if (!isMatch) {
      return res.status(400).send("Wrong Password");
    }

    const payload = {
      userId: user._id.toHexString(),
    };
    // token을 생성
    const accessToken = jwt.sign(payload, process.env.JWT_SECRET, {
      expiresIn: "1h",
    });

    return res.json({ user, accessToken });
  } catch (error) {
    next(error);
  }
});

User.js

userSchema.methods.comparePassword = async function (plainPassword) {
  let user = this;
  const match = await bcrypt.compare(plainPassword, user.password);
  return match;
};

---

9. 페이지 이동할 때마다 인증이 되어있는지 체크하기

프론트

App.jsx

function App() {
  const dispatch = useDispatch();
  const isAuth = useSelector((state) => state.user?.isAuth);
  const { pathname } = useLocation();

  useEffect(() => {
    if (isAuth) {
      dispatch(authUser());
    }
  }, [isAuth, pathname, dispatch]);

  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<LandingPage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/register" element={<RegisterPage />} />
      </Route>
    </Routes>
  );
}

thunkfunciton.js

export const authUser = createAsyncThunk(
  "user/authUser",
  async (_, thunkAPI) => {
    try {
      const response = await axiosInstance.get("/users/auth");
      return response.data;
    } catch (error) {
      console.log(error);
      return thunkAPI.rejectWithValue(error.response.data || error.message);
    }
  }
);

axios.js

axiosInstance.interceptors.request.use(
  function (config) {
    config.headers.Authorization =
      "Bearer " + localStorage.getItem("accessToken");
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

- 요청 보내지기 전에 뭘 하고싶을때 여기서!

 

백엔드

users.js

router.get("/auth", auth, async (req, res, next) => {
  return res.json({
    id: req.user._id,
    email: req.user.email,
    name: req.user.name,
    role: req.user.role,
    image: req.user.image,
  });
});

미들웨어 auth.js

const jwt = require("jsonwebtoken");
const { User } = require("../models/User");

let auth = async (req, res, next) => {
  // 토큰을 request headers에서 가져오기
  const authHeader = req.headers["authorization"];

  // Bearer asdfja;sdfjasdlfjsdaf.asdfasf.adsfdasdfasf
  const token = authHeader && authHeader.split(" ")[1];
  if (token === null) return res.sendStatus(401);

  try {
    // 토큰이 유효한 토큰인지 확인
    const decode = jwt.verify(token, process.env.JWT_SECRET);
    const user = await User.findOne({ _id: decode.userId });

    if (!user) {
      return res.status(400).send("없는 유저입니다.");
    }

    req.user = user;
    next();
  } catch (error) {
    next(error);
  }
};

module.exports = { auth };

프론트 (응답)

userslice.js

      .addCase(authUser.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(authUser.fulfilled, (state, action) => {
        state.isLoading = false;
        state.userData = action.payload;
        state.isAuth = true;
      })
      .addCase(authUser.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.payload;
        state.isAuth = false;
        localStorage.removeItem("accessToken");
      });

---

10. NotAuthRoutes, ProtectedRoutes

auth에 따라 접근 막아주는 방법 

NotAuthRotues : 로그인 안된 사람이 로그인 한 페이지에 들어가려는 걸 막아주는 것

ProtectedRoutes : 로그인 된 사람이 로그인 안 한 페이지에 들어가려는 걸 막아주는 것

 

ProtectedRoutes.js

import React from "react";
import { Navigate, Outlet } from "react-router-dom";

const ProtectedRoutes = ({ isAuth }) => {
  return isAuth ? <Outlet /> : <Navigate to={"/lgoin"} />;
};

export default ProtectedRoutes;

App.jsx

<Route element={<ProtectedRoutes isAuth={isAuth} />}>
          <Route path="/protected" element={<ProtectedPage />} />
</Route>

- Outlet 이 ProtectedPage가 되는 것

---

11. Navbar & NavItem (logout)

NavBar

import React, { useState } from "react";
import { Link } from "react-router-dom";
import NavItem from "./Sections/NavItem";

const Navbar = () => {
  const [menu, setMenu] = useState(false);

  const handleMenu = () => {
    setMenu(!menu);
  };

  return (
    <section className="relative z-10 text-white bg-gray-900">
      {/* z index는 static 안되고 relative만 돼서 */}
      <div className="w-full">
        <div className="flex items-center justify-between mx-5 sm:mx-10 lg:mx-20">
          {/* logo */}
          <div className="flex items-center text-2xl h-14">
            <Link to="/">logo</Link>
          </div>

          {/* menu button */}
          <div className="text-2xl sm:hidden">
            <button onClick={handleMenu}>{menu ? "-" : "+"}</button>
          </div>

          {/* big screen nav-items */}
          <div className="hidden sm:block">
            {/* 사이즈가 sm보다 클때 block */}
            <NavItem />
          </div>
        </div>

        {/* mobile nav-items */}
        <div className="block sm:hidden">{menu && <NavItem />}</div>
      </div>
    </section>
  );
};

export default Navbar;

NavItem

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link, useNavigate } from "react-router-dom";
import { logoutUser } from "../../../store/thunkFunctions";

const routes = [
  { to: "/login", name: "로그인", auth: false },
  { to: "/register", name: "회원가입", auth: false },
  { to: "", name: "로그아웃", auth: true },
];

const NavItem = ({ mobile }) => {
  const isAuth = useSelector((state) => state.user?.isAuth);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const handleLogout = () => {
    dispatch(logoutUser()).then(() => {
      navigate("/login");
    });
  };
  return (
    <ul
      className={`text-md justify-center w-full flex gap-4 ${
        mobile && "flex-col bg-gray-900 h-full"
      } items-center`}
    >
      {routes.map(({ to, name, auth }) => {
        if (isAuth !== auth) return null;

        if (name === "로그아웃") {
          return (
            <li
              key={name}
              className="py-2 text-center border-b-4 cursor-pointer"
            >
              <Link onClick={handleLogout}>{name}</Link>
            </li>
          );
        } else {
          return (
            <li
              key={name}
              className="py-2 text-center border-b-4 cursor-pointer"
            >
              <Link to={to}>{name}</Link>
            </li>
          );
        }
      })}
    </ul>
  );
};

export default NavItem;

 

thunkfunction.js

export const logoutUser = createAsyncThunk(
  "user/logoutUser",
  async (_, thunkAPI) => {
    try {
      const response = await axiosInstance.post("/users/logout");
      return response.data;
    } catch (error) {
      console.log(error);
      return thunkAPI.rejectWithValue(error.response.data || error.message);
    }
  }
);

 

user.js

router.post("/logout", auth, async (req, res, next) => {
  try {
    return res.sendStatus(200);
  } catch (error) {
    next(error);
  }
});

 

userslice.js

.addCase(logoutUser.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(logoutUser.fulfilled, (state, action) => {
        state.isLoading = false;
        state.userData = initialState.userData;
        state.isAuth = false;
        localStorage.removeItem("accessToken");
      })
      .addCase(logoutUser.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.payload;
        toast.error(action.payload);
      });

---

12. token 만료 처리

axios.js

axiosInstance.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    if (error.response.data === "jwt expired") {
      window.location.reload();
    }
    return Promise.reject(error);
  }
);

리프레시 토큰을 사용하지 않기 때문에 만약 토큰이 만료된 경우 axios 요청에서 확인해서 토큰 만료된 경우 reload하여 

프론트 App.jsx의 if(isAuth) dispatch 부분에서 -> userslice.js의 authUser rejected에서 accessToken 지울 수 있도록 해줌