Nextjs - Get protected reuqests from getServerSideProps - reactjs

Question

I am working with next js app. For backend I use laravel with sanctum autentication. I want to implement credential authentication (username, password) using laravel sanctum and nextjs SPA app. All these working with client side. But I can not access to protected request in getServerSideProps. It requires crsf token.
pages/login.js
import React, { useState } from 'react';
import api from '#/util/api';
import { logIn } from '#/util/auth';
const LogInPage = () => {
const [formInput, setFormInput] = useState({ username: '', password: '' });
const signIn = (e) => {
e.preventDefault();
api()
.get('/sanctum/csrf-cookie')
.then(() => {
api()
.post('/api/login', formInput)
.then((response) => {
if (response.data.error) {
console.log(response.data.error);
} else {
router.push('/')
}
});
});
};
pages/index.js (protected route)
const Home = ({ user }) => {
const [users, setUsers] = useState([]);
useEffect(() => {
api()
.get('/api/users')
.then((response) => {
setUsers(response.data);
});
}, []);
}
Question: How to do it with getServerSideProps? Or how to use this implementation using NextAuth.js? Or maybe need bridge between client to server
export async function getServerSideProps() {
let users = [];
api()
.get('/api/users')
.then((response) => {
users = response.data;
})
.catch((error) => {
console.error(error);
});
return {
props: { users },
};
}
'/api/users' route is protected, requires authentication, so it responds 401 unauthorized