feat(clerk-js): Add more attributes on organization models

Type fixes and sign-in loading screen

packages/clerk-js/src/core/resources/Organization.ts

@@ -48,7 +48,7 @@ export class Organization extends BaseResource implements OrganizationResource {
       .request<OrganizationJSON[]>({
         method: 'GET',
         path: '/me/organizations',
-        search: JSON.stringify(getOrganizationParams),
+        search: getOrganizationParams as any,
       })
       .then(res => {
         const organizationsJSON = res.payload
@@ -60,28 +60,27 @@ export class Organization extends BaseResource implements OrganizationResource {
   getMembers = async (
     getMemberParams?: GetMembersParams,
   ): Promise<OrganizationMembership[]> => {
-    // @ts-ignore
-    return await BaseResource._fetch<OrganizationMembershipJSON[]>({
+    return await BaseResource._fetch({
       path: `/organizations/${this.id}/memberships`,
       method: 'GET',
-      search: getMemberParams,
+      search: getMemberParams as any,
     })
       .then(res => {
-        const members = res?.response as OrganizationMembershipJSON[];
+        const members =
+          res?.response as unknown as OrganizationMembershipJSON[];
         return members.map(member => new OrganizationMembership(member));
       })
       .catch(() => []);
   };
 
-  getPendingInvitations = async (): Promise<OrganizationInvitation> => {
-    // @ts-ignore
-    return await BaseResource._fetch<OrganizationInvitationJSON[]>({
+  getPendingInvitations = async (): Promise<OrganizationInvitation[]> => {
+    return await BaseResource._fetch({
       path: `/organizations/${this.id}/invitations/pending`,
       method: 'GET',
     })
       .then(res => {
         const pendingInvitations =
-          res?.response as OrganizationInvitationJSON[];
+          res?.response as unknown as OrganizationInvitationJSON[];
         return pendingInvitations.map(
           pendingInvitation => new OrganizationInvitation(pendingInvitation),
         );
@@ -126,8 +125,8 @@ export class Organization extends BaseResource implements OrganizationResource {
 }
 
 export type GetOrganizationParams = {
-  limit: number;
-  offset: number;
+  limit?: number;
+  offset?: number;
 };
 
 export type InviteUserParams = {

packages/clerk-js/src/core/resources/OrganizationInvitation.ts

@@ -16,6 +16,7 @@ export class OrganizationInvitation
   emailAddress!: string;
   organizationId!: string;
   status!: OrganizationInvitationStatus;
+  role!: MembershipRole;
   createdAt!: Date;
   updatedAt!: Date;
 
@@ -53,6 +54,7 @@ export class OrganizationInvitation
     this.id = data.id;
     this.emailAddress = data.email_address;
     this.organizationId = data.organization_id;
+    this.role = data.role;
     this.status = data.status;
     this.createdAt = unixEpochToDate(data.created_at);
     this.updatedAt = unixEpochToDate(data.updated_at);

packages/clerk-js/src/core/resources/OrganizationMembership.ts

@@ -24,6 +24,7 @@ export class OrganizationMembership implements OrganizationMembershipResource {
       lastName: data.public_user_data.last_name,
       profileImageUrl: data.public_user_data.profile_image_url,
       identifier: data.public_user_data.identifier,
+      userId: data.public_user_data.user_id,
     };
     this.role = data.role;
     this.createdAt = unixEpochToDate(data.created_at);

packages/clerk-js/src/ui/signIn/SignInStart.tsx

@@ -10,6 +10,7 @@ import {
   FieldState,
   getIdentifierControlDisplayValues,
   handleError,
+  LoadingScreen,
   PoweredByClerk,
   Separator,
   useFieldState,
@@ -42,6 +43,7 @@ export function _SignInStart(): JSX.Element {
   const instantPassword = useFieldState('password', '');
   const organizationTicket = getClerkQueryParam('__clerk_ticket') || '';
   const [error, setError] = React.useState<string | undefined>();
+  const [isLoading, setIsLoading] = React.useState(false);
 
   const standardFormAttributes = userSettings.enabledFirstFactorIdentifiers;
   const web3FirstFactors = userSettings.web3FirstFactors;
@@ -56,6 +58,7 @@ export function _SignInStart(): JSX.Element {
       return;
     }
 
+    setIsLoading(true);
     signIn
       .create({
         strategy: 'ticket',
@@ -74,6 +77,12 @@ export function _SignInStart(): JSX.Element {
             alert(msg);
           }
         }
+      })
+      .catch(err => {
+        return attemptToRecoverFromSignInError(err);
+      })
+      .finally(() => {
+        setIsLoading(false);
       });
   }, []);
 
@@ -160,6 +169,10 @@ export function _SignInStart(): JSX.Element {
   const hasSocialOrWeb3Buttons =
     !!socialProviderStrategies.length || !!web3FirstFactors.length;
 
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
   return (
     <>
       <Header error={error} />

packages/clerk-js/src/ui/signUp/SignUpStart.tsx

@@ -2,6 +2,7 @@ import { Control } from '@clerk/shared/components/control';
 import { Form } from '@clerk/shared/components/form';
 import { Input } from '@clerk/shared/components/input';
 import { PhoneInput } from '@clerk/shared/components/phoneInput';
+import { noop } from '@clerk/shared/utils';
 import { SignUpParams, SignUpResource } from '@clerk/types';
 import React from 'react';
 import type { FieldState } from 'ui/common';
@@ -156,9 +157,15 @@ function _SignUpStart(): JSX.Element {
     }
 
     if (fields.organizationInvitationToken) {
+      // FIXME: Constructing a fake fields object for strategy.
       reqFields.push(
-        // @ts-ignore
-        { name: 'strategy', value: 'ticket', setError: () => ({}) },
+        {
+          name: 'strategy',
+          value: 'ticket',
+          setError: noop,
+          setValue: noop,
+          error: undefined,
+        },
         formFields.emailAddress,
       );
     }

packages/types/src/json.ts

@@ -208,6 +208,7 @@ export interface PublicUserDataJSON extends ClerkResourceJSON {
   last_name: string | null;
   profile_image_url: string;
   identifier: string;
+  user_id?: string;
 }
 
 export interface SessionWithActivitiesJSON extends Omit<SessionJSON, 'user'> {
@@ -328,6 +329,7 @@ export interface OrganizationInvitationJSON extends ClerkResourceJSON {
   organization_id: string;
   email_address: string;
   status: OrganizationInvitationStatus;
+  role: MembershipRole;
   created_at: number;
   updated_at: number;
 }

packages/types/src/organizationInvitation.ts

@@ -1,7 +1,10 @@
+import { MembershipRole } from '.';
+
 export interface OrganizationInvitationResource {
   id: string;
   emailAddress: string;
   organizationId: string;
+  role: MembershipRole;
   status: OrganizationInvitationStatus;
   createdAt: Date;
   updatedAt: Date;

packages/types/src/session.ts

@@ -62,4 +62,5 @@ export interface PublicUserData {
   lastName: string | null;
   profileImageUrl: string;
   identifier: string;
+  userId?: string;
 }