jwt로 로그인 기능 만들기 (React + Rails )

{
  "alg": "HS256",
  "typ": "JWT"
}

{
  "https://velog.io/@khy226": true
}

{
  "username": "khy"
}

{
  // 등록된 클레임
  "sub": "23442s5b-1adf-4sff-sdf939-6sdf0c0b91f7", // 토큰 제목
  "iss": "https://cognito-idp.ap-northeast-2.amazonaws.com/ap-northeast-2_~~", // 토큰 발급자
  "iat": 1925144429, // 토큰이 발급된 시간
  "exp": 1925148029, // 토큰의 만료 시간
  "jti": "89adf5-e434-w20d-3432f-456c4adf73", // JWT의 고유 식별자
  // 공개 클레임
  "https://velog.io/@khy226": true,
  // 비공개 클레임
  "username": "khy"
  "event_id": "893a4c1b-3d67-4b8d-a57f-4ed8bcf90c6c",
  "token_use": "access",
  "scope": "aws.cognito.signin.user.admin",
  "auth_time": 1625144429,
  "client_id": "79307ehbtr2o3ln1ip8dcb9v6p",
}

{
  "Authorization": "Bearer {JWT token 값}"
}

# JWT 인증 구현
gem 'jwt'
gem "jwt_sessions"

class JsonWebToken
  def self.decode(token)
    return HashWithIndifferentAccess.new(JWT.decode(token, Rails.application.credentials.secret_key_base)[0])
  rescue
    nil
  end
end

require 'json_web_token'

class GraphqlController < ApplicationController
   include JWTSessions::RailsAuthorization
   rescue_from JWTSessions::Errors::Unauthorized, with: :not_authorized

  def execute
    variables = prepare_variables(params[:variables])
    query = params[:query]
    operation_name = params[:operationName]
    # 아래에 생성한 current_user와 auth_refresh를 넘겨줌
    context = {
      current_user: current_user,
      auth_refresh: auth_refresh
    }
    # graphql 파일에서 처리
    result = BackendSchema.execute(query, variables: variables, context: context, operation_name: operation_name)
    render json: result
  rescue StandardError => e
    raise e unless Rails.env.development?
    handle_error_in_development(e)
  end

  private

  ## 1. 헤더에 있는 정보 중, Authorization 내용(jwt 토큰) 추출
  ## Authorization 값은 'Bearer ${토큰}'으로 전달되기에 공백 기준 두번 째 값을 가져옴
    def http_token
      http_token ||= if request.headers['Authorization'].present?
        request.headers['Authorization'].split(' ').last
      end
    end

    ## 2. auth_token은 lib/json_web_token.rb 내의 decode 메소드에서 진행됨.
    ## http 헤더로 가져온 토큰을 디코드 함.
    def auth_token
      auth_token ||= JsonWebToken.decode(http_token)
    end


## 3. 위에서 생성한 auth_token 에서 user_id를 통해 현재 유저를 가져옴
  def current_user
    begin
      authorize_access_request!
      current_user ||= User.find(auth_token["user_id"])
    rescue StandardError => e
      current_user = nil
    end
  end


## 4. jwt token 유효기간이 만료되었을 때 사용되는 refresh_token
## http_token과 동일하게 헤더로 전달된다.
    def refresh_token
      refresh_token ||= if request.headers['X-Refresh-Token'].present?
        request.headers['X-Refresh-Token']
      end
    end

## 5. 위 refresh_token을 JsonWebToken.decode 메서드로 디코딩함
    def auth_refresh
      auth_refresh ||= JsonWebToken.decode(refresh_token)
    end
end

const headerTokenConfig = (config: any) => {
  const method = config.method.toUpperCase()
  if (method !== 'OPTIONS') {
    const { csrf, token } = getToken()
    config.headers = {
      ...config.headers,
      'X-CSRF-TOKEN': csrf,
      Authorization: `Bearer ${token}`,
    }
  }
  return config
}

const API = axios.create({
  baseURL: API_URL,
  timeout: 10000,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    Authorization: 'Bearer *',
  },
})

API.interceptors.request.use(headerTokenConfig)

export const postQuery = (query: any) => API.post('/graphql', { query })

// login.tsx 로그인 폼에서 계정 정보 입력 시 실행

const onSubmit = async (inputValues: any) => {
  // graphql의 signInUser 메서드 실행
  const query = SignInUserQuery(inputValues.email, inputValues.password)
  const response = await postQuery(query)
  if (response.data?.data?.signInUser && response.data?.data?.signInUser?.token) {
    await toast('로그인 되었습니다.')
    await authenticateUser(response?.data?.data?.signInUser)
    await router.push('/')
  } else {
    if (response?.data?.data?.signInUser?.errors) {
      toast(response?.data?.data?.signInUser?.errors)
    } else {
      toast('문제가 생겼습니다. 다시 시도해주세요.')
    }
  }
}

// query/user.ts
export const SignInUserQuery = (email: string, password: string) => `mutation {
  signInUser(email: "${email}", password: "${password}") {
    refresh
    token
    csrf
    errors
  }
}`

