jwt 토큰 사용하기

Nextjs

 

사용자가 소셜 로그인 버튼을 클릭하면 인가코드를 받아서 백앤드에게 전송한다.

그리고 나는 백앤드로부터 회원가입이 되어있는 사용자라면 응답으로 accessToken을 받게 된다. 

 

여기서 응답값으로 받은 accessToken은 jwt형태로 받게 된다. 

 

그럼 하루종일 땅파서 드디어.. 하핫..

정리해보자.

 

1. 응답값으로 받은 토큰을 axios를 이용해 디코딩 하는 서버단에 전달해주어야한다.

2. jsonwebtoken 라이브러리를 이용해 jwt를 디코딩하고 내용물을 추출해야한다. 

3. api 핸들러를 이용해 클라이언트 요청을 받아 jsonwebtoken 에 전달해 jwt를 추출할 수 있도록 해준다.

1. axios로 sever(nextjs)에 값 전달하기.

>> src/app/api/decodedAxios.ts

import axios from "axios";

export const decodeTokenOnServer = async (token: string) => {
  try {
    const response = await axios.post("/api/decode/decodeToken", { token });
    const data = response.data;

    if (data.success) {
      sessionStorage.setItem("user", JSON.stringify(data.data));
    } else {
      console.error("Token decoding failed:", data.error);
    }
  } catch (error) {
    console.error("Error decoding token:", error);
  }
};

 

 

로그인 성공 시 토큰을 받으면 decodeTokenOnServer(token) 호출과 함께 token 전

 

2 . jsonwebtoken 라이브러리를 이용해 jwt 디코딩 및 추출

설치 명령어
-yarn add @types/jsonwebtoken
-yarn add jsonwebtoken

>> src/utils/jwt.ts

import jwt from "jsonwebtoken";

export const decodeToken = (token: string) => {
  try {
    // 토큰 디코딩
    const decoded = jwt.decode(token);
    // 디코딩 성공
    return { valid: true, decoded };
  } catch (error) {
    // 디코딩 실패
    console.error("Token decoding error:", error);
    return { valid: false, error };
  }
};

 

 

 

3 . api 핸들러로 클라이언트 요청 받아 decodeToken 를 이용해 추출

import { NextApiRequest, NextApiResponse } from "next";
import { decodeToken } from "@/utils/jwt";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const { token } = req.body;

  if (!token) {
    return res.status(401).json({ success: false, error: "No token provided" });
  }
  const { valid, decoded, error } = decodeToken(token);
  if (valid) {
    // 유효한 토큰, 디코딩된 정보 사용
    res.status(200).json({ success: true, data: decoded });
  } else {
    //여기에 refreshToken 발급 요청 코드 넣기
    // 유효하지 않은 토큰
    return res.status(401).json({ success: false, error: "Invalid token" });
  }
}