Better Auth

Better Auth is an auth library that handles most of the complexity of auth for you, but abstracts away much of the lower-level details and control of how your auth works.

Setup

If you're using the Vercel Monorepo template, the @workspace-apps/web app is setup with Better Auth out of the box.

To get the auth setup working, you will need to create a new OAuth app in your GitHub account, and then update the environment variables in the @workspace-apps/web app with the necessary client ID and secret.

Creating a new GitHub OAuth app

To create a new OAuth app in your GitHub account, you will need to visit the GitHub Developer Settings page. From there, you will need to click the "New OAuth App" button. Fill out the form with the following information:

• Application name: The name of your application.
• Homepage URL: The URL of your application's homepage.
• Authorization callback URL: The URL of your application's authorization callback.
  • On local development, this will be http://localhost:3000/api/auth/callback/github.
  • On production, this will be the same as the callback URL for local development, but the domain will be your production domain.

After creating the OAuth app, you will be given a Client ID and Client Secret. You will need to update the GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET environment variables in the /apps/web/.env file with the values you were given.

GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"

Using other OAuth providers

If you want to use different/additional OAuth providers (e.g. Google OAuth), you will need to make updates to the following files within @workspace-apps/web:

• /src/lib/auth.ts

  • Update the socialProviders object to include the new provider(s).

  import { betterAuth } from "better-auth";
  import { env } from "@/env";
  
  export const auth = betterAuth({
      socialProviders: {
          github: {
              clientId: env.GITHUB_CLIENT_ID,
              clientSecret: env.GITHUB_CLIENT_SECRET,
          },
          // Add your other providers here...
          google: {
              clientId: env.GOOGLE_CLIENT_ID,
              clientSecret: env.GOOGLE_CLIENT_SECRET,
          },
      },
  });

• /src/app/(general)/login/page.tsx

  • Add a new login button for the new provider(s).

• /src/app/(general)/signup/page.tsx

  • Add a new signup button for the new provider(s).