ReactとRails-apiでCookieを利用した通信を行いたい

Question

現在、ポートフォリオ を作成中です。
ReactとRails(apiモード)で通信をさせているのですが、かれこれ２−３日詰まってます

やりたいこと　

ReactとRailsでCookieを利用した通信をしたい　
クライアント側（React側）からcookieを送信して、railsのsessionにユーザー情報を格納したい

試したこと

Corsの設定やsession_storeなどのRailsの設定はいろんな記事を参考にして設定済

loginメソッドで通信時にはレスポンスcookieが帰ってきていることを確認できるのですが、
その後の認証ではリクエストCookieが送れておらず？Rails側で認証できていません。

初回のloginの際には、正しい挙動でCookieも帰ってきている（レスポンスCookie）（session情報も返すようにしている）

しかし、マイページ遷移後のlogged_in（apiに認証しているかたたきにいくgetメソッド）ではcookieの表記が見当たらず、
railsでsession配列にはいらずcurrent_userがnil状態になります。（リクエストCookieがない）

該当ソースコード

// importなど省略
// useEffectでapiを叩きに行くhooksです

const CheckAuth = useCallback(async () => {
    await axios
      .get(LoggedinUrl, { withCredentials: true })
      .then((response) => {
        if (response.data.status === 200) {
          setLoginUser(response.data);
          setLoginState(true);
        }
        // 認証できなかった時のエラー
        else if (response.data.status === 401) {
          setLoginUser(null);
          setLoginState(false);
          showMessage({ title: `${response.data.errors}`, status: 'error' });
          history.push('/login');
        }
        // うまくgetできなかった時のエラー
      })
      .catch(() => {
        showMessage({ title: '認証が確認できません、再度ログインし直してください', status: 'error' });
        setLoginUser(null);
        setLoginState(false);
        history.push('/login');
      });

↓railsでcreateメソッドはログインするためのメソッド、logged_in?はログイン状態を確認するメソッド

# 
module Api
  module V1
    class SessionsController < ApplicationController
      before_action :current_user, only: [:logged_in?]

      def create
        user = User.find_by(email: session_params[:email])

        if user && user.authenticate(session_params[:password])
          session[:user_id] = user.id
          render json: {
                  status:200,
                  logged_in: true,
                  user: user,
                  session: session { user_id },
                }, methods: [:avatar_url]
        else
          render json: { status: 401, errors: ["正しいメールアドレス・パスワードを入力して下さい"], user: user}
        end
      end

      def logged_in?
        #おろらく@current_userがnilになっているため、帰ってこない
        @current_user ||= User.find_by(id: session[:user_id]) if session[:user_id]
        if @current_user
          render json: {
                  status: 200,
                  logged_in: true,
                  user: current_user,
                }, methods: [:avatar_url]
        else
          render json: { 
            status:401,
            logged_in: false,
            # errors: @current_user.errors.full_messages 
            session: session[:user_id],
            user: @current_user,
            errors: ["ログインしてください"] 
          }
        end
      end
      private

      def session_params
        params.require(:user).permit(:email, :password)
      end
    end
  end
end

class ApplicationController < ActionController::API
  include ActionController::Helpers
  skip_before_action :verify_authenticity_token, raise: false
  # Railsが認証トークンを使用しないように
  helper_method :login, :current_user

  # セッションに引数のuserのidを格納する
  def login(user)
    session[:user_id] = user.id
  end

  def current_user
    if session[:user_id]
      @current_user ||= User.find(session[:user_id])
    end
  end
end

if Rails.env == 'environment'
  Rails.application.config.session_store :cookie_store,key:'_cooklog_session',
  # same_site::none,
  secure: false,
  domain:'localhost:3001'
else
  Rails.application.config.session_store :cookie_store,key:'_cooklog'
end

その他

cookieのsecure属性やhttponlyのオプションなどが関係しているのでしょうか？

参考記事

https://qiita.com/kurawo___D/items/d5257e69bcb300908687#1appjs%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AB%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AE%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E7%8A%B6%E6%85%8B%E3%81%8C%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%82%92%E5%AE%9A%E7%BE%A9%E3%81%99%E3%82%8B

追記

コンソールには下記のようなエラーが出ていますが、これはuserというステートに上記で入れる予定のuser情報がnull
のため、出ているエラーです。
ステートの値がnullなので、レンダリングするビューの値がおかしくなり、画面が真っ白になります
質問が解消されれば共連れで解消するはずです。

Mypage.jsx:92 Uncaught TypeError: Cannot read properties of null (reading 'user')
    at Mypage.jsx:92:1
    at renderWithHooks (react-dom.development.js:14985:1)
    at updateFunctionComponent (react-dom.development.js:17356:1)
    at updateSimpleMemoComponent (react-dom.development.js:17215:1)
    at beginWork (react-dom.development.js:19140:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js:22293:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at flushSyncCallbackQueue (react-dom.development.js:11309:1)
    at scheduleUpdateOnFiber (react-dom.development.js:21893:1)
    at dispatchAction (react-dom.development.js:16139:1)
    at useAuthCheck.js:30:1
    at async useAuthCheck.js:21:1

追記

ログイン後　画面が白くなり、コンソールにエラーがでます。
ただ、推測ですが画面の

useEffectのcheckAuthをコメントアウトした場合

このように意図した表示になります
（いま出ているエラーは別のエラーだと考えています）

追記

同様にrailsの他のcurrent_userを使うメソッドでエラーが出ています。
（原因は同じだと思われます）

追記

loginメソッド（初回ログイン）時のリクエストヘッダー

リクエスト URL: http://localhost:3000/api/v1/login
リクエスト メソッド: POST
ステータス コード: 200 OK
リモート アドレス: [::1]:3000
参照ポリシー: strict-origin-when-cross-origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD
Access-Control-Allow-Origin: http://localhost:3001
Access-Control-Expose-Headers
Access-Control-Max-Age: 7200
Cache-Control: max-age=0, private, must-revalidate
Content-Type: application/json; charset=utf-8
ETag: W/"a2d15844da7ee30a59563aa8ba15c96b"
Referrer-Policy: strict-origin-when-cross-origin
Set-Cookie: _session_id=3sELA%2Ft%2BfW%2FtPZp30qki34bqKxl9O2YMpndIajOsR7ldUYouceOFC4srRNK%2BMo3Hs89zMnBsATw%2B3bDKV1W1dZL9BEbDNOkgPTQowMAAZ0ekRTzjuTHATJMasqSaInXoX50xULu%2BONMO%2FEYecfgpoGvDYKu9EgxX1RnO6Sj6t4R6%2BTg92%2BYH5eojmKTvRQqtJPcjW4a3XFess70RxzBLPho2giFIBIM%3D--j4R2F%2BRxIz0kVE6v--G%2FbF78BFI9eF8yT1E3yvcQ%3D%3D; path=/; HttpOnly; SameSite=None
Transfer-Encoding: chunked
Vary: Origin
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-Request-Id: 5c7c3820-d14c-42e6-960f-97f9801cc508
X-Runtime: 0.435988
X-XSS-Protection: 1; mode=block
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 59
Content-Type: application/json
Host: localhost:3000
Origin: http://localhost:3001
Referer: http://localhost:3001/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="101", "Google Chrome";v="101"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36

logged_inメソッド（認証確認）のリクエストヘッダー

リクエスト URL: http://localhost:3000/api/v1/logged_in
リクエスト メソッド: GET
ステータス コード: 200 OK
リモート アドレス: [::1]:3000
参照ポリシー: strict-origin-when-cross-origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD
Access-Control-Allow-Origin: http://localhost:3001
Access-Control-Expose-Headers
Access-Control-Max-Age: 7200
Cache-Control: max-age=0, private, must-revalidate
Content-Type: application/json; charset=utf-8
ETag: W/"3c03e572d8a333aa7c5f90cfc90172d5"
Referrer-Policy: strict-origin-when-cross-origin
Vary: Origin
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-Request-Id: 2bb9d371-3fa9-4555-8f03-68e0359772e9
X-Runtime: 0.330237
X-XSS-Protection: 1; mode=block
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost:3000
If-None-Match: W/"3c03e572d8a333aa7c5f90cfc90172d5"
Origin: http://localhost:3001
Referer: http://localhost:3001/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="101", "Google Chrome";v="101"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36

Comments

[ockeghem]

開発者ツールのコンソール（Console）でエラー等が表示されていませんか? 表示されていたら質問に追記してください。

[kiyomasa]

ご確認いただきありがとうございます。追記しました。他必要なことがあればお知らせください。

[ockeghem]

追記ありがとうございます。ブラウザ（Google Chrome等）の開発者ツールの「コンソール」または「Console」にはエラーは表示されていませんか?

[kiyomasa]

一旦、すべて追記しました。よろしくお願いします。。。

[ockeghem]

すみません、明確に書いてなかったですが、ログイン処理ではブラウザの開発者ツールのコンソールにはエラーは表示されていませんか?

[kiyomasa]

すみません、ログイン処理では、コンソール上にエラーは見つかりませんでした。
一応追記はしましたが、current_userがnilのせいで別の所がエラーになっており、それが表示されている形です。

[ockeghem]

ブラウザの開発者ツールで、login処理のネットワークタブにて「ヘッダー」の箇所を見せてください。Cookieがセットされていない原因を知るには、ヘッダを見る必要があります。

[kiyomasa]

追記いたしました。他必要なものあればお知らせください。

Answer 1

コメントでのやりとりありがとうございます。原因がわかりました。
添付いただいた2枚目の画像のCookieのSameSite欄の「None」の前にⓘという記号がついています。ここにマウスカーソルをあててしばらくすると、以下のようなエラーメッセージが表示されるはずです（日本語訳されているかもしれません）。

この意味は、SameSite=NoneになっているがSecure属性がないということで、Google ChromeではCookieにSameSite=Noneが指定されている場合は、Secure属性もついていないと、Cookieが受理されないのです。
では、Secure属性をつければよいかというと、そうではありません。Secure属性をつけたばあいは、HTTPSでないとCookieが送信されなくなります。
なので、正解は、「SameSite属性を何も指定しない」ですが、Google Chromeの場合SameSite属性を指定しない場合SameSite=Laxと解釈されるため、SameSite属性の指定を「しない」方法がよくわからない場合は、SameSite=Laxを指定する案も考えられます。

さしあたりすぐに動かしたい場合は、Google Chromeではなく、Firefoxを使えば、現在のところ上記のような制限はないため、この箇所については問題なくなると予想します。

Comments

[kiyomasa]

わかりやすい回答をありがとうございます。
クロームの問題だったんですね、SameSite＝LAXにするとPost通信や画像のやり取りができなくなるらしいので、ひとまずFireFoxをDLしてやってみたところ、
Samesite属性ないよと警告は出るものの、問題なく動きました。
お忙しいところご助力いただき、本当にありがとうございました。