Feat/invite user confirmation by RandithaK · Pull Request #397 · asgardeo/javascript

RandithaK · 2026-03-12T12:32:32Z

Purpose

Added Support for email invitation, retaining capability of invite link direct sharing as a fall back.

Related Issues

N/A

Related PRs

N/A

Checklist

Followed the CONTRIBUTING guidelines.
Manual test round performed and verified.
Documentation provided. (Add links if there are any)
Unit tests provided. (Add links if there are any)

Security checks

Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines?
Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets?

Executor ready, No SMTP Configured

part0.mp4

Executor ready,SMTP Configured

part1.mp4

Executor Removed, SMTP Configured

part2.mp4

Copilot

Pull request overview

Adds UI/state support in the React InviteUser v2 flow to detect when an invitation email was sent and show a dedicated confirmation state, while keeping the invite-link sharing flow as a fallback.

Changes:

Add isEmailSent to BaseInviteUser render props and track emailSent state from additionalData.emailSent.
Render a new success card when an invite email is detected as successfully sent.
Add a changeset to publish the update as a patch for @asgardeo/react.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
packages/react/src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx	Tracks `emailSent` from flow responses and adds an email-sent success UI branch.
.changeset/rude-zebras-dress.md	Declares a patch release note for the new invite-via-email capability.

Comments suppressed due to low confidence (1)

packages/react/src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx:454

