Problema de set Cookies em hospedagem no Render
Atualmente fiz o processo de deploy do meu projeto na plataforma Render, fiz essa migração pois o Heroku havia cortado todos os planos free de hospedagem :(.
O grande ponto o qual me ocorreu foi que o meu sistema utiliza sistema de login setando o token do user em um cookie, para que outras funções no sistema sejam desbloqueadas, se o usuário estiver logado, seu token vai estar armazenado no cookie e disponível no envio de outras requisições. Após bater muito a cabeça e pesquisar, achei alguns artigos alegando que o sistema de cookies não funciona em dominios "onrender.com" (domínio do próprio Render), por ser um dominio público e todas as soluções envolviam você configurar um dominio customizado, a questão que pra isso eu teria que comprar um e a meta é não gastar aboslutamente nada, atualmente meu cookie está sendo setado na url do meu backend e se eu setar a para a URL do front ele me diz que o set-cookie header foi bloqueado pois o atributo do domínio é inválido.
Alguém teria uma outra solução para este meu problema? Eu pensei em utilizar o Local Storage, porém não sei se funcionaria da mesma mecânica e eu teria que alterar bastante coisa no sistema.
Estou usando a biblioteca JWT (Json web token). Meu trecho onde seto o token no backend:
app.post("/login", (request, response) => {
const { email } = request.body;
const { password } = request.body;
let token;
let SQL =
"SELECT id, username FROM users WHERE $1 = email AND $2 = password";
dataBase.query(SQL, [email, password], (err, result) => {
if (err) console.log(err);
else {
if (result.rows.length !== 0) {
token = jwt.sign({ result }, process.env.SECRET, { expiresIn: "1h" });
response.cookie("token", token, {
path: "/",
expires: new Date(Date.now() + 1200000),
httpOnly: false,
secure: true,
sameSite: "none",
});
response.json({ auth: true, token, result });
} else response.send(null);
}
});
});
OBS: Já tentei alterar muitas configurações para setar o token, nada resolve.
Queria colocar imagens de evidência aqui porém não é possivel kkk.
Boa tarde!!
Seria sim uma alternativa guardar esse token no Local Storage ou no Session Storage do navegador, no retorno da chamada do login.
No front você pode definir um header Authorization padrão (imagino que esteja usando o axios, ai é bem tranquilo), que busque esse teu token do Local Storage, e envie para todas as requisições ao backend.
// arquivo de config do axios
const api = axios.create({
baseURL: 'http://localhost:3000',
headers: {
'Authorization': localStorage.getItem('meuToken')
}
});
E no backend, seu middleware de autenticação, ao invés de buscar o token no request.cookie, deve buscar ele de request.headers.Authorization
async function seuMiddlewareDeAutenticacao (request, response, next) {
const authorization = request.headers.authorization;
if (!authorization) {
return response.status(401).json({
type: 'error',
message: 'Token não informado'
})
}
// todos os tratamentos de validação do token você vai fazer aqui...
//caso passou nas validações, segue o fluxo da chamada
next();
}
Não sabia desse limite de token e cookies na api , também só usei o plano gratuito para testes bobos, bom saber.