feat(auth): add Google and GitHub OAuth support

convex/auth.ts

@@ -51,6 +51,16 @@ export const createAuthOptions = (
         });
       },
     },
+    socialProviders: {
+      google: {
+        clientId: process.env.GOOGLE_CLIENT_ID!,
+        clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
+      },
+      github: {
+        clientId: process.env.GITHUB_CLIENT_ID!,
+        clientSecret: process.env.GITHUB_CLIENT_SECRET!,
+      },
+    },
     plugins: [convex({ authConfig }), haveIBeenPwned()],
   };
 };

messages/en.json

@@ -17,6 +17,9 @@
     "ShowPasswordTooltip": "Show password",
     "Submit": "Submit",
     "CheckYourEmail": "Check your email to complete the process.",
+    "SignInWithGoogle": "Sign in with Google",
+    "SignInWithGitHub": "Sign in with GitHub",
+    "OrContinueWith": "or continue with",
     "ForgotPasswordLink": "Forgot password?",
     "ForgotPasswordTitle": "Forgot password",
     "SendResetLink": "Send reset link",

messages/pl.json

@@ -17,6 +17,9 @@
     "ShowPasswordTooltip": "Pokaż hasło",
     "Submit": "Wyślij",
     "CheckYourEmail": "Sprawdź email, aby dokończyć proces.",
+    "SignInWithGoogle": "Zaloguj się przez Google",
+    "SignInWithGitHub": "Zaloguj się przez GitHub",
+    "OrContinueWith": "lub kontynuuj przez",
     "ForgotPasswordLink": "Nie pamiętasz hasła?",
     "ForgotPasswordTitle": "Nie pamiętasz hasła",
     "SendResetLink": "Wyślij link resetujący",

src/components/auth/AuthForm.tsx

@@ -38,6 +38,8 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 
+import { Separator } from '@/components/ui/separator';
+
 import { Spinner } from '../ui/spinner';
 
 const signInSchema = z.object({
@@ -119,6 +121,39 @@ export function AuthForm({ mode, redirectPath = '/dashboard' }: AuthFormProps) {
         </CardAction>
       </CardHeader>
       <CardContent>
+        <div className="flex flex-col gap-3">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() =>
+              authClient.signIn.social({
+                provider: 'google',
+                callbackURL: redirectPath,
+              })
+            }
+          >
+            {t('SignInWithGoogle')}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() =>
+              authClient.signIn.social({
+                provider: 'github',
+                callbackURL: redirectPath,
+              })
+            }
+          >
+            {t('SignInWithGitHub')}
+          </Button>
+        </div>
+        <div className="my-4 flex items-center gap-3">
+          <Separator className="flex-1" />
+          <span className="text-muted-foreground text-xs uppercase">
+            {t('OrContinueWith')}
+          </span>
+          <Separator className="flex-1" />
+        </div>
         <form id="form-auth" onSubmit={form.handleSubmit(onSubmit)}>
           <FieldGroup>
             {isSignUp && (