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

🚀 Aproveite os cursos pagos da Rocketseat, liberados gratuitamente até 03/11 https://rseat.in/aproveite-curso-grat...
• 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    • Criando um projeto com Bun, Elysia e Bette...  
• Me rendi ao Bun & Elysia novamente! (API com Bun e Better Auth)    • Me rendi ao Bun & Elysia novamente! (API c...  

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:   / discord  

Acompanhe a Rocketseat nas redes sociais:
TikTok: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat