Nextjs 13: Как передать сеанс клиента на сервер

Question

- Контекст

Я создаю небольшое приложение, используя новыйappDirот Nextjs13. Я хочу иметь возможность аутентифицироваться с помощью Pocketbase.

Итак, у меня есть следующий код для входа:

      'use client';
import {useRouter} from "next/navigation";
import {useState} from "react";
import PocketBase from 'pocketbase';

const pb = new PocketBase('https://pockettest.lightin.io');

export default function Page() {

    const [email, setEmail] = useState("[e-mail]")
    const [password, setPassword] = useState("123456")
    
    const handleSubmit = async (e: { preventDefault: () => void; }) => {
        e.preventDefault()
        if (
            email !== undefined
            && password !== undefined
        ) {
            
            const authData = await pb.collection('users').authWithPassword(
                email.toString(),
                password.toString(),
            );

            // after the above you can also access the auth data from the authStore
            console.log(pb.authStore.isValid);
            console.log(pb.authStore.token);
        }

    }

    return (
        <div className="flex items-center justify-center h-screen">
            <form onSubmit={handleSubmit} method="post" className="bg-white p-6 rounded-lg shadow-md">
                <h2 className="text-lg font-medium mb-4">Register</h2>


                <div className="mb-4">
                    <label htmlFor="email" className="block font-medium mb-2">Email :</label>
                    <input onChange={e => setEmail(e.target.value)}
                           type="text"
                           name="email"
                           value={email.toString()}
                           required
                           className="border border-gray-400 p-2 w-full"
                    />
                </div>

                <div className="mb-4">
                    <label htmlFor="password" className="block font-medium mb-2">Password :</label>
                    <input onChange={e => setPassword(e.target.value)}
                           type="password"
                           name="password"
                           value={password.toString()}
                           required
                           className="border border-gray-400 p-2 w-full"
                    />
                </div>
                
                <button className="bg-blue-500 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-full">
                    Submit
                </button>
            </form>
        </div>
    )
}

Здесь я использую Pocketbase SDK для связи с серверной частью. Этот метод автоматически регистрирует сессию пользователя с его токеном в браузере благодаряpb.authstore.

- Проблема

Проблема в том, что поскольку сеанс хранится в браузере, пользователь «подключен» только на стороне клиента. Когда сервер пытается предварительно отобразить страницу, вызовы API (с pocketbase) завершаются ошибкой, поскольку у сервера нет токена.

Как я могу передать сеанс PocketBase на сервер, чтобы иметь возможность использовать ServerComponents?

Если у вас есть идеи, спасибо.