Ruby on Rails + Next.jsでログイン状態保持

実現したいこと

画面を再読み込みしてもログイン状態を保持していたい

前提

バックエンドにrails + devise_token_auth、フロントエンドにreact を使ってアプリを開発しているのですが、画面をリロードするとログイン状態ではなくなります。

例
ログインに必要な情報をフォームに入力。
ログインボタンを押し、ユーザーのマイページに遷移。
その時点では先ほど入力した情報に基づいて、ユーザーの名前やメールアドレスは表示されている。

こちらでログインは成功しているはずなのですが、画面を再読み込みするとまたログイン前の状態に戻ってしまう。

一部省略していますが、下記のコードが該当のソースコードです

sessionsコントローラー

class Api::V1::Auth::SessionsController < ApplicationController def index if current_api_v1_user render json: { is_login: true, data: current_api_v1_user } else render json: { is_login: false, message: "ユーザーが存在しません" } end end end

registrationsコントローラー

class Api::V1::Auth::RegistrationsController < DeviseTokenAuth::RegistrationsController private def sign_up_params params.permit(:name, :email, :password, :password_confirmation) end end

ルーティング

Rails.application.routes.draw do namespace :api do namespace :v1 do mount_devise_token_auth_for 'User', at: 'auth', controllers: { registrations: 'api/v1/auth/registrations' } namespace :auth do resources :sessions end end end end

APIの取得

// src/app/auth.js import axios from "axios" import Cookies from "js-cookie"; export const signIn = (params) => { return axios.post('http://localhost:4000/api/v1/auth/sign_in', params); }; export const getCurrentUser = () => { if(!Cookies.get('_uid') || !Cookies.get('_client') || !Cookies.get('_access_token')) return return axios.get('http://localhost:4000/api/v1/auth/sessions', {headers: { 'uid': Cookies.get('_uid'), 'client': Cookies.get('_client'), 'access_token': Cookies.get('_access_token') }}); };

サインインページ

// src/app/sign_up/page.jsx 'use client' import Cookies from 'js-cookie'; import { useRouter } from 'next/navigation'; import React, { useContext, useState } from 'react' import { AuthContext } from 'src/Provider/_auth'; import { signIn } from 'src/auth'; const page = () => { const { setIsSignedIn, setCurrentUser } = useContext(AuthContext); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const router = useRouter(); const handleSignIn = async (e) => { e.preventDefault(); const params = { email: email, password: password }; try { const res = await signIn(params); console.log(res); if (res.status == 200) { Cookies.set('_uid', res.headers['uid']); Cookies.set('_client', res.headers['client']); Cookies.set('_access_token', res.headers['access_token']); setIsSignedIn(true); setCurrentUser(res.data.data); router.push('/user'); }; } catch (err) { console.log(err); }; }; return ( <div> <form onSubmit={handleSignIn}> <div> <label htmlFor="email">Eメール</label> <input type="email" value={email} onChange={e => setEmail(e.target.value)} /> </div> <div> <label htmlFor="password">パスワード</label> <input type="password" value={password} onChange={e => setPassword(e.target.value)} /> </div> <button>ログイン</button> </form> </div> ) } export default page

ログインユーザーのマイページ

// src/app/user/page.jsx 'use client' import React, { useContext } from 'react' import { AuthContext } from 'src/Provider/_auth' const User = () => { const { isSignedIn, currentUser } = useContext(AuthContext); return ( <div> { isSignedIn && currentUser ? <> <h2>こんにちは {currentUser?.name} さん</h2> <p>メールアドレス: {currentUser?.email}</p> </> : <h2>Not Current User</h2> } <div> ) } export default User

補足情報（FW/ツールのバージョンなど）

react・・・v18
next.js・・・v13
rails・・・v7

読みづらいかもしれませんが、ご協力お願いします。
何か足りない情報がございましたら、ご報告ください。
よろしくお願いします。