In handleSubmit, inviteLink/emailSent state is updated before checking response.flowStatus === 'ERROR'. If the backend returns additionalData.inviteLink or emailSent alongside an error (or a stale value), the component can end up rendering a success state even though an error was reported. Consider checking flowStatus and handling errors before mutating success-related state, or explicitly clearing inviteLink/emailSent when an error response is received.

        // Check if invite link is in the response
        if (response.data?.additionalData?.['inviteLink']) {
          const inviteLinkValue: any = response.data.additionalData['inviteLink'];
          setInviteLink(inviteLinkValue);
          onInviteLinkGenerated?.(inviteLinkValue, response.flowId);
        }

        // Check if email was sent successfully
        if (response.data?.additionalData?.['emailSent'] === 'true') {
          setEmailSent(true);
        }

        // Check for error status
        if (response.flowStatus === 'ERROR') {
          handleError(response);
          return;

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-12T12:35:10Z

packages/react/src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx

+  // Invite email sent successfully - show email sent confirmation
+  if (isInviteGenerated && isEmailSent) {
+    return (
+      <CardPrimitive className={cx(className, styles.card)} variant={variant}>
+        <CardPrimitive.Header className={styles.header}>
+          <CardPrimitive.Title level={2} className={styles.title}>
+            Invite Email Sent!
+          </CardPrimitive.Title>
+        </CardPrimitive.Header>
+        <CardPrimitive.Content>
+          <AlertPrimitive variant="success">
+            <AlertPrimitive.Description>
+              An invitation email has been sent successfully. The user can complete their registration using the link in
+              the email.
+            </AlertPrimitive.Description>
+          </AlertPrimitive>
+          <div style={{display: 'flex', gap: '0.5rem', marginTop: '1.5rem'}}>
+            <Button variant="outline" onClick={resetFlow}>
+              Invite Another User
+            </Button>
+          </div>
+        </CardPrimitive.Content>
+      </CardPrimitive>
+    );
+  }


The email-sent confirmation UI is currently gated by isInviteGenerated && isEmailSent, but isInviteGenerated is derived from inviteLink. If the platform successfully sends an email invitation without returning an inviteLink in additionalData, the component will never show the email confirmation state (even though emailSent is true). Consider keying this branch primarily off isEmailSent (and only using inviteLink for the fallback copy-link path).

.changeset/rude-zebras-dress.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

ThaminduDilshan · 2026-03-12T14:26:58Z

@RandithaK can you fix lint issues reported in [PR Builder / ⬣ ESLint (STATIC ANALYSIS) (lts/*, latest)?
Other two failing jobs, you can ignore for now

…rity

RandithaK · 2026-03-12T16:01:18Z

@RandithaK can you fix lint issues reported in [PR Builder / ⬣ ESLint (STATIC ANALYSIS) (lts/*, latest)? Other two failing jobs, you can ignore for now

Fixed

asgardeo-github-bot · 2026-03-12T16:08:15Z

🦋 Changeset detected

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

ThaminduDilshan · 2026-03-12T16:12:29Z

We'll need to do some improvements later. But merging current changes due to urgency

DonOmalVindula · 2026-03-12T19:35:05Z

packages/react/src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx

+      <CardPrimitive className={cx(className, styles.card)} variant={variant}>
+        <CardPrimitive.Header className={styles.header}>
+          <CardPrimitive.Title level={2} className={styles.title}>
+            Invite Email Sent!


All user-facing strings should go through t() hook to support i18n and translations.

The existing "Invite Link Generated!" block also hardcodes strings. That's a pre-existing bug, let's fix it with this effort as well.

DonOmalVindula · 2026-03-12T19:39:43Z

packages/react/src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx


+        // Check if email was sent successfully
+        if (response.data?.additionalData?.['emailSent'] === 'true') {
+          setEmailSent(true);


If the server returns BOTH emailSent: 'true' AND flowStatus: 'ERROR', you'll set emailSent = true and then also trigger error handling. The UI will show the email-sent success card because isInviteGenerated && isEmailSent is checked first in the render. The user will see a success message for a failed flow which is incorrect.

Move the emailSent check to AFTER the error check, or guard it with response.flowStatus !== 'ERROR'.

DonOmalVindula · 2026-03-12T19:42:35Z

packages/react/src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx

  const {title, subtitle} = extractHeadings(components);
  const componentsWithoutHeadings: any = filterHeadings(components);
  const isInviteGenerated: any = !!inviteLink;
+  const isEmailSent: boolean = emailSent;


emailSent is already a boolean from useState(false). Here you are creating a new variable with the same type and same value.

Better to rename the state itself to isEmailSent as it follows convention and use it.

DonOmalVindula · 2026-03-12T19:45:05Z

packages/react/src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx

+              the email.
+            </AlertPrimitive.Description>
+          </AlertPrimitive>
+          <div style={{display: 'flex', gap: '0.5rem', marginTop: '1.5rem'}}>


This file has a dedicated BaseInviteUser.styles.ts that uses @emotion/css with theme tokens. Your 0.5rem and 1.5rem should use theme.vars.spacing.unit like the rest of the styles file does. Hardcoded pixel/rem values break when someone changes the spacing scale and will hinder if we want to override these styles from branding etc.

DonOmalVindula · 2026-03-12T19:47:17Z

packages/react/src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx

+      <CardPrimitive className={cx(className, styles.card)} variant={variant}>
+        <CardPrimitive.Header className={styles.header}>
+          <CardPrimitive.Title level={2} className={styles.title}>
+            Invite Email Sent!


Your new email-sent block is nearly identical to the existing invite-link block.

This is copy-paste with different text. Extract a shared SuccessCard component or at minimum a helper that takes title, description, and optional extra content. The invite-link block could pass the copy-link section as children.

DonOmalVindula · 2026-03-12T19:49:12Z

packages/react/src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx

@@ -624,6 +636,7 @@ const BaseInviteUser: FC<BaseInviteUserProps> = ({
  const {title, subtitle} = extractHeadings(components);
  const componentsWithoutHeadings: any = filterHeadings(components);


Not related to your changes, but when you fix the above-mentioned issues, better to fix these any typed variables to have a proper types.

DonOmalVindula · 2026-03-12T19:50:11Z

packages/react/src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx

  const [touchedFields, setTouchedFields] = useState<Record<string, boolean>>({});
  const [inviteLink, setInviteLink] = useState<string | undefined>();
  const [inviteLinkCopied, setInviteLinkCopied] = useState(false);
+  const [emailSent, setEmailSent] = useState(false);


Use types

Suggested change

const [emailSent, setEmailSent] = useState(false);

const [emailSent, setEmailSent] = useState<boolean>(false);

RandithaK added 2 commits March 12, 2026 17:44

feat: add email sent confirmation to invite user flow

853eda6

chore: add changeset 🦋

fa14d22

Copilot AI review requested due to automatic review settings March 12, 2026 12:32

Copilot started reviewing on behalf of RandithaK March 12, 2026 12:33 View session

Copilot AI reviewed Mar 12, 2026

View reviewed changes

Update .changeset/rude-zebras-dress.md

6020ab3

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

thiva-k approved these changes Mar 12, 2026

View reviewed changes

ThaminduDilshan previously approved these changes Mar 12, 2026

View reviewed changes

refactor: swap invite email and invite link status properties for cla…

65f7cba

…rity

RandithaK dismissed ThaminduDilshan’s stale review via 65f7cba March 12, 2026 15:59

ThaminduDilshan approved these changes Mar 12, 2026

View reviewed changes

ThaminduDilshan merged commit 8c7f686 into asgardeo:main Mar 12, 2026
6 of 8 checks passed

asgardeo-github-bot mentioned this pull request Mar 12, 2026

[Release] [GitHub Action] Update package versions #398

Merged

DonOmalVindula reviewed Mar 12, 2026

View reviewed changes

		@@ -624,6 +636,7 @@ const BaseInviteUser: FC<BaseInviteUserProps> = ({
		const {title, subtitle} = extractHeadings(components);
		const componentsWithoutHeadings: any = filterHeadings(components);

	const [emailSent, setEmailSent] = useState(false);
	const [emailSent, setEmailSent] = useState<boolean>(false);

Conversation

RandithaK commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose

Related Issues

Related PRs

Checklist

Security checks

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ThaminduDilshan commented Mar 12, 2026

Uh oh!

RandithaK commented Mar 12, 2026

Uh oh!

asgardeo-github-bot commented Mar 12, 2026

🦋 Changeset detected

Uh oh!

ThaminduDilshan commented Mar 12, 2026

Uh oh!

Uh oh!

DonOmalVindula Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

DonOmalVindula Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

DonOmalVindula Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

DonOmalVindula Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

DonOmalVindula Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

DonOmalVindula Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

DonOmalVindula Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

RandithaK commented Mar 12, 2026 •

edited

Loading