# 🔐 Next.js + JWT + Axios를 활용한 로그인 및 로그인 유지 기능

## 1. 개요
**JWT 기반의 로그인 및 로그인 유지 기능**을 구현하는 방법을 정리합니다.  

---

## 2. 로그인 시스템 개요
로그인 흐름은 다음과 같습니다.

- 사용자가 ID/PW를 입력하여 로그인 요청을 보냄
- 서버에서 **Access Token + Refresh Token 발급** 후 각각 쿠키, DB에 저장
- 이후 요청에서 **Axios Interceptor를 활용하여 Access Token 검증**
- 만료된 경우 **Refresh Token을 활용하여 Access Token 재발급**
- 서버사이드 렌더링에서 인증이 필요한 경우, `getServerSideProps`에서 토큰을 검증

---

## 3. Axios 설정
📂 **/client/lib/utils/axios.ts**
```typescript
import axios, { AxiosInstance, InternalAxiosRequestConfig } from 'axios';
import { checkToken } from '@utils/auth';

export const instance: AxiosInstance = axios.create({
  baseURL: process.env.REACT_APP_SERVER_URL,
  timeout: 10000,
  withCredentials: true, // CORS 요청 허용
});

// 요청 인터셉터 (토큰 검증)
instance.interceptors.request.use(
  async (config: InternalAxiosRequestConfig) => {
    if (!config.data) return config;

    const isFormData = config.data instanceof FormData;
    const checkTokenVal = isFormData
      ? config.data.get('checkToken') === 'true'
      : config.data.checkToken || false;
    const isCheckToken = config.data.isCheckToken || false;

    // 로그인 검증이 필요한 경우
    if (checkTokenVal && !isCheckToken) {
      try {
        const checkTokenRes = await checkToken();
        if (checkTokenRes) {
          const { userData } = checkTokenRes;

          if (userData) {
            if (isFormData) {
              config.data.append('userData', JSON.stringify(userData));
            } else {
              config.data.userData = userData;
            }
          }
        }
      } catch (err) {
        return Promise.reject(err);
      }
    }

    return config;
  },
);

export default instance;
```

✅ **Interceptor를 활용하여 권한이 필요한 요청을 보낼 때 자동으로 로그인 검증을 수행**합니다.

---

## 4. 토큰 검증 및 로그아웃 처리
📂 **/client/lib/utils/auth.ts**
```typescript
import axios from '@utils/axios';

// 토큰 검증 함수
export async function checkToken(cookie?: string): Promise<{
  userData: UserState;
  accessToken: string;
  refreshTokenHashIdx: string;
} | void> {
  const config: {
    data: { isCheckToken: boolean };
    headers?: { Cookie: string };
  } = { data: { isCheckToken: true } };

  if (typeof cookie === 'string') {
    config.headers = { Cookie: cookie };
  }

  try {
    const {
      data: { userData, accessToken, refreshTokenHashIdx },
    } = await axios.get('/apis/auths/check-token', config);

    return { userData, accessToken, refreshTokenHashIdx };
  } catch (err) {
    removeToken();
    throw err;
  }
}

// 로그아웃 시 토큰 제거
export async function removeToken() {
  try {
    await axios.delete('/apis/auths');
  } catch (err) {
    console.error(err);
  }
}
```

✅ **JWT를 검증하여 만료된 경우 자동으로 로그아웃을 수행**합니다.

---

## 5. SSR에서 로그인 필요 페이지 보호
📂 **/client/lib/utils/ssrRequireAuthentication.ts**
```typescript
import { GetServerSidePropsContext } from 'next';
import { serialize } from 'cookie';
import { checkToken } from '@utils/auth';

const ssrRequireAuthentication =
  (gssp?: (ctx: GetServerSidePropsContext, userData: UserState) => unknown) =>
  async (ctx: GetServerSidePropsContext) => {
    try {
      const checkTokenRes = await checkToken(ctx.req.headers.cookie);

      if (!checkTokenRes?.userData.isLogin) {
        return {
          redirect: {
            destination: '/401',
          },
        };
      }

      return {
        props: { userData: checkTokenRes.userData },
      };
    } catch (err) {
      return {
        redirect: {
          destination: '/401',
        },
      };
    }
  };

export default ssrRequireAuthentication;
```

✅ **로그인이 필요한 페이지에 접근 시 SSR에서 토큰을 검증하고, 미인증 시 401 페이지로 리다이렉트**합니다.

---

