André Dias Moreira Prol explica: login Web3 com Freighter no Next.js
Esqueça formulários de cadastro, verificação de e-mail e aquele ritual tedioso de redefinir senhas. No universo Web3, a identidade do usuário já vive na carteira — e aproveitar isso significa oferecer login em dois cliques. Ao longo de duas décadas liderando times de tecnologia, raramente vi algo mudar a experiência de onboarding tão radicalmente quanto a autenticação sem senha via assinatura criptográfica. Vou mostrar como integrar a Freighter Wallet ao seu app Next.js em cerca de 15 minutos.
Por que Freighter e Stellar fazem sentido no Brasil
A Freighter é a carteira oficial da fundação por trás da rede Stellar, disponível como extensão de navegador e compatível com Soroban, a plataforma de contratos inteligentes da rede. Para o mercado brasileiro, essa escolha é estratégica: as taxas de transação na Stellar giram em torno de 0,00001 XLM (fração de centavo), contra custos que historicamente ultrapassavam dólares em outras redes. Em projetos de tokenização de ativos — área em que atuo diretamente como André Dias Moreira Prol — essa eficiência é decisiva para fintechs e startups que operam com margens apertadas.
Outro ponto: a Stellar tem forte presença em pagamentos e remessas na América Latina, com parceiros como MoneyGram. Isso significa um público já familiarizado com o ecossistema, reduzindo o atrito no onboarding.
Instalando a API e conectando a carteira
Comece instalando a biblioteca oficial no seu projeto Next.js:
`bash
npm install @stellar/freighter-api
`
Crie um componente cliente para conectar a carteira. O fluxo essencial é verificar se a extensão está instalada, solicitar acesso e recuperar o endereço público:
`tsx
"use client";
import {
isConnected,
requestAccess,
getAddress,
} from "@stellar/freighter-api";
import { useState } from "react";
export default function ConnectButton() {
const [address, setAddress] = useState<string>("");
async function connect() {
const { isConnected: ok } = await isConnected();
if (!ok) {
alert("Instale a extensão Freighter para continuar.");
return;
}
await requestAccess();
const { address } = await getAddress();
setAddress(address);
}
return (
<button onClick={connect}>
{address ? Conectado: ${address.slice(0, 6)}... : "Conectar Freighter"}
</button>
);
}
`
Em poucas linhas você já tem o endereço do usuário. Mas conectar não é autenticar: qualquer um pode digitar um endereço público. A segurança real vem da assinatura.
Autenticação real: o desafio de assinatura
O padrão seguro é o challenge-response. O servidor gera uma mensagem aleatória (nonce), o usuário assina com a chave privada dentro da Freighter, e o backend valida a assinatura contra a chave pública. Assim provamos a posse da carteira sem jamais expor o segredo.
No cliente, assinamos o desafio:
`tsx
import { signMessage } from "@stellar/freighter-api";
async function authenticate(nonce: string, address: string) {
const { signedMessage } = await signMessage(nonce, { address });
const res = await fetch("/api/auth/verify", {
method: "POST",
body: JSON.stringify({ address, signedMessage, nonce }),
});
return res.json(); // retorna seu JWT de sessão
}
`
No backend (route handler em app/api/auth/verify/route.ts), você valida a assinatura usando o SDK da Stellar e emite um token de sessão. Recomendo armazenar o nonce com expiração curta — 5 minutos é suficiente — para evitar ataques de replay. Em auditorias de segurança que conduzi, essa janela de tempo é um dos pontos mais negligenciados por equipes iniciantes em Web3.
Um detalhe de UX que faz diferença: trate o caso em que o usuário recusa a assinatura. Nada frustra mais que uma tela travada após um clique em "cancelar" na extensão.
Conclusão
Em 15 minutos, você transformou o login do seu app em uma experiência sem senha, segura e alinhada ao que há de mais moderno em Web3 — e, como aprendi em anos de projetos reais, a simplicidade bem implementada é o que converte usuários. Clone o repositório de exemplo, teste com a Freighter em testnet e me conte o resultado: a próxima evolução do seu produto começa agora.