Autenticação no React com Better Auth (+ back-end próprio com Bun)

Video Description

🚀 Aproveite os cursos pagos da Rocketseat, liberados gratuitamente até 03/11 https://rseat.in/aproveite-curso-gratuito-rocketseat- • Clead Code - React & Node • SEO para Devs • API com Bun • Posicionamento nas redes sociais • Desafio Full-Stack com IA na Prática com Diego FernandesDesenvolva um Debugger de Webhooks com Fastify, PostgreSQL e React Garanta sua vaga https://rseat.in/5TdMYE3i_ Links importantes para sua carreira 👇 • Modelo de currículo gratuito https://rseat.in/Cy2he2qoJ • Novidades do mundo tech com curadoria Rocketseat https://rseat.in/knVX6jAYI • Criando um projeto com Bun, Elysia e Better Auth do ZERO https://www.youtube.com/watch?v=5GYmqCAKAIc • Me rendi ao Bun & Elysia novamente! (API com Bun e Better Auth) https://www.youtube.com/watch?v=8ByN3ePsBe0 Dev, cansado(a) de lidar com a complexidade da autenticação em suas aplicações React? Desenvolvedores frequentemente enfrentam desafios ao integrar sistemas de login robustos, seja configurando providers externos ou gerenciando sessões e tokens de forma segura. Este vídeo é o seu guia completo para dominar a autenticação com BetterAuth, uma biblioteca poderosa que simplifica esse processo. Neste tutorial prático, vamos construir uma solução de autenticação do zero, integrando o BetterAuth no seu front-end React com Vite e Tailwind CSS, e conectando-o a um back-end de alta performance desenvolvido com Bun e Elysia. Você aprenderá a configurar login e cadastro utilizando React Hook Form e validação com Zod, além de explorar funcionalidades avançadas como login social, Passkeys, OTP, 2FA, e RBAC. Abordaremos também a gestão de sessões, a diferença entre autenticação stateful e stateless (JWT), e como resolver problemas comuns de segurança, como CORS e CSRF. O que você vai aprender: • Configurar o BetterAuth para autenticação baseada em sessões no React. • Construir um back-end de autenticação robusto com Bun e Elysia. • Implementar login social, Passkeys, OTP e 2FA com BetterAuth. • Gerenciar formulários de autenticação de forma eficiente com React Hook Form e Zod. • Entender a diferença entre autenticação stateful (sessões) e stateless (JWT). • Integrar estilos com Tailwind CSS e otimizar o ambiente de desenvolvimento com Vite. • Resolver desafios de segurança, como CORS e CSRF, em aplicações full-stack. • Explorar recursos avançados do BetterAuth, como RBAC e integração com pagamentos (Stripe, Polar). Tenha uma compreensão sólida de como implementar um sistema de autenticação completo e seguro, otimizado para o ecossistema JavaScript moderno 👇 00:00 - 00:09 - Boas-vindas: O que é BetterAuth? 00:09 - 00:18 - Por que usar BetterAuth para autenticação? 00:18 - 00:57 - Quais funcionalidades o BetterAuth oferece? 00:57 - 01:39 - Como configurar o back-end com BetterAuth? 01:39 - 02:10 - Como iniciar um projeto React com Vite? 02:10 - 02:54 - Qual o novo React Compiler? 02:54 - 03:26 - Como rodar o app React localmente? 03:26 - 05:10 - Como configurar Tailwind CSS no React? 05:10 - 05:34 - Como integrar BetterAuth no front-end? 05:34 - 06:47 - Como inicializar o BetterAuth Client? 06:47 - 07:18 - Como criar o componente de login? 07:18 - 08:01 - Validar formulários com React Hook Form? 08:01 - 09:40 - Como estruturar o formulário de login? 09:40 - 10:34 - Estilizar formulário com Tailwind CSS? 10:34 - 11:07 - Como testar o envio do formulário? 11:07 - 12:31 - Como realizar o login com BetterAuth? 12:31 - 13:29 - Resolver erros de CORS no back-end? 13:29 - 14:45 - Como configurar BetterAuth para CORS? 14:45 - 15:38 - Como criar o componente de cadastro? 15:38 - 16:08 - Como exibir login e cadastro? 16:08 - 16:31 - Como testar o cadastro de usuário? 16:31 - 16:45 - Como confirmar o cadastro e login? 16:45 - 17:38 - Como funciona a autenticação por sessão? 17:38 - 19:40 - Como buscar dados do usuário autenticado? 19:40 - 20:34 - Como enviar credenciais em requisições? 20:34 - 21:20 - Autenticação client vs server-side? 21:20 - 23:13 - Hooks e plugins do BetterAuth? 23:13 - 23:36 - Próximos passos com BetterAuth? ----- Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: https://rseat.in/rocketseat_ Cadastre-se na nossa plataforma: https://rseat.in/rocketseat_ Junte-se a mais de 392mil devs em nossa comunidade no Discord: https://discord.gg/rocketseat Acompanhe a Rocketseat nas redes sociais: TikTok: @rocketseat Facebook: @rocketseat Instagram: @rocketseat