@sneat/auth-ui 0.1.0

package/src/lib/pages/login-page/login-page.component.ts

@@ -0,0 +1,209 @@
+import { Component, signal, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { Capacitor } from '@capacitor/core';
+import {
+  NavController,
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemDivider,
+  IonLabel,
+  IonList,
+  IonRow,
+  IonSpinner,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+import {
+  AuthProviderID,
+  AuthStatuses,
+  ILoginEventsHandler,
+  ISneatAuthState,
+  LoginEventsHandler,
+  SneatAuthStateService,
+} from '@sneat/auth-core';
+import { SneatUserService } from '@sneat/auth-core';
+import {
+  AnalyticsService,
+  APP_INFO,
+  IAnalyticsService,
+  IAppInfo,
+} from '@sneat/core';
+import { RandomIdService } from '@sneat/random';
+import { ClassName, SneatBaseComponent } from '@sneat/ui';
+import { Subject, takeUntil } from 'rxjs';
+import {
+  EmailFormSigningWith,
+  EmailLoginFormComponent,
+} from './email-login-form/email-login-form.component';
+import { UserCredential } from 'firebase/auth';
+import { LoginWithTelegramComponent } from './login-with-telegram.component';
+
+type Action = 'join' | 'refuse'; // TODO: inject provider for action descriptions/messages.
+
+@Component({
+  selector: 'sneat-login',
+  templateUrl: './login-page.component.html',
+  imports: [
+    FormsModule,
+    LoginWithTelegramComponent,
+    EmailLoginFormComponent,
+    IonHeader,
+    IonToolbar,
+    IonButtons,
+    IonBackButton,
+    IonTitle,
+    IonContent,
+    IonCardContent,
+    IonText,
+    IonCard,
+    IonItemDivider,
+    IonLabel,
+    IonRow,
+    IonCol,
+    IonItem,
+    IonSpinner,
+    IonIcon,
+    IonList,
+    IonGrid,
+  ],
+  providers: [
+    {
+      provide: ClassName,
+      useValue: 'LoginPageComponent',
+    },
+    RandomIdService,
+  ],
+})
+export class LoginPageComponent extends SneatBaseComponent {
+  private readonly analyticsService =
+    inject<IAnalyticsService>(AnalyticsService);
+  private readonly route = inject(ActivatedRoute);
+  private readonly navController = inject(NavController);
+  private readonly userService = inject(SneatUserService);
+  private readonly authStateService = inject(SneatAuthStateService);
+  private appInfo = inject<IAppInfo>(APP_INFO);
+  private readonly loginEventsHandler = inject<ILoginEventsHandler>(
+    LoginEventsHandler,
+    { optional: true },
+  );
+
+  protected readonly signingWith = signal<AuthProviderID | undefined>(
+    undefined,
+  );
+  private readonly redirectTo?: string;
+  protected readonly to?: string;
+  protected readonly action?: Action; // TODO: document possible values?
+
+  protected readonly isNativePlatform = Capacitor.isNativePlatform();
+
+  protected readonly appTitle: string;
+
+  constructor() {
+    super();
+    const appInfo = this.appInfo;
+    this.appTitle = appInfo.appTitle || 'Sneat.app';
+    if (location.hash.startsWith('#/')) {
+      this.redirectTo = location.hash.substring(1);
+    }
+    this.to = this.route.snapshot.queryParams['to']; // should we subscribe? I believe no.
+    const action = location.hash.match(/[#&]action=(\w+)/);
+    this.action = action?.[1] as Action;
+
+    const userRecordLoaded = new Subject<void>();
+    this.userService.userState
+      .pipe(takeUntil(userRecordLoaded), this.takeUntilDestroyed())
+      .subscribe({
+        next: (userState) => {
+          if (userState.record) {
+            userRecordLoaded.next();
+          } else {
+            return;
+          }
+          const redirectTo = this.redirectTo || '/'; // TODO: default one should be app specific.
+          this.navController
+            .navigateRoot(redirectTo)
+            .catch(
+              this.errorLogger.logErrorHandler(
+                'Failed to navigate back to ' + redirectTo,
+              ),
+            );
+        },
+        error: this.errorHandler('Failed to get user state after login'),
+      });
+  }
+
+  protected onEmailFormStatusChanged(signingWith?: EmailFormSigningWith): void {
+    this.signingWith.set(signingWith as AuthProviderID);
+  }
+
+  protected async loginWith(provider: AuthProviderID) {
+    this.signingWith.set(provider);
+    try {
+      await this.authStateService.signInWith(provider);
+      // We do not reset this.signingWith in case of succesful sign in as we should redirect from login page
+      // and not to allow user to do a double sign-in.
+    } catch (e) {
+      const errMsg = (e as { errorMessage?: string }).errorMessage;
+      if (
+        errMsg !== 'The user canceled the sign-in flow.' &&
+        !errMsg?.includes(
+          'com.apple.AuthenticationServices.AuthorizationError error 1001.',
+        )
+      ) {
+        this.errorLogger.logError(e, `Failed to sign-in with ${provider}`);
+      }
+      this.signingWith.set(undefined);
+    }
+  }
+
+  protected onLoggedIn(userCredential: UserCredential): void {
+    this.signingWith.set(undefined);
+    if (!userCredential.user) {
+      return;
+    }
+    if (userCredential.user.email) {
+      const prevEmail = localStorage.getItem('emailForSignIn') || '';
+      if (!prevEmail) {
+        localStorage.setItem('emailForSignIn', userCredential.user.email);
+      }
+    }
+    const authState: ISneatAuthState = {
+      status: AuthStatuses.authenticated,
+      user: userCredential.user,
+    };
+    this.userService.onUserSignedIn(authState);
+  }
+
+  private errorHandler(
+    m: string,
+    eventName?: string,
+    eventParams?: Record<string, string>,
+  ): (err: unknown) => void {
+    return (err) => this.handleError(err, m, eventName, eventParams);
+  }
+
+  private handleError(
+    err: unknown,
+    m: string,
+    eventName?: string,
+    eventParams?: Record<string, string>,
+  ): void {
+    if (eventName) {
+      this.analyticsService.logEvent(eventName, eventParams);
+    }
+    this.errorLogger.logError(err, m, {
+      report: !(err as { code: unknown }).code,
+    });
+    this.signingWith.set(undefined);
+  }
+}

package/src/lib/pages/login-page/login-with-telegram.component.spec.ts

@@ -0,0 +1,42 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { SneatApiService } from '@sneat/api';
+import { SneatAuthStateService } from '@sneat/auth-core';
+import { ErrorLogger } from '@sneat/core';
+import { LoginWithTelegramComponent } from './login-with-telegram.component';
+
+describe('LoginWithTelegramComponent', () => {
+  let component: LoginWithTelegramComponent;
+  let fixture: ComponentFixture<LoginWithTelegramComponent>;
+
+  beforeEach(waitForAsync(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginWithTelegramComponent],
+      providers: [
+        {
+          provide: ErrorLogger,
+          useValue: { logError: vi.fn(), logErrorHandler: () => vi.fn() },
+        },
+        {
+          provide: SneatApiService,
+          useValue: { post: vi.fn(), postAsAnonymous: vi.fn() },
+        },
+        {
+          provide: SneatAuthStateService,
+          useValue: { signInWithToken: vi.fn() },
+        },
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+      .overrideComponent(LoginWithTelegramComponent, {
+        set: { imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA] },
+      })
+      .compileComponents();
+    fixture = TestBed.createComponent(LoginWithTelegramComponent);
+    component = fixture.componentInstance;
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/pages/login-page/login-with-telegram.component.ts

@@ -0,0 +1,82 @@
+import { DOCUMENT } from '@angular/common';
+import { Component, ElementRef, Input, OnInit, inject } from '@angular/core';
+import {
+  ITelegramAuthData,
+  SneatAuthWithTelegramService,
+} from './sneat-auth-with-telegram.service';
+
+let authWithTelegramService: SneatAuthWithTelegramService;
+
+@Component({
+  providers: [SneatAuthWithTelegramService],
+  selector: 'sneat-login-with-telegram',
+  template: `
+    <!--
+				<script
+					async
+					src="https://telegram.org/js/telegram-widget.js?22"
+					data-telegram-login="SneatBot"
+					data-size="large"
+					data-onauth="onTelegramAuth(user)"
+					data-request-access="write"
+				></script>
+				-->
+  `,
+})
+export class LoginWithTelegramComponent implements OnInit {
+  private readonly el = inject(ElementRef);
+  private readonly document = inject<Document>(DOCUMENT);
+  readonly authWithTelegram = inject(SneatAuthWithTelegramService);
+
+  // TODO: Article about Telegram login
+  constructor() {
+    const authWithTelegram = this.authWithTelegram;
+
+    authWithTelegramService = authWithTelegram;
+  }
+
+  @Input() public isUserAuthenticated = false;
+
+  @Input() public botID: string = location.hostname.startsWith('local')
+    ? 'AlextDevBot'
+    : 'SneatBot';
+
+  @Input() public size: 'small' | 'medium' | 'large' = 'large';
+  @Input() public requestAccess: 'write' | 'read' = 'write';
+  @Input() public userPic = true;
+
+  ngOnInit() {
+    const botID = this.botID;
+    if (botID) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      window.onTelegramAuth = (tgAuthData: ITelegramAuthData) => {
+        // https://core.telegram.org/widgets/login#receiving-authorization-data
+        // After a successful authorization, the widget returns data
+        // by calling the callback function data-onauth with the JSON-object containing
+        // id, first_name, last_name, username, photo_url, auth_date and hash fields.
+        authWithTelegramService.loginWithTelegram(
+          botID,
+          tgAuthData,
+          this.isUserAuthenticated,
+        );
+      };
+
+      const script = this.document.createElement('script');
+
+      script.src = 'https://telegram.org/js/telegram-widget.js?22';
+      script.setAttribute('data-telegram-login', botID);
+      script.setAttribute('data-request-access', this.requestAccess);
+      script.setAttribute('data-size', this.size);
+      if (!this.userPic) {
+        script.setAttribute('data-userpic', 'false');
+      }
+      // https://core.telegram.org/widgets/login#receiving-authorization-data
+      // After a successful authorization, the widget returns data
+      // by calling the callback function data-onauth with the JSON-object containing
+      // id, first_name, last_name, username, photo_url, auth_date and hash fields.
+      script.setAttribute('data-onauth', 'onTelegramAuth(user)');
+      this.el.nativeElement.appendChild(script);
+    }
+  }
+}

package/src/lib/pages/login-page/sneat-auth-with-telegram.service.spec.ts

@@ -0,0 +1,31 @@
+import { TestBed } from '@angular/core/testing';
+import { SneatApiService } from '@sneat/api';
+import { SneatAuthStateService } from '@sneat/auth-core';
+import { ErrorLogger } from '@sneat/core';
+import { SneatAuthWithTelegramService } from './sneat-auth-with-telegram.service';
+
+describe('SneatAuthWithTelegramService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        SneatAuthWithTelegramService,
+        {
+          provide: ErrorLogger,
+          useValue: { logError: vi.fn(), logErrorHandler: () => vi.fn() },
+        },
+        {
+          provide: SneatApiService,
+          useValue: { post: vi.fn(), postAsAnonymous: vi.fn() },
+        },
+        {
+          provide: SneatAuthStateService,
+          useValue: { signInWithToken: vi.fn() },
+        },
+      ],
+    });
+  });
+
+  it('should be created', () => {
+    expect(TestBed.inject(SneatAuthWithTelegramService)).toBeTruthy();
+  });
+});