## 6. 로그인, 로그인검증 API 구현
📂 **/server/src/lib/apis/auths.ts**
```typescript
import { Router } from 'express';
import token from '@utils/jwt';
import { asyncErrorHandler } from '@middlewares/errorHandler';

const router = Router();

// 로그인
router.post(
  '/login',
  asyncErrorHandler(async (req, res) => {
    const { id, pw } = req.body;

    // mysql 회원정보 조회 -> 결과값 userRes로 가정

    if (userRes[0].length === 0) {
      return res.status(401).json({ message: '회원정보가 존재하지 않습니다.' });
    }

    const userData = userRes[0][0];
    const accessToken = token.access(userData.idx);
    const refreshToken = token.refresh(userData.idx);

    // refreshTokend의 경우 DB 저장 후 insert id 값을 암호화(refreshTokenHashIdx 변수사용) 하여 cookie에 저장

    res.cookie('accessToken', accessToken, { 
        httpOnly: true, 
        maxAge: 1000 * 60 * 15, // 15분 
    });
    rres.cookie('refreshTokenHashIdx', refreshTokenHashIdx, { 
        httpOnly: true, 
        maxAge: 1000 * 60 * 60 * 24, // 1일 
    });
    res.json({ userData });
  })
);

// 검증
router.get(
  '/check-token',
  asyncErrorHandler(async (req, res) => {
    const accessToken = req.cookies.accessToken;
    const refreshTokenHashIdx = req.cookies.refreshTokenHashIdx;

    if (!accessToken && !refreshTokenHashIdx) {
      return res.json({});
    }

    // accessToken 검증
    let userIdx = 0;
    const verifiedAccessToken = token.check(accessToken, 'access');
    if (verifiedAccessToken) {
      userIdx = verifiedAccessToken.userIdx;
    }

    // accessToken 검증안될경우 refreshToken 검증
    if (!userIdx) {
        // 암호화된 refreshToken PK로 refreshToken 조회 -> 결과값 refreshTokenRes로 가정
      if (refreshTokenRes[0].length === 0) {
        return res.status(401).json({ message: '유효하지 않은 토큰입니다.' });
      }

      const refreshToken = refreshTokenRes[0][0].refreshToken;
      const verifiedRefreshToken = token.check(refreshToken, 'refresh');
      if (!verifiedRefreshToken) {
        return res.status(401).json({ message: '유효하지 않은 토큰입니다.' });
      }
      userIdx = verifiedRefreshToken.userIdx;
    }

    if (!userIdx) {
      return res.status(401).json({ message: '유효하지 않은 사용자입니다.' });
    }

    // 토큰 검증하여 얻은 user PK로 유저 정보 DB 검색 결과값 -> userDataRes로 가정
    if (userDataRes[0].length === 0) {
      return res.status(404).json({ message: '사용자 정보를 찾을 수 없습니다.' });
    }

    // 로그인 되어있는경우 토큰 갱신
    const userData = userDataRes[0][0];
    const newAccessToken = token.access(userIdx);
    const newRefreshToken = token.refresh(userIdx);

    // refreshToken DB UPDATE

    res.cookie('accessToken', newAccessToken, { httpOnly: true, maxAge: 900000 });
    res.cookie('refreshTokenHashIdx', newRefreshTokenHashIdx, {
      maxAge: 1000 * 60 * 60 * 24, // 1일
      httpOnly: true
    });
    res.json({ userData, accessToken: newAccessToken, refreshTokenHashIdx });
  })
);
```

✅ **사용자 인증 후 JWT를 발급하고, Access Token과 Refresh Token을 각각 쿠키, DB에 저장**합니다.

---

## 7. JWT 발급 및 검증
📂 **/server/src/lib/utils/jwt.ts**
```typescript
import jwt from 'jsonwebtoken';

const ACCESS_SECRET = process.env.ACCESS_TOKEN_SECRET;
const REFRESH_SECRET = process.env.REFRESH_TOKEN_SECRET;

const token = {
  access: (userIdx: number) => jwt.sign({ userIdx }, ACCESS_SECRET, { expiresIn: '15m' }),
  refresh: (userIdx: number) => jwt.sign({ userIdx }, REFRESH_SECRET, { expiresIn: '1d' }),
  check: (tokenStr: string, type: 'access' | 'refresh') => {
    try {
      const secret = type === 'access' ? ACCESS_SECRET : REFRESH_SECRET;
      return jwt.verify(tokenStr, secret);
    } catch (error) {
      return null;
    }
  }
};

export default token;
```

✅ **JWT를 발급하고 유효성 검사를 수행하는 유틸리티 함수**입니다.


Next.js + JWT + Axios 로그인 및 로그인유지

# Next.js + Redux Toolkit으로 모달 상태 관리하기

Next.js에서 Redux Toolkit을 사용하여 글로벌 모달 상태를 관리하는 방법을 정리합니다. 이번 포스트에서는 **Redux Toolkit을 활용하여 모달을 중앙에서 제어하는 방식**을 구현합니다.

## 프로젝트 구조

```plaintext
/redux
  ├── store.ts
  ├── hooks.ts
  └── slices
      ├── index.ts
      └── modal.ts
/components
  ├── ModalContainer.tsx
  └── modals
      ├── LoginModal.tsx
      ├── SignUpModal.tsx
      └── AddImageModal.tsx
/pages
  └── _app.tsx
@types
  └── index.d.tsx
```
---

