#github-username

frontend/src/static/js/components/webstatus-login.ts

@@ -18,8 +18,10 @@ import {consume} from '@lit/context';
 import {LitElement, type TemplateResult, html, nothing} from 'lit';
 import {customElement, state} from 'lit/decorators.js';
 
-import {User} from 'firebase/auth';
-import {firebaseUserContext} from '../contexts/firebase-user-context.js';
+import {
+  FirebaseUser,
+  firebaseUserContext,
+} from '../contexts/firebase-user-context.js';
 import {
   AuthConfig,
   firebaseAuthContext,
@@ -34,7 +36,7 @@ export class WebstatusLogin extends LitElement {
 
   @consume({context: firebaseUserContext, subscribe: true})
   @state()
-  user?: User;
+  user?: FirebaseUser;
 
   handleLogInClick(authConfig: AuthConfig) {
     if (this.user === undefined) {
@@ -72,14 +74,14 @@ export class WebstatusLogin extends LitElement {
   }
 
   renderAuthenticatedButton(
-    user: User,
+    user: FirebaseUser,
     authConfig: AuthConfig
   ): TemplateResult {
     return html`
       <sl-dropdown>
         <sl-button slot="trigger" caret
           ><sl-icon slot="prefix" name="${authConfig.icon}"></sl-icon
-          >${user.email}</sl-button
+          >${user?.gitHubUsername || user.email}</sl-button
         >
         <sl-menu>
           <sl-menu-item @click=${() => this.handleLogOutClick(authConfig)}

frontend/src/static/js/contexts/firebase-user-context.ts

@@ -19,6 +19,12 @@ import {createContext} from '@lit/context';
 import type {User} from 'firebase/auth';
 export type {User} from 'firebase/auth';
 
-export const firebaseUserContext = createContext<User | undefined>(
+export const firebaseUserContext = createContext<FirebaseUser | undefined>(
   'firebase-user'
 );
+
+type FirebaseUser = User & {
+  gitHubUsername: string | null;
+};
+
+export type {FirebaseUser};

frontend/src/static/js/services/webstatus-firebase-auth-service.ts

@@ -16,6 +16,7 @@
 
 import {customElement, property, state} from 'lit/decorators.js';
 import {consume, provide} from '@lit/context';
+import {Task} from '@lit/task';
 import {
   FirebaseApp,
   firebaseAppContext,
@@ -31,14 +32,19 @@ import {
   getAuth,
   signInWithPopup,
 } from 'firebase/auth';
-import {User, firebaseUserContext} from '../contexts/firebase-user-context.js';
+import {
+  User,
+  FirebaseUser,
+  firebaseUserContext,
+} from '../contexts/firebase-user-context.js';
 import {ServiceElement} from './service-element.js';
-
 interface FirebaseAuthSettings {
   emulatorURL: string;
   tenantID: string;
 }
 
+const GITHUB_USERNAME_REQUEST_URL: string = 'https://api.github.com/user/';
+
 @customElement('webstatus-firebase-auth-service')
 export class WebstatusFirebaseAuthService extends ServiceElement {
   @property({type: Object})
@@ -52,14 +58,41 @@ export class WebstatusFirebaseAuthService extends ServiceElement {
   firebaseAuthConfig?: AuthConfig;
 
   @provide({context: firebaseUserContext})
-  user?: User;
+  user?: FirebaseUser;
+
+  _loadingGithubUsername?: Task;
 
   // Useful for testing
   authInitializer: (app: FirebaseApp | undefined) => Auth = getAuth;
 
   // Useful for testing
   emulatorConnector: (auth: Auth, url: string) => void = connectAuthEmulator;
 
+  handleGithubUsernameError(res: Response, email: string) {
+    const err = new Error();
+    if (res.status === 403 && res.headers.get('X-RateLimit-Remaining') == '0') {
+      const resetsAtMS = Number(`${res.headers.get('X-RateLimit-Reset')}000`);
+      err.message = `Status: ${res.status}, Rate limit exceeded, try again in ${Math.ceil((resetsAtMS - Date.now()) / 60000)}m`;
+    } else if (res.status === 404) {
+      err.message = `Status: ${res.status}, Could not find user data for github: ${email}`;
+    } else {
+      // add other cases if you want to handle them
+      err.message = `Unexpected status code: ${res.status}`;
+    }
+    throw err;
+  }
+
+  async getGithubUser(token: string): Promise<any> {
+    return fetch(`${GITHUB_USERNAME_REQUEST_URL}`, {
+      method: 'GET',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        Accept: 'application/vnd.github+json',
+        'X-GitHub-Api-Version': '2022-11-28',
+      },
+    });
+  }
+
   initFirebaseAuth() {
     if (this.firebaseApp) {
       const auth = this.authInitializer(this.firebaseApp);
@@ -84,8 +117,45 @@ export class WebstatusFirebaseAuthService extends ServiceElement {
       // Set up the callback that will detect when:
       // 1. The user first logs in
       // 2. Resuming a session
-      this.firebaseAuthConfig.auth.onAuthStateChanged(user => {
-        this.user = user ? user : undefined;
+      this.firebaseAuthConfig.auth.onAuthStateChanged((user: User | null) => {
+        if (user !== null) {
+          this.user =
+            user !== null ? {...user, gitHubUsername: 'empty'} : undefined;
+          this._loadingGithubUsername = new Task(this, {
+            args: (): [any] => [this.user],
+            task: async ([firebaseUser]: [any]) => {
+              try {
+                if (
+                  firebaseUser &&
+                  typeof firebaseUser !== 'string' &&
+                  firebaseUser.accessToken
+                ) {
+                  const res: Response = await this.getGithubUser(
+                    firebaseUser.accessToken
+                  );
+                  if (res.ok) {
+                    const data = await res.json();
+                    if (this.user !== undefined) {
+                      this.user = {
+                        ...this.user,
+                        gitHubUsername: data.login,
+                      };
+                    }
+                  } else {
+                    this.handleGithubUsernameError(res, this.user?.email || '');
+                  }
+                } else {
+                  throw new Error('Github username request failed.');
+                }
+              } catch (e: any) {
+                console.error(e.message);
+              }
+            },
+          });
+          this._loadingGithubUsername.run();
+        } else {
+          throw new Error('Github username request failed.');
+        }
       });
     }
   }