# 🔐 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 로그인 및 로그인유지

FrontEnd

TypeScript

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

김동환