Course lesson 51 · Better Auth
Integration with web app
Google social login is wired through the user application’s Hono Worker and Better Auth’s React client. The lesson configures Google OAuth origins and callback URLs, routes authentication traffic through Worker code, replaces mock frontend authentication, and guards dashboard navigation. It then repeats the necessary provider and runtime-secret configuration for the deployed custom domain.
Primary source: course video 51 · Supplied English subtitles · 00:16:58.
Understand the idea
- The authentication handler accepts GET and POST requests under the auth path and lets Better Auth manage provider callbacks.
- Google OAuth configuration identifies permitted origins and the exact callback endpoint used by the application.
- Authentication routes must run Worker code rather than accidentally resolve through static asset handling.
- The React client supplies social sign-in, session retrieval, and sign-out behavior to existing UI components.
- A TanStack before-load session check redirects signed-out visitors away from dashboard pages.
What the course does
- Mount the Better Auth handler in Hono and pass server-side Google credentials through its configuration.
- Create a Google OAuth web client with localhost origin and the /api/auth/callback/google redirect.
- Configure local credentials, regenerate environment types, and set Worker-first handling for authentication, tRPC, and socket routes.
- Replace mock clients in login and user components with the shared Better Auth React client.
- Test Google sign-in, display session information, navigate home after sign-out, and add the dashboard route guard.
- Register deployed callback URLs and configure Google credentials as Worker runtime secrets before testing the live domain.
Watch for
- The local environment-file behavior is tied to a Wrangler update discussed in the recording.
- Google credentials belong to runtime server configuration; build variables are a different surface.
- The router guard protects navigation experience, while server API protection is implemented in the next lesson.
Recall before revealing
Why can a working login still leave API data unprotected at this stage?
Reveal the explanation
The UI and navigation now know about sessions, but protected API handlers still need server-side session enforcement.
Try it
Trace one Google sign-in from button click to the dashboard and identify the two callback destinations involved.
Check your result
You distinguish Google returning to the auth callback endpoint from Better Auth navigating the signed-in user to /app.
Practice prompts and answer checks are added teaching material. Answer from memory first, then compare and explain any difference.
Rewatch only what you need
Open this lesson in your original course library and seek to the times below. Videos are not hosted on this site.
- 00:01:01 — Mount Hono authentication handler
- 00:03:33 — Google callback URL configuration
- 00:06:39 — Worker-first routing for auth paths
- 00:12:47 — Dashboard before-load session guard
- 00:15:49 — Deployed runtime secrets
Companion primary documentation: Better Auth basic usage. For recorded API names, commands, limits, and prices, check the version you use.