Better-Auth: Headless Authentication for Your TanStack Start App

Summary

This guide details the integration of Better Off authentication into a Tanstack Start application, covering the setup of OAuth with GitHub, handling sign-ins and sign-outs, and securing both front-end and back-end routes. It explains the creation of a session, server functions for user data, and TRPC integration for authentication, ensuring a smooth user experience with protected routes. The process emphasizes flexibility, making it easy to implement authentication and customize the UI to suit the app's needs.

Takeaways

• 😀 Better Off is a tool for adding authentication to Tanstack Start applications, allowing for easy sign-in, sign-out, and authenticated routes.
• 😀 You can use social login providers like GitHub for authentication, and Better Off also supports database-based email and password logins.
• 😀 Setting up Better Off involves installing the library, setting environment variables, and integrating OAuth clients (like GitHub).
• 😀 Authentication routes are created using API routes, where the callback URL matches with the OAuth provider's expected URL.
• 😀 Better Off provides easy hooks such as `useSession`, `signIn`, `signOut`, etc., to integrate authentication into a React app.
• 😀 Sign-in and sign-out buttons can be customized, and the UI for these buttons can be styled using libraries like ShadCN.
• 😀 Authenticated routes can be implemented by checking the user session and redirecting unauthenticated users to a login page.
• 😀 Server-side functions such as `getUserID` can be used to get the user context and check authentication status before proceeding.
• 😀 Middleware can be used in Tanstack Start to handle authentication, passing user information to server functions to manage sessions.
• 😀 API routes and TRPC procedures can be authenticated, ensuring only authorized users can access certain endpoints or perform specific actions.

Q & A

What is the purpose of using Better Off in this video?

The purpose of using Better Off in this video is to integrate authentication into a Tanstack Start application. The video demonstrates how to authenticate the app, handle sign-in, sign-out, and manage authenticated routes, API routes, server functions, and TRPC routes.

What add-ons were installed in the app setup process?

The add-ons installed in the app setup process were TRPC and Shad Cien. TRPC is used for handling API and server functions, while Shad Cien provides styling options for UI elements like buttons.

How is the OAuth process configured with GitHub in this tutorial?

The OAuth process is configured with GitHub by creating a GitHub OAuth app. Two OAuth apps are required: one for development and one for production mode. The app uses a client ID and client secret to authenticate users through GitHub.

What is the significance of the authorization callback URL in the GitHub OAuth setup?

The authorization callback URL is critical for handling the redirect after a user authenticates through GitHub. In the video, it is set to 'API/off/callback/GitHub', which ensures that GitHub redirects the user back to the app once authentication is complete.

Where is the Better Off instance created in the app?

The Better Off instance is created in the 'lib' directory, specifically in a file called 'O.ts'. This instance is used to configure authentication providers, such as GitHub, and manage the authentication flow in the app.

What function does the API route 'API/off/callback/GitHub' serve?

The 'API/off/callback/GitHub' API route handles the callback from GitHub after user authentication. It processes the response from GitHub and finalizes the sign-in process by managing the session.

What React hook is used to manage the session in the app?

The React hook used to manage the session is 'useSession' from the Better Off React library. This hook allows the app to check if a user is signed in, and also provides functions for signing in, signing out, and managing the session.

How does the app handle protected routes like the dashboard?

The app handles protected routes by using a loader function to check whether the user is authorized. If the user is not signed in, they are redirected to the homepage. This ensures that only authenticated users can access certain routes, such as the dashboard.

What is the role of middleware in this authentication setup?

Middleware plays a crucial role in this authentication setup by passing the session context to server functions and routes. It is used to ensure that the session information is available on both the client and server, enabling the app to check if a user is authenticated before processing requests.

How are TRPC routes authenticated in this tutorial?

TRPC routes are authenticated by adding a 'create context' function, which includes session data. A protected procedure is created by using middleware that checks if a session exists. If the session is valid, the procedure continues; otherwise, an unauthorized error is thrown.