Added oauth2 authorization

DEV.md

@@ -18,6 +18,7 @@ EmptyError is thrown by the `first` pipe if the source observable is closed befo
 Fix: Use `take(1)` instead of `first()`.
 
 ### Multiple actions/requests, only one is going through
+
 In the ngrx effects, use `mergeMap` instead of `switchMap`
 
 ### Firebase: The caller does not have permission
@@ -104,6 +105,7 @@ If using Cloudflare DNS, you need to setup full SSL mode instead of flexible mod
 <!-- background:linear-gradient(135deg,#00F5A0 0%,#00D9F5 100%); -->
 
 ### Signing MacOS app
+
 https://www.codiga.io/blog/notarize-sign-electron-app/
 
 ### Updating angular
@@ -113,3 +115,7 @@ https://www.codiga.io/blog/notarize-sign-electron-app/
 - Run migrate only commands if not completely successful
   - `yarn ng update @angular/core --allow-dirty --force --migrate-only --from=15 --to=16`
   - `yarn ng update @angular/cli --allow-dirty --force --migrate-only --from=15 --to=16`
+
+### Stripe listen throwing api_key_expired error
+
+Login to stripe CLI using `stripe login` and it should work again

packages/altair-api-utils/src/client.ts

@@ -19,11 +19,7 @@ import {
   QueryItemRevision,
 } from '@altairgraphql/db';
 import { IPlan, IPlanInfo, IUserProfile, IUserStats } from './user';
-import {
-  ICreateTeamDto,
-  ICreateTeamMembershipDto,
-  IUpdateTeamDto,
-} from './team';
+import { ICreateTeamDto, ICreateTeamMembershipDto, IUpdateTeamDto } from './team';
 import { from, Observable, Subject } from 'rxjs';
 import { map, switchMap, take } from 'rxjs/operators';
 import { ReturnedWorkspace } from './workspace';
@@ -69,7 +65,7 @@ export class APIClient {
     this.ky = ky.extend({
       prefixUrl: options.apiBaseUrl,
       hooks: {
-        beforeRequest: [req => this.setAuthHeaderBeforeRequest(req)],
+        beforeRequest: [(req) => this.setAuthHeaderBeforeRequest(req)],
       },
     });
 
@@ -118,7 +114,7 @@ export class APIClient {
       'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
     let array = new Uint8Array(40);
     crypto.getRandomValues(array);
-    array = array.map(x => validChars.charCodeAt(x % validChars.length));
+    array = array.map((x) => validChars.charCodeAt(x % validChars.length));
     return String.fromCharCode(...array);
   }
 
@@ -138,9 +134,7 @@ export class APIClient {
   }
 
   async getUser() {
-    return this.observeUser()
-      .pipe(take(1))
-      .toPromise();
+    return this.observeUser().pipe(take(1)).toPromise();
   }
   async signInWithCustomToken(token: string) {
     this.authToken = token;
@@ -160,7 +154,7 @@ export class APIClient {
 
   private async signinWithPopupGetToken() {
     const nonce = this.nonce();
-    const popup = window.open(this.getPopupUrl(nonce), 'Altair GraphQL');
+    const popup = window.open(this.getPopupUrl(nonce), '_blank');
     if (!popup) {
       throw new Error('Could not create signin popup!');
     }
@@ -275,9 +269,7 @@ export class APIClient {
   }
 
   addTeamMember(input: ICreateTeamMembershipDto) {
-    return this.ky
-      .post('team-memberships', { json: input })
-      .json<TeamMembership>();
+    return this.ky.post('team-memberships', { json: input }).json<TeamMembership>();
   }
 
   getTeamMembers(teamId: string) {
@@ -330,10 +322,10 @@ export class APIClient {
   }
 
   private fromEventSource(url: string) {
-    return new Observable(subscriber => {
+    return new Observable((subscriber) => {
       const eventSource = new EventSource(url);
-      eventSource.onmessage = x => subscriber.next(x.data);
-      eventSource.onerror = x => subscriber.error(x);
+      eventSource.onmessage = (x) => subscriber.next(x.data);
+      eventSource.onerror = (x) => subscriber.error(x);
 
       return () => {
         eventSource?.close();
@@ -344,14 +336,14 @@ export class APIClient {
   listenForEvents() {
     return from(this.getSLT()).pipe(
       take(1),
-      map(res => {
+      map((res) => {
         const url = new URL('/events', this.options.apiBaseUrl);
 
         url.searchParams.append('slt', res.slt);
 
         return url.href;
       }),
-      switchMap(url => this.fromEventSource(url))
+      switchMap((url) => this.fromEventSource(url))
     );
   }
 }

packages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.html

@@ -5,7 +5,10 @@
       <nz-form-control [nzSm]="8" nzErrorTip="The input is not a valid type!">
         <nz-select formControlName="type">
           @for (item of AUTH_TYPES; track $index) {
-            <nz-option [nzValue]="item" [nzLabel]="AUTH_MAPPING[item].copy | translate"></nz-option>
+            <nz-option
+              [nzValue]="item"
+              [nzLabel]="AUTH_MAPPING[item].copy | translate"
+            ></nz-option>
           }
         </nz-select>
       </nz-form-control>
@@ -30,5 +33,11 @@
         (authDataChange)="authDataChange.emit($event)"
       />
     }
+    @case ('oauth2') {
+      <app-authorization-oauth2
+        [authData]="authorizationState?.data"
+        (authDataChange)="authDataChange.emit($event)"
+      />
+    }
   }
 </div>

packages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.html

@@ -0,0 +1,189 @@
+<form nz-form nzLayout="vertical" [formGroup]="form">
+  <nz-form-item>
+    <nz-form-label>Grant Type</nz-form-label>
+    <nz-form-control [nzSm]="8" nzErrorTip="The input is not a valid type!">
+      <nz-select formControlName="type">
+        <nz-option
+          [nzValue]="oauth2Type.AUTHORIZATION_CODE"
+          nzLabel="Authorization Code"
+        ></nz-option>
+        <nz-option
+          [nzValue]="oauth2Type.AUTHORIZATION_CODE_PKCE"
+          nzLabel="Authorization Code with PKCE"
+        ></nz-option>
+      </nz-select>
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-label nzRequired nzFor="clientId">Client ID</nz-form-label>
+    <nz-form-control
+      [nzSm]="14"
+      [nzXs]="24"
+      nzErrorTip="The input is not a valid client ID!"
+    >
+      <app-x-input
+        nz-input
+        formControlName="clientId"
+        id="clientId"
+        class="input"
+        autocomplete="off"
+      />
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-label nzRequired nzFor="clientSecret">Client Secret</nz-form-label>
+    <nz-form-control
+      [nzSm]="14"
+      [nzXs]="24"
+      nzErrorTip="The input is not a valid client secret!"
+    >
+      <app-x-input
+        nz-input
+        formControlName="clientSecret"
+        id="clientSecret"
+        class="input"
+        autocomplete="off"
+      />
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-label
+      nzRequired
+      nzFor="redirectUri"
+      nzTooltipTitle="The callback (redirect) URL"
+      >Callback URL (readonly)</nz-form-label
+    >
+    <nz-form-control
+      [nzSm]="14"
+      [nzXs]="24"
+      nzErrorTip="The input is not a valid URL!"
+    >
+      <app-x-input
+        nz-input
+        formControlName="redirectUri"
+        id="redirectUri"
+        class="input input--transparent"
+        autocomplete="off"
+        [readonly]="true"
+      />
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-label nzRequired nzFor="authorizationEndpoint"
+      >Authorization URL</nz-form-label
+    >
+    <nz-form-control
+      [nzSm]="14"
+      [nzXs]="24"
+      nzErrorTip="The input is not a valid URL!"
+    >
+      <app-x-input
+        nz-input
+        formControlName="authorizationEndpoint"
+        id="authorizationEndpoint"
+        class="input"
+        autocomplete="off"
+      />
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-label nzRequired nzFor="tokenEndpoint">Access token URL</nz-form-label>
+    <nz-form-control
+      [nzSm]="14"
+      [nzXs]="24"
+      nzErrorTip="The input is not a valid URL!"
+    >
+      <app-x-input
+        nz-input
+        formControlName="tokenEndpoint"
+        id="tokenEndpoint"
+        class="input"
+        autocomplete="off"
+      />
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-label
+      nzRequired
+      nzFor="scope"
+      nzTooltipTitle="The scope of the request. It can contain multiple space-delimited values"
+    >
+      Scope
+    </nz-form-label>
+    <nz-form-control
+      [nzSm]="14"
+      [nzXs]="24"
+      nzErrorTip="The input is not a valid scope!"
+    >
+      <app-x-input
+        nz-input
+        formControlName="scope"
+        id="scope"
+        class="input"
+        placeholder="read:users user:email"
+        autocomplete="off"
+      />
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-label nzFor="state">State</nz-form-label>
+    <nz-form-control
+      [nzSm]="14"
+      [nzXs]="24"
+      nzErrorTip="The input is not a valid state!"
+    >
+      <app-x-input
+        nz-input
+        formControlName="state"
+        id="state"
+        class="input"
+        autocomplete="off"
+      />
+    </nz-form-control>
+  </nz-form-item>
+  @if (form.value.type === oauth2Type.AUTHORIZATION_CODE_PKCE) {
+    <nz-form-item>
+      <nz-form-label nzFor="codeVerifier">Code verifier</nz-form-label>
+      <nz-form-control
+        [nzSm]="14"
+        [nzXs]="24"
+        nzErrorTip="The input is not a valid code verifier!"
+      >
+        <app-x-input
+          nz-input
+          formControlName="codeVerifier"
+          id="codeVerifier"
+          class="input"
+          autocomplete="off"
+        />
+      </nz-form-control>
+    </nz-form-item>
+  }
+  <button class="btn btn--bordered" type="submit" (click)="handleGetAccessToken()">
+    Get access token
+  </button>
+</form>
+
+<div class="authorization__result-section">
+  <nz-form-item>
+    <nz-form-label nzFor="accessToken">Access token</nz-form-label>
+    <nz-form-control>
+      <input
+        nz-input
+        id="accessToken"
+        class="input input--transparent"
+        autocomplete="off"
+        [readonly]="true"
+        [value]="form.value.accessTokenResponse?.access_token ?? ''"
+      />
+    </nz-form-control>
+  </nz-form-item>
+
+  <button
+    class="btn"
+    type="submit"
+    (click)="form.patchValue({ accessTokenResponse: undefined })"
+  >
+    Clear
+  </button>
+</div>

packages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthorizationOauth2Component } from './authorization-oauth2.component';
+import { SharedModule } from 'app/modules/altair/modules/shared/shared.module';
+import { MockModule, MockService } from 'ng-mocks';
+import { ComponentModule } from '../../components.module';
+import { NotifyService } from 'app/modules/altair/services';
+
+describe('AuthorizationOauth2Component', () => {
+  let component: AuthorizationOauth2Component;
+  let fixture: ComponentFixture<AuthorizationOauth2Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AuthorizationOauth2Component],
+      imports: [MockModule(SharedModule), MockModule(ComponentModule)],
+      providers: [
+        {
+          provide: NotifyService,
+          useValue: MockService(NotifyService),
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AuthorizationOauth2Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});