【DeviseTokenAuth】認証トークンの送受信に Cookie を使用する方法【Rails】

DeviseTokenAuthの設定を変更する

認証トークンの送受信にCookieを使用するためにcookie_enabledをtrueにします。
cookieに関する設定はcookie_attributesに記述します。
設定項目については以下を参照してください。

devise_token_auth.rb

DeviseTokenAuth.setup do |config|
 # ...

  config.cookie_enabled = true

  config.cookie_attributes = {
    http_only: true,
    secure: true,
    same_site: "None"
  }

 # ...
end

cookie_attributesにexpiresを設定するとサーバー起動時に設定されてしまうため、set_cookieの処理を変更してヘッダーのexpiryの値が設定されるようにする必要があります。

参考

  def set_cookie(auth_header)
    header_expiry = auth_header["expiry"]
    cookie_options = DeviseTokenAuth.cookie_attributes.merge(
      value: auth_header.to_json,
      expires: Time.zone.at(header_expiry.to_i)
    )
    cookies[DeviseTokenAuth.cookie_name] = cookie_options
  end

cookiesを使用可能にする

APIモードではcookiesが使用できないため、使用可能にするためにapplication_controller.rbに以下を追記します。

application_controller.rb

class ApplicationController < ActionController::API
  include ActionController::Cookies

# ...
end

フロントエンドのfetchを変更する

フロントエンドでfetchの処理にcredentials: 'include'を以下のように追加します。
credentials: 'include'を設定するとcookieが送受信されるようになります。

export async function login({ email, password }) {
  try {
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_API_BASE_URL}/v1/auth/sign_in`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email,
          password,
        }),
        credentials: 'include',
      }
    )
// ...

CORSの設定を変更する

Railsのconfig/initializers/cors.rbにcredentials: trueを追記して、originsに具体的なオリジンを記述します。

config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "localhost:3000"

    resource "*",
             headers: :any,
             methods: %i[get post put patch delete options head],
             credentials: true
  end
end

参考