veza e produtividade no Vite + Bun"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Use bun create ou vite@latest para iniciar seu app,\n escolha template puro React. Limpe arquivos padrões, use Tailwind para estilizar rápido,\n tudo pronto para receber a integração com a biblioteca de autenticação."}]]]}] 31:["$","section","7",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Setup do Tailwind: minimalista e prático"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Instale Tailwind e adicione imports e presets no seu vite.config e index.css . Pronto, estilos resetados e responsivos: app pronto para\n crescer, sem CSS-in-JS pesado ou configurações intermináveis."}]]]}] 32:["$","section","8",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Integrando BetterAuth no front-end: lib, config e client"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Na raiz do seu app, crie uma pasta lib e adicione um auth.ts . Importe o createAuthClient da biblioteca\n BetterAuth e configure o baseUrl com o endereço do seu backend (local\n ou produção). Plugue plugins quando/quiser (roles, organizations, upgrades), e inicie o\n client só uma vez."}]]]}] 33:["$","section","9",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Formulário de login: react-hook-form e zod para validação real"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"UX não é secundário: use react-hook-form para controle de estado e o zod para validação granular dos inputs. Campos mínimos: e-mail e senha.\n Mensagens de erro e validação diretamente nos inputs, bloqueio do botão de submit em\n loading e estilos com Tailwind. Velocidade e acessibilidade juntas."}]]]}] 34:["$","section","10",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Exemplo de integração sign-in: código enxuto, sem confusão"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"No submit do form, chame auth.signIn.email com e-mail, senha e\n opcionalmente callbackURL — tudo tipado, feedback de erro por onError .\n Redirecione pós-login com facilidade, controles de estado nativos. Você pode expandir\n para login social e two-factor mudando 2 linhas."}]]]}] 35:["$","section","11",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Plugins no front-end: roles, times, organizações e upgrades automatizados"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Precisa adicionar features de times, RBAC, organizações múltiplas ou upgrades\n automáticos por pagamento Stripe? Importe o plugin client respectivo do BetterAuth,\n ative na config e pronto. All-in-one, do login ao billing, sem clouds."}]]]}] 36:["$","section","12",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Erros e CORS: debug rápido sem dor de cabeça"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Com integração separada de front-end e backend, o maior erro é CORS bloqueando a\n autenticação. Solução: adicione plugin no Elysia, permita origin * para dev,\n restrinja em prod, reinicie server. Simples, confiável, controlado por você."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-red-500/1