Social Sign In

Social sign-in allows users to authenticate using an existing account from a third-party provider instead of creating and managing a new password.

Social sign-in allows users to authenticate using an existing account from a third-party provider instead of creating and managing a new password.

SaaS Blueprint provides native support for Google and GitHub social sign-in through simple environment variable configuration, and - because it is built on Better Auth - can be easily extended to support additional providers.

GitHub

GitHub only allows one callback per OAuth App so you create separate applications for each environment - like local and production.

Create an OAuth app

Use the Authorization callback URL:

Store environment variables and secrets

Development

  • Add both GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET to .env.development.local.

Production

  • Set the environment variable GITHUB_CLIENT_ID in the dashboard.
npx wrangler secret put GITHUB_CLIENT_SECRET -c workers/app/wrangler.jsonc

or add it via the dashboard too.

Google

Google is Google so the process is more involved.

  • Go to Google Cloud Admin and create a project for your application (recommended) or selected an existing one.
  • Click Oauth Consent Screen in the left-hand navigation to configure the application details.
    • Audience: External (You don't have to get this application validated)
  • Choose Branding
    • Fill out App Domain
    • Add your domain under Authorized Domains
  • Click Clients and Create Client
    • Application type Web Application
    • Add Authorized redirect URIs
      • Development: http://localhost:3000/api/auth/callback/google to Authorized redirect URIs
      • Production: https://<YOUR DOMAIN>/api/auth/callback/google to Authorized redirect URIs
    • Note the Client ID/Client Secret
  • Choose Audience
    • Click Publish app then Confirm

Development

  • Add both GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET to .env.development.local.

Production

  • Set the environment variable GOOGLE_CLIENT_ID in the dashboard.
npx wrangler secret put GOOGLE_CLIENT_SECRET -c workers/app/wrangler.jsonc

or add it via the dashboard too.