Simplifying Authentication: Adding Social Providers to promptd

Building a custom authentication system from scratch is a classic trap. You spend weeks perfecting password hashing and session management, only to realize your users just want to click 'Sign in with Google' and move on with their day. Recently, in the promptd project, we decided to offload this complexity by integrating managed identity providers.

The Authentication Overhead

When scaling an application, the burden of maintaining user credentials grows exponentially. Security vulnerabilities, password recovery flows, and account linking are not just features—they are liability sinks. By moving to third-party providers, we shift that operational weight onto platforms designed to handle global-scale identity verification.

Integrating Providers

For promptd, we utilized Supabase's built-in auth capabilities to bridge the gap between our frontend and external identity services. Integrating Github and Google required less boilerplate than expected, primarily because the middleware layer in our Next.js architecture handles the session persistence cleanly.

To implement this, you typically configure your provider credentials and use the Supabase client to trigger the OAuth flow:

async function handleSocialLogin(provider: 'github' | 'google') {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider,
    options: {
      redirectTo: `${window.location.origin}/auth/callback`,
    },
  });

  if (error) throw error;
  return data;
}

Maintaining Consistent Styling

Even when using standard identity providers, the login UI needs to feel native. Using Tailwind CSS, we ensured that the sign-in buttons remain consistent with our design system, applying specific hover states and border styling that mirrors our primary branding.

.social-btn {
  @apply flex items-center justify-center gap-2 py-2 px-4 border rounded-md transition-all;
}

.social-btn:hover {
  @apply bg-gray-50 border-gray-400;
}

The Takeaway

Don't reinvent the wheel for identity. By leveraging mature OAuth providers through a service like Supabase, you significantly reduce your attack surface and improve the user onboarding experience. If you are still managing local database passwords for your internal tools, consider migrating to social authentication to reduce your maintenance burden.

Generated with Gitvlg.com