package/src/lib/pages/login-page/sneat-auth-with-telegram.service.ts

@@ -0,0 +1,56 @@
+import { Injectable, inject } from '@angular/core';
+import { SneatApiService } from '@sneat/api';
+import { SneatAuthStateService } from '@sneat/auth-core';
+import { ErrorLogger, IErrorLogger } from '@sneat/core';
+import { Observable } from 'rxjs';
+
+export interface ITelegramAuthData {
+  id: number;
+  first_name: string;
+  last_name: string;
+  username?: string;
+  photo_url?: string;
+  auth_date: number;
+  hash: string;
+}
+
+interface IResponse {
+  token: string;
+}
+
+@Injectable()
+export class SneatAuthWithTelegramService {
+  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);
+  private readonly apiService = inject(SneatApiService);
+  private readonly authService = inject(SneatAuthStateService);
+
+  public loginWithTelegram(
+    botID: string,
+    tgAuthData: ITelegramAuthData,
+    isUserAuthenticated: boolean,
+  ): void {
+    const postRequest: (
+      endpoint: string,
+      body: unknown,
+    ) => Observable<IResponse> = isUserAuthenticated
+      ? (endpoint: string, body: unknown) =>
+          this.apiService.post<IResponse>(endpoint, body)
+      : (endpoint: string, body: unknown) =>
+          this.apiService.postAsAnonymous<IResponse>(endpoint, body);
+    postRequest(
+      'auth/login-from-telegram-widget?botID=' + botID,
+      tgAuthData,
+    ).subscribe({
+      next: (response) => {
+        this.authService
+          .signInWithToken(response.token)
+          .catch(
+            this.errorLogger.logErrorHandler(
+              'Failed to sign-in with custom token',
+            ),
+          );
+      },
+      error: this.errorLogger.logErrorHandler('signInWithTelegram() error:'),
+    });
+  }
+}