module Mutations
  module Users
    class SignInUser < BaseMutation
      null true

      argument :email, String, required: true
      argument :password, String, required: true

      # return type from the mutation
      field :token, String, null: true
      field :csrf, String, null: true
      field :errors, String, null: true
      field :refresh, String, null: true

      def resolve(**attributes)
        if attributes
        # 사용자 확인
          user = User.find_for_database_authentication(email: attributes[:email])
          return unless user

          if user&.valid_password?(attributes[:password])
          # payload 및 refresh_payload 생성
            payload = { user_id: user.id, email: user.email, created_at: user.created_at, name: user.name, access_exp: 1.hour.from_now.to_i, refresh_exp: 2.weeks.from_now.to_i }
            refresh_payload = { user_id: user.id }
            # JWTSession으로 jwt 토큰 발급
            session =  JWTSessions::Session.new(payload: payload, refresh_payload: refresh_payload)
            tokens = session.login
			# 발급된 토큰에서 필요한 정보들 넘겨주기
            { token: tokens[:access], csrf: tokens[:csrf], refresh: tokens[:refresh], errors: "성공적으로 로그인 되었습니다." }
          else
            { errors: "비밀번호 오류입니다." }
          end
        else
          { errors: "모든 필드를 입력해주세요." }
        end
      end
    end
  end
end

const onSubmit = async (inputValues: any) => {
  const query = SignInUserQuery(inputValues.email, inputValues.password)
  const response = await postQuery(query)
  if (response.data?.data?.signInUser && response.data?.data?.signInUser?.token) {
    await toast('로그인 되었습니다.')
    // 사용자 정보 저장, 토큰 저장
    await authenticateUser(response?.data?.data?.signInUser)
    await router.push('/')
  } else {
    if (response?.data?.data?.signInUser?.errors) {
      toast(response?.data?.data?.signInUser?.errors)
    } else {
      toast('문제가 생겼습니다. 다시 시도해주세요.')
    }
  }
}

const [currentUser, setCurrentUser] = useRecoilState<AuthState>(
    authSelector as any
  );

  const authenticateUser = ({ token, csrf, refresh }: Token) => {
    saveToken({ token, csrf, refresh });
    setCurrentUser({
      token,
      csrf,
      refresh,
      currentUser: getCurrentUserFromToken(token),
    });
  };

useEffect(() => {
  if (currentUser?.currentUser) {
    if (
      // token invalid 이고, refresh token 까지 timeout면 리셋
      !(
        currentUser?.token &&
        currentUser.refresh &&
        checkTokenValid(currentUser?.token) &&
        checkRefreshValid(currentUser?.refresh)
      )
    ) {
      unAuthenticateUser()
    } else if (
      !(currentUser?.token && checkTokenValid(currentUser?.token)) &&
      currentUser.refresh &&
      checkRefreshValid(currentUser.refresh)
    ) {
      // refresh token이 유효하면 refresh api 호출
      refreshUserApi()
    }
  }
  // refreshUserApi();
}, [currentUser])

// refresh api 호출
const refreshUserApi = async () => {
  const response = await refreshQuery(refreshUserQuery())
  if (response.data?.data?.refreshUser && response.data?.data?.refreshUser?.token) {
    authenticateUser(response?.data?.data?.refreshUser)
  }
}

const refreshTokenConfig = (config: any) => {
  const method = config.method.toUpperCase()
  if (method !== 'OPTIONS') {
    const { csrf, token, refresh } = getToken()
    config.headers = {
      ...config.headers,
      'X-CSRF-TOKEN': csrf,
      Authorization: `Bearer ${token}`,
      'X-Refresh-Token': refresh,
    }
  }
  return config
}

const RefreshAPI = axios.create({
  baseURL: API_URL,
  timeout: 10000,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    Authorization: 'Bearer *',
  },
})

RefreshAPI.interceptors.request.use(refreshTokenConfig)

// api.ts
export const refreshQuery = (query: any) => RefreshAPI.post('/graphql', { query })

export const refreshUserQuery = () => `mutation {
  refreshUser{
    refresh
    token
    csrf
    errors
  }
}`

  def execute
    variables = prepare_variables(params[:variables])
    query = params[:query]
    operation_name = params[:operationName]
    # refresh 토큰 추가
    context = {
      current_user: current_user,
      auth_refresh: auth_refresh
    }
    result = BackendSchema.execute(query, variables: variables, context: context, operation_name: operation_name)
    render json: result
  rescue StandardError => e
    raise e unless Rails.env.development?
    handle_error_in_development(e)
  end

	private

	def refresh_token
      refresh_token ||= if request.headers['X-Refresh-Token'].present?
        request.headers['X-Refresh-Token']
      end
    end

    def auth_refresh
      auth_refresh ||= JsonWebToken.decode(refresh_token)
    end

module Mutations
  module Users
    class RefreshUser < BaseMutation
      null true

      # return type from the mutation
      field :token, String, null: true
      field :csrf, String, null: true
      field :errors, String, null: true
      field :refresh, String, null: false

      def resolve(**attributes)
        if attributes
			# refresh token 디코드 한 정보 중, user_id로 사용자 있는지 확인
          user = User.find_by_id(context[:auth_refresh]["user_id"]) if context[:auth_refresh].present?
          return unless user
          # 사용자가 있다면, 다시 payload를 만들어 jwt 토큰 밝급
          if user&.present?
            payload = { user_id: user.id, email: user.email, created_at: user.created_at, name: user.name, access_exp: 1.hour.from_now.to_i, refresh_exp: 2.weeks.from_now.to_i }
            refresh_payload = { user_id: user.id }
            session =  JWTSessions::Session.new(payload: payload, refresh_payload: refresh_payload)
            tokens = session.login
			# 발급된 토큰 정보를 프론트로 보낸다.
            { token: tokens[:access], csrf: tokens[:csrf], refresh: tokens[:refresh], errors: "성공적으로 로그인 되었습니다." }
          else
            { errors: "사용자가 존재하지 않습니다." }
          end
        else
          { errors: "모든 필드를 입력해주세요." }
        end
      end
    end
  end
end