Add Google OAuth sign-in via Supabase Auth on the login page

web/src/app/app/login/login.html

@@ -24,6 +24,12 @@ <h1 class="app-page__title">Sign in</h1>
       </mat-card-header>
       <mat-card-content>
         <form class="auth-form" [formGroup]="signInForm" (ngSubmit)="signIn()">
+          <button matButton="outlined" type="button" [disabled]="isSubmitting()" (click)="signInWithGoogle()">
+            Continue with Google
+          </button>
+
+          <p class="auth-separator" aria-hidden="true">or</p>
+
           <mat-form-field>
             <mat-label>Email</mat-label>
             <input matInput type="email" formControlName="email" autocomplete="email" />

web/src/app/app/login/login.scss

@@ -12,3 +12,10 @@
   font-size: 0.875rem;
   text-align: right;
 }
+
+.auth-separator {
+  margin: 0;
+  text-align: center;
+  color: var(--mat-sys-on-surface-variant);
+  font-size: 0.875rem;
+}

web/src/app/app/login/login.spec.ts

@@ -13,6 +13,7 @@ class MockAuthService {
 
   waitUntilInitialized = async (): Promise<void> => {};
   signInWithPassword = async (): Promise<string | null> => null;
+  signInWithGoogle = vi.fn().mockResolvedValue(null);
   signOut = async (): Promise<string | null> => null;
 }
 
@@ -58,4 +59,26 @@ describe('LoginPage', () => {
 
     expect(router.navigateByUrl).toHaveBeenCalledWith('/clubs', { replaceUrl: true });
   });
+
+  it('starts Google sign-in with the latest redirectTo value', async () => {
+    const fixture = TestBed.createComponent(LoginPage);
+    const page = fixture.componentInstance as any;
+    fixture.detectChanges();
+    redirectTo = '/clubs/123';
+
+    await page.signInWithGoogle();
+
+    expect(auth.signInWithGoogle).toHaveBeenCalledWith('/clubs/123');
+  });
+
+  it('shows a Google sign-in error', async () => {
+    const fixture = TestBed.createComponent(LoginPage);
+    const page = fixture.componentInstance as any;
+    auth.signInWithGoogle.mockResolvedValue('OAuth provider unavailable');
+    fixture.detectChanges();
+
+    await page.signInWithGoogle();
+
+    expect(page.authMessage()).toBe('OAuth provider unavailable');
+  });
 });

web/src/app/app/login/login.ts

@@ -55,4 +55,15 @@ export class LoginPage {
 
     this.isSubmitting.set(false);
   }
+
+  protected async signInWithGoogle(): Promise<void> {
+    this.authMessage.set(null);
+    this.isSubmitting.set(true);
+
+    const errorMessage = await this.auth.signInWithGoogle(this.getRedirectTo());
+    if (errorMessage) {
+      this.authMessage.set(errorMessage);
+      this.isSubmitting.set(false);
+    }
+  }
 }

web/src/app/auth.service.ts

@@ -59,6 +59,20 @@ export class AuthService {
     return error?.message ?? null;
   }
 
+  async signInWithGoogle(redirectPath = '/'): Promise<string | null> {
+    if (!this.authClient) {
+      return 'Supabase is not configured.';
+    }
+
+    const { error } = await this.authClient.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: this.buildRedirectUrl(redirectPath),
+      },
+    });
+    return error?.message ?? null;
+  }
+
   async signUp(email: string, password: string): Promise<string | null> {
     if (!this.authClient) {
       return 'Supabase is not configured.';