I want to use Supabase authentication for my App and simply built this auth service:

import { Injectable } from '@angular/core';
import { AuthResponse, createClient } from '@supabase/supabase-js';
import { environment } from '../../environments/environment';
import { from, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  supabase = createClient(environment.supabaseUrl, environment.supabaseKey);

  register(email: string, password: string): Observable<AuthResponse> {
    const promise = this.supabase.auth.signUp({
      email,
      password
    })

    return from(promise);
  }

  login(email: string, password: string): Observable<AuthResponse> {
    const promise = this.supabase.auth.signInWithPassword({
      email,
      password
    });

    return from(promise);
  }
}

in the login component I call the login method from the auth service:

import { Component, inject } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../auth/auth.service';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent {
  authService = inject(AuthService);
  router = inject(Router);

  errorMessage: string | null = null;

  contactForm = new FormGroup({
    email: new FormControl(''),
    password: new FormControl(''),
  });

  handleSubmit() {
    const rawForm = this.contactForm.getRawValue();
    if (rawForm.email && rawForm.password) {
      this.authService
        .login(rawForm.email, rawForm.password)
        .subscribe((result) => {
          if (result.error) {
            this.errorMessage = result.error.message;
          } else {
            this.router.navigateByUrl('/');
          }
        });
    }
  }
}

I also enabled withFetch() for the HttpClient to improve possible SSR:

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(withFetch()),
    importProvidersFrom(HttpClientModule)]
};

but when I call http://localhost:4200/login, I get this error:

[vite] Internal server error: Page /login did not render in 30 seconds.
      at Timeout.<anonymous> (C:UserskurspDesktopdeluxe-detailnode_modules@angularbuildsrcutilsserver-renderingrender-page.js:90:90)
      at Timeout.timer (C:UserskurspDesktopdeluxe-detailnode_moduleszone.jsfesm2015zone-node.js:2249:37)
      at _ZoneDelegate.invokeTask (C:UserskurspDesktopdeluxe-detailnode_moduleszone.jsfesm2015zone-node.js:398:33)
      at _ZoneImpl.runTask (C:UserskurspDesktopdeluxe-detailnode_moduleszone.jsfesm2015zone-node.js:158:47)
      at invokeTask (C:UserskurspDesktopdeluxe-detailnode_moduleszone.jsfesm2015zone-node.js:479:34)
      at Timeout.ZoneTask.invoke (C:UserskurspDesktopdeluxe-detailnode_moduleszone.jsfesm2015zone-node.js:468:48)
      at Timeout.data.args.<computed> (C:UserskurspDesktopdeluxe-detailnode_moduleszone.jsfesm2015zone-node.js:2231:32)
      at listOnTimeout (node:internal/timers:573:17)
      at process.processTimers (node:internal/timers:514:7)

I tried and added the withFetch() option for the providers in the config. I thought that might have some sort of interference with the SSR eventhough I use supabase in order to not need an explicit backend for authentication.

The actual result:
Still the timeout error after 30 seconds, I assume Zone.js has some tasks/routines to finish up the connection but never gets to actually executing them –> being stuck on that