package/src/lib/pages/sign-in-from-email-link/sign-in-from-email-link-page.component.html

@@ -0,0 +1,35 @@
+<ion-header>
+  <ion-toolbar color="light">
+    <ion-title>Signing in with email link</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-card>
+    @if (!emailFromStorage) {
+      <p>
+        Welcome to our app! For your safety please re-type your email address to
+        sign-in.
+      </p>
+    }
+    <ion-item>
+      <ion-icon name="mail-outline" slot="start" />
+      <ion-input
+        label="Email"
+        [required]="true"
+        [readonly]="isSigning"
+        [value]="email"
+        [disabled]="emailFromStorage || isSigning"
+      />
+    </ion-item>
+
+    <ion-button [disabled]="isSigning" (click)="signIn()">
+      <ion-label>
+        @if (isSigning) {
+          Signing in...
+        } @else {
+          Sign in
+        }
+      </ion-label>
+    </ion-button>
+  </ion-card>
+</ion-content>

package/src/lib/pages/sign-in-from-email-link/sign-in-from-email-link-page.component.spec.ts

@@ -0,0 +1,43 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NavController } from '@ionic/angular/standalone';
+import { SneatAuthStateService } from '@sneat/auth-core';
+import { ErrorLogger } from '@sneat/core';
+import { of } from 'rxjs';
+import { SignInFromEmailLinkPageComponent } from './sign-in-from-email-link-page.component';
+
+describe('SignInFromEmailLinkPageComponent', () => {
+  let component: SignInFromEmailLinkPageComponent;
+  let fixture: ComponentFixture<SignInFromEmailLinkPageComponent>;
+
+  beforeEach(waitForAsync(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SignInFromEmailLinkPageComponent],
+      providers: [
+        {
+          provide: ErrorLogger,
+          useValue: { logError: vi.fn(), logErrorHandler: () => vi.fn() },
+        },
+        {
+          provide: SneatAuthStateService,
+          useValue: { signInWithEmailLink: vi.fn(() => of({})) },
+        },
+        {
+          provide: NavController,
+          useValue: { navigateRoot: vi.fn(() => Promise.resolve()) },
+        },
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+      .overrideComponent(SignInFromEmailLinkPageComponent, {
+        set: { imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA] },
+      })
+      .compileComponents();
+    fixture = TestBed.createComponent(SignInFromEmailLinkPageComponent);
+    component = fixture.componentInstance;
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/pages/sign-in-from-email-link/sign-in-from-email-link-page.component.ts

@@ -0,0 +1,70 @@
+import { Component, inject } from '@angular/core';
+import {
+  IonButton,
+  IonCard,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonTitle,
+  IonToolbar,
+  NavController,
+} from '@ionic/angular/standalone';
+import { SneatAuthStateService } from '@sneat/auth-core';
+import { ErrorLogger, IErrorLogger } from '@sneat/core';
+
+@Component({
+  selector: 'sneat-sign-in-from-email-link-page',
+  templateUrl: 'sign-in-from-email-link-page.component.html',
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonCard,
+    IonItem,
+    IonIcon,
+    IonInput,
+    IonButton,
+    IonLabel,
+  ],
+})
+export class SignInFromEmailLinkPageComponent {
+  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);
+  private readonly authStateService = inject(SneatAuthStateService);
+  private readonly navController = inject(NavController);
+
+  email: string;
+  emailFromStorage = false;
+  isSigning = false;
+
+  constructor() {
+    this.email = localStorage.getItem('emailForSignIn') || '';
+    this.emailFromStorage = !!this.email;
+    if (this.email) {
+      this.signIn();
+    }
+  }
+
+  public signIn(): void {
+    this.isSigning = true;
+    this.authStateService.signInWithEmailLink(this.email).subscribe({
+      next: () => {
+        this.navController
+          .navigateRoot('/')
+          .catch(
+            this.errorLogger.logErrorHandler(
+              'Failed to navigate to root page after signing in with email link',
+            ),
+          );
+      },
+      error: (err) => {
+        this.isSigning = false;
+        this.emailFromStorage = false;
+        this.errorLogger.logError(err, 'Failed to sign in with email link');
+      },
+    });
+  }
+}

package/src/lib/pages/sneat-auth-routing.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+export const authRoutes: Routes = [
+  {
+    path: 'login',
+    loadComponent: () =>
+      import('./login-page/login-page.component').then(
+        (m) => m.LoginPageComponent,
+      ),
+  },
+  {
+    path: 'sign-in-from-email-link',
+    loadComponent: () =>
+      import('./sign-in-from-email-link/sign-in-from-email-link-page.component').then(
+        (m) => m.SignInFromEmailLinkPageComponent,
+      ),
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(authRoutes)],
+  exports: [RouterModule],
+})
+export class SneatAuthRoutingModule {}