## 1. 모달 타입

### `index.d.ts`

```typescript
interface ModalState {
  type: string;
  props?: object;
}
```

---

## 2. `rootReducer` 설정

Redux의 `combineReducers`를 이용해 rootReducer를 생성합니다.

### `index.ts`
```typescript
import { combineReducers, UnknownAction } from '@reduxjs/toolkit';
import modal from '@redux/slices/modal';

export interface CombinedSliceState {
  modal: ModalState;
}

export default function rootReducer(
  state: CombinedSliceState,
  action: UnknownAction,
) {
  switch (action.type) {
    default: {
      const combinedReducer = combineReducers({
        modal,
      });
      return combinedReducer(state, action);
    }
  }
}
```

이제 `modal` 상태가 Redux Store에서 관리됩니다.

---

## 3. Redux Store 설정

Redux Store를 설정하여 전역 상태를 관리할 준비를 합니다.

### `store.ts`
```typescript
import { configureStore, Reducer } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';

import rootReducer, { CombinedSliceState } from '@redux/slices/index';

const createStore = () => {
  return configureStore({
    reducer: rootReducer as Reducer<CombinedSliceState>,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: false, // props로 callback fn을 전달해야 하는경우 대비
      }),
  });
};

const store = createStore();
const wrapper = createWrapper(createStore);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default wrapper;
```

Redux Store를 `configureStore`를 이용해 생성하며, Next.js에서 사용하기 위해 `next-redux-wrapper`를 적용합니다.

---

## 4. Redux Hooks 설정

React에서 Redux 상태를 쉽게 사용할 수 있도록 **커스텀 훅**을 생성합니다.

### `hooks.ts`
```typescript
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';

import type { RootState, AppDispatch } from '@redux/store';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
```

이렇게 하면 `useAppDispatch`와 `useAppSelector`를 사용하여 타입 안전한 Redux 상태 관리를 할 수 있습니다.

---

## 5. 모달 상태 Slice 생성

모달 상태를 관리하는 `modalSlice.ts` 파일을 만듭니다.

### `modal.ts`
```typescript
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const initialState: ModalState = {
  type: '',
  props: {},
};

export const modalSlice = createSlice({
  name: 'modal',
  initialState,
  reducers: {
    openModal: (state, action: PayloadAction<ModalState>) => {
      const { type, props } = action.payload;
      state.type = type;
      state.props = props;
    },
    closeModal: (): ModalState => {
      return initialState;
    },
  },
});

export const { openModal, closeModal } = modalSlice.actions;
export default modalSlice.reducer;
```

- `openModal`: 모달을 열고 모달의 타입과 props를 설정
- `closeModal`: 모달을 닫고 초기 상태로 변경

---

## 6. `ModalContainer` 컴포넌트 생성

`ModalContainer`는 전역적으로 모달을 관리하는 역할을 합니다.

### `ModalContainer.tsx`
```typescript
import styled from 'styled-components';
import Image from 'next/image';
import useModal from '@hooks/useModal';
import { useAppSelector } from '@redux/hooks';

import xBtn from '@public/images/x_btn.png'; // x버튼 이미지
import LoginModal from '@components/modals/LoginModal';
import SignUpModal from '@components/modals/SignUpModal';
import AddImageModal from '@components/modals/AddImageModal';

const MODAL_MAP: Record<string, ({ ...props }) => JSX.Element> = {
  login: LoginModal,
  signUp: SignUpModal,
  addImage: AddImageModal,
};

export default function ModalContainer() {
  const { closeModal } = useModal();
  const { type, props } = useAppSelector((store) => store.modal);

  const Modal = MODAL_MAP[type];
  if (!type || !Modal) return null; // 모달정보 없을경우 출력하지 않음

  return (
    <>
      <ModalContainerSt>
        <XBtnSt onClick={closeModal}>
          <Image src={xBtn} alt="close button" />
        </XBtnSt>
        <Modal {...props} />
      </ModalContainerSt>
      <ModalBackgroundSt onClick={closeModal} />
    </>
  );
}
```

---

## 7. `_app.tsx`에서 Redux 적용

Next.js에서 Redux Provider와 ModalContainer를 적용합니다.

### `_app.tsx`
```typescript
import type { AppProps } from 'next/app';
import { Provider } from 'react-redux';
import wrapper from '@redux/store';
import ModalContainer from '@components/ModalContainer';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={wrapper.store}>
      <Component {...pageProps} />
      <ModalContainer />
    </Provider>
  );
}

export default wrapper.withRedux(MyApp);
```

이제 Redux Store가 Next.js 전역에 적용되며, `ModalContainer`가 모든 페이지에서 동작합니다.

---

## 마무리

`openModal({ type: 'login' })` 같은 호출을 통해 쉽게 모달을 띄울 수 있습니다.


게시글 리스트

Next.js + JWT + Axios 로그인 및 로그인유지

Next.js + Redux Toolkit으로 모달 관리하기