Updating sign-in-with-esignet, removing optional parameter from config

[zesu22]

• Integrated the sign-in-with-esignet npm library, removing the dependency on the esignet service plugin URL.
• Updated optional parameters to be completely ignored if they are not provided at runtime.
• Abstracted configuration logic into a separate method dedicated to generating oidcConfigProp for sign-in-with-esignet library.
• Introduced the AUTHORIZE_ENDPOINT parameter, allowing relying parties to customize the authorization endpoint URL.

Summary by CodeRabbit

• Refactor

  • Sign-in/sign-up flows migrated to a new authentication integration with a centralized OIDC configuration builder.
  • Components cleaned up for more consistent parameter/state handling and minor UI markup refinements.

• Chores

  • Added a new authentication library dependency.
  • Docker build accepts and exposes a configurable authorize endpoint via env.

• Documentation

  • README updated with a structured configuration variables table and updated run instructions.

[coderabbitai]

Walkthrough

The PR centralizes OIDC configuration in getOidcConfig, adds the @mosip sign-in-with-esignet dependency, wires an authorize_endpoint build arg through Docker and env.env, and refactors Login/Registration/SignUp to use getOidcConfig + init while migrating imports and minor UI/jsx formatting.

Changes

OIDC Configuration Centralization and Sign-in Integration Refactor

Layer / File(s)	Summary
OIDC Configuration Infrastructure and Dependencies mock-relying-party-ui/src/constants/clientDetails.js, mock-relying-party-ui/package.json, mock-relying-party-ui/Dockerfile, mock-relying-party-ui/src/index.js, mock-relying-party-ui/README.md	Add getOidcConfig and safeParseClaims; export named clientDetails and getOidcConfig; read more optional fields from window.env; add @mosip/sign-in-with-esignet dependency; add Docker ARG authorize_endpoint, ENV AUTHORIZE_ENDPOINT, and append to env.env; relocate i18n import and adjust JSX formatting; update README env table and code fences.
Login Component Sign-in Initialization mock-relying-party-ui/src/components/Login.js	Replace inline OIDC config and window global init with getOidcConfig(...) + init(...) targeting #sign-in-with-esignet; simplify search-param usage; always render sign-in container; reformat small JSX pieces.
Registration & SignUp Component Sign-in Initialization mock-relying-party-ui/src/components/Registration.js, mock-relying-party-ui/src/components/SignUp.js	Use named clientDetails import and call getOidcConfig({ isRegistration: true, ui_locales, relyingPartyService }) where appropriate; initialize widget via imported init(...); convert OAuth params to const; minor whitespace/markup tweaks.
Sidenav & UserProfile Import Migration and Logic Refactor mock-relying-party-ui/src/components/Sidenav.js, mock-relying-party-ui/src/components/UserProfile.js	Switch clientDetails to named import; add useEffect for selected language and update language-change handler; change query and OAuth variable declarations to const; refactor setUserDetail claim/address/email handling and profile image src expressions; small formatting fixes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 The OIDC config now flows from one true spring,
Where getOidcConfig weaves each sign-in thing.
Components call the library, buttons bloom in view,
ENV and Docker whisper endpoints old and new.
A rabbit hops, approves the patch—hooray! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: integrating the sign-in-with-esignet library and refactoring config to handle optional parameters properly.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 7

🧹 Nitpick comments (1)

mock-relying-party-ui/src/components/Sidenav.js (1)

696-699: ⚡ Quick win

Inconsistent pattern with desktop implementation.

The mobile header uses a ternary expression for the profile picture fallback, while the desktop header at line 787 uses the cleaner nullish coalescing operator (??). Both should use the same pattern for consistency and maintainability.

♻️ Proposed refactor

                 src={
-                  userInfo?.picture?.value
-                    ? userInfo.picture?.value
-                    : "User-Profile-Icon.png"
+                  userInfo?.picture?.value ?? "User-Profile-Icon.png"
                 }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@mock-relying-party-ui/src/components/Sidenav.js` around lines 696 - 699, The
mobile header uses a ternary to choose the profile image while the desktop
header uses the nullish coalescing operator; update the mobile usage to match by
replacing the ternary expression that references userInfo?.picture?.value (in
Sidenav.js mobile header/render code) with the nullish coalescing pattern
(userInfo?.picture?.value ?? "User-Profile-Icon.png") so both header
implementations use the same consistent fallback approach.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@mock-relying-party-ui/Dockerfile`:
- Line 6: ARG authorize_endpoint and ENV AUTHORIZE_ENDPOINT are only declared in
the build stage, so the nginx stage (the second FROM nginx stage) never receives
AUTHORIZE_ENDPOINT and $AUTHORIZE_ENDPOINT expands empty when writing
${work_dir}/env.env; fix by redeclaring ARG authorize_endpoint and ENV
AUTHORIZE_ENDPOINT in the nginx stage (add "ARG authorize_endpoint" and "ENV
AUTHORIZE_ENDPOINT=${authorize_endpoint}" immediately after the "FROM nginx"
line) so the variable is available when the nginx stage uses $AUTHORIZE_ENDPOINT
to populate work_dir/env.env.

In `@mock-relying-party-ui/src/components/Login.js`:
- Around line 34-37: The useEffect in Login.js registers
i18n.on("languageChanged", ...) but never removes the listener, causing memory
leaks; refactor the effect to create a named/stable handler (e.g. const
handleLanguageChange = (lng) => renderSignInButton()) then call
i18n.on("languageChanged", handleLanguageChange) and return a cleanup function
that calls i18n.off("languageChanged", handleLanguageChange); apply the same
pattern to Registration.js and SignUp.js so each effect registers a named
handler and returns i18n.off in the cleanup.

In `@mock-relying-party-ui/src/components/Registration.js`:
- Around line 73-81: Registration.js still calls the global
window.SignInWithEsignetButton?.init instead of using the imported init used by
Login.js/SignUp.js; import the named init from '`@mosip/sign-in-with-esignet`' at
the top of the file and replace the window.SignInWithEsignetButton?.init({...})
call with init({ oidcConfig, buttonConfig: { shape: "soft_edges", labelText:
t("fetch_details"), width: "100%" }, signInElement:
document.getElementById("sign-in-with-esignet") }); ensure the init symbol is
used consistently and remove reliance on the window global.

In `@mock-relying-party-ui/src/components/Sidenav.js`:
- Line 76: The languageChanged handler uses langOptions.find(...) without
guarding against langOptions being undefined, risking a runtime error; change
the lookup in the languageChanged function to use optional chaining or a null
guard (e.g., langOptions?.find(...) or if (!langOptions) return) so it mirrors
the safe access used in the useEffect and avoid calling .find on undefined.

In `@mock-relying-party-ui/src/constants/clientDetails.js`:
- Around line 154-165: Update the callback spreads to guard against a missing
relyingPartyService object and missing methods: change the par_callback,
dpop_callback and code_challenge spreads to check relyingPartyService &&
relyingPartyService[par_callback_name], relyingPartyService &&
relyingPartyService[dpop_callback_name], and relyingPartyService &&
relyingPartyService[code_challenge] respectively (so use relyingPartyService &&
relyingPartyService[...] in each conditional) and only then assign par_callback,
par_callback_timeout, dpop_callback or code_challenge; reference the existing
symbols par_callback_name, dpop_callback_name, code_challenge and
relyingPartyService in clientDetails.js when making the change.
- Around line 136-137: The code currently reuses module-level variables state
and nonce across all auth button inits; update getOidcConfig (or whatever
function returns the OIDC payload) to generate new random values for state and
nonce on every call instead of referencing the shared nonce/state variables —
replace usage of the shared symbols (state, nonce) with freshly generated values
inside getOidcConfig (and remove or stop using any module-level state/nonce) so
each authentication request has its own unique state and nonce.
- Around line 146-152: Wrap the decode/parse steps for userProfileClaims and
registrationClaims in a safe-parse guard to avoid throwing (e.g., implement a
helper like safeParseClaim that returns undefined or {} on failure), then
replace the inline JSON.parse(decodeURIComponent(...)) usages in the
userProfileClaims and registrationClaims spread blocks with calls to that helper
and only spread when the helper returns a valid object; ensure both occurrences
(the userProfileClaims claims block and the registrationClaims claims block) use
the same safe parsing and fallback behavior.

---

Nitpick comments:
In `@mock-relying-party-ui/src/components/Sidenav.js`:
- Around line 696-699: The mobile header uses a ternary to choose the profile
image while the desktop header uses the nullish coalescing operator; update the
mobile usage to match by replacing the ternary expression that references
userInfo?.picture?.value (in Sidenav.js mobile header/render code) with the
nullish coalescing pattern (userInfo?.picture?.value ?? "User-Profile-Icon.png")
so both header implementations use the same consistent fallback approach.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 1d3e1195-4676-489b-87e3-ab697215f68c

📥 Commits

Reviewing files that changed from the base of the PR and between b11566a and eea24f2.

⛔ Files ignored due to path filters (1)

• mock-relying-party-ui/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (10)

• mock-relying-party-ui/Dockerfile
• mock-relying-party-ui/package.json
• mock-relying-party-ui/src/components/Login.js
• mock-relying-party-ui/src/components/Registration.js
• mock-relying-party-ui/src/components/Sidenav.js
• mock-relying-party-ui/src/components/SignUp.js
• mock-relying-party-ui/src/components/UserProfile.js
• mock-relying-party-ui/src/constants/clientDetails.js
• mock-relying-party-ui/src/index.js
• mock-relying-party-ui/src/services/clientService.js

💤 Files with no reviewable changes (1)

• mock-relying-party-ui/src/services/clientService.js

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

mock-relying-party-ui/src/components/Registration.js (2)

41-53: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Restore the callback state when exchanging the auth code.

post_fetchUserInfo expects (code, state, client_id, redirect_uri, grant_type), but this call now passes only four arguments. That shifts every field left, sends the wrong payload to /fetchUserInfo, and prevents PKCE cleanup from finding pkce_${client_id}_${state}. Parse state from the query string and thread it into getUserDetails.

Suggested fix

-      let authCode = searchParams.get("code");
+      let authCode = searchParams.get("code");
+      let authState = searchParams.get("state");
       let errorCode = searchParams.get("error");
       let error_desc = searchParams.get("error_description");
@@
-      if (authCode) {
-        getUserDetails(authCode);
+      if (authCode) {
+        getUserDetails(authCode, authState);
       } else {
         setStatus(states.LOADED);
       }
@@
-  const getUserDetails = async (authCode) => {
+  const getUserDetails = async (authCode, authState) => {
     setError(null);
     setUserInfo(null);
@@
-      var userInfo = await post_fetchUserInfo(
+      const userInfo = await post_fetchUserInfo(
         authCode,
+        authState,
         client_id,
         redirect_uri,
-        grant_type,
+        grant_type
       );

Also applies to: 86-100

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@mock-relying-party-ui/src/components/Registration.js` around lines 41 - 53,
The call chain is dropping the OAuth callback state: parse the "state" query
param in getSearchParams and thread it into getUserDetails so that
post_fetchUserInfo receives (code, state, client_id, redirect_uri, grant_type)
as expected; update getSearchParams to call getUserDetails(authCode, state) and
update the other occurrence (around the 86-100 block) likewise, ensuring the
state is passed through to post_fetchUserInfo so the payload fields align and
the pkce_${client_id}_${state} cleanup key is correct.

---

37-65: ⚠️ Potential issue | 🟡 Minor

Unregister the languageChanged handler in the effect cleanup.

mock-relying-party-ui/src/components/Registration.js registers i18n.on("languageChanged", ...) inside a useEffect with an empty dependency array, but the effect never returns a cleanup function—so remounts can accumulate handlers and call renderSignInButton() multiple times per locale change.

Suggested fix

   useEffect(() => {
     setError(null);
     setStatus(states.LOADING);
@@
-    i18n.on("languageChanged", function (lng) {
+    const handleLanguageChanged = () => {
       renderSignInButton();
-    });
+    };
+
+    i18n.on("languageChanged", handleLanguageChanged);
+
+    return () => {
+      i18n.off("languageChanged", handleLanguageChanged);
+    };
   }, []);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@mock-relying-party-ui/src/components/Registration.js` around lines 37 - 65,
The effect registers a languageChanged listener via i18n.on("languageChanged",
...) but never removes it, causing handler accumulation; modify the useEffect to
store the handler function (the callback that calls renderSignInButton) in a
variable and return a cleanup function that unregisters it using
i18n.off("languageChanged", handler) (or i18n.removeListener if your i18n
implementation uses that) so renderSignInButton isn't called multiple times on
locale changes; keep the existing getSearchParams and renderSignInButton calls
but ensure the same handler reference is passed to both on and off.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@mock-relying-party-ui/README.md`:
- Around line 26-27: Update the README so the environment variable names and
example values are consistent: replace or unify MOCK_RELYING_PARTY_BASE_URL with
MOCK_RELYING_PARTY_SERVER_URL in the runnable Docker/export examples and ensure
the table documents the same variable name; correct the AUTHORIZE_ENDPOINT value
from the misspelled "/authroize" to "/authorize" so generated authorize URLs are
valid; apply the same fixes to the other occurrence noted (line ~45) so all
examples match.

---

Outside diff comments:
In `@mock-relying-party-ui/src/components/Registration.js`:
- Around line 41-53: The call chain is dropping the OAuth callback state: parse
the "state" query param in getSearchParams and thread it into getUserDetails so
that post_fetchUserInfo receives (code, state, client_id, redirect_uri,
grant_type) as expected; update getSearchParams to call getUserDetails(authCode,
state) and update the other occurrence (around the 86-100 block) likewise,
ensuring the state is passed through to post_fetchUserInfo so the payload fields
align and the pkce_${client_id}_${state} cleanup key is correct.
- Around line 37-65: The effect registers a languageChanged listener via
i18n.on("languageChanged", ...) but never removes it, causing handler
accumulation; modify the useEffect to store the handler function (the callback
that calls renderSignInButton) in a variable and return a cleanup function that
unregisters it using i18n.off("languageChanged", handler) (or
i18n.removeListener if your i18n implementation uses that) so renderSignInButton
isn't called multiple times on locale changes; keep the existing getSearchParams
and renderSignInButton calls but ensure the same handler reference is passed to
both on and off.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 5ed2d991-0ce1-4692-b6cc-7cd538374f6a

📥 Commits

Reviewing files that changed from the base of the PR and between eea24f2 and e81776f.

📒 Files selected for processing (3)

• mock-relying-party-ui/README.md
• mock-relying-party-ui/src/components/Registration.js
• mock-relying-party-ui/src/constants/clientDetails.js

🚧 Files skipped from review as they are similar to previous changes (1)

• mock-relying-party-ui/src/constants/clientDetails.js

[gk-XL7]

Looks okay..

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

mock-relying-party-ui/README.md (1)

23-39: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add MOCK_RP_UI_PUBLIC_URL back to the config table.

The README still tells users to set MOCK_RP_UI_PUBLIC_URL for context-path deployments, but the new “Configuration Environment Variables” table no longer documents it. That leaves one supported runtime knob undocumented and makes the table incomplete.

Suggested fix

 | **CODE_CHALLENGE**                | **Feature flag** to enable PKCE (Proof Key for Code Exchange) flow                                | `get_code_challenge`                                     | Hardcoded function name - not configurable.<br><br>When enabled, the PKCE method is automatically fetched from the server's `.well-known/openid-configuration` endpoint. |
+| **MOCK_RP_UI_PUBLIC_URL**         | Context path used when serving the UI from a sub-path                                              | `healthservices`                                         | Optional                                                                                                                                                                 |

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@mock-relying-party-ui/README.md` around lines 23 - 39, Add a row for
MOCK_RP_UI_PUBLIC_URL to the "Configuration Environment Variables" table in
README.md documenting that it sets the public base URL used for context-path
deployments (e.g., `https://example.com/mock-relying-party-ui`), mark whether it
is Required/Optional (align with existing behavior), and include a short note
that it overrides internal resolution for deployments behind a context path;
update the table entry near other URL vars (ESIGNET_UI_BASE_URL,
MOCK_RELYING_PARTY_SERVER_URL) so readers can find it easily.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@mock-relying-party-ui/README.md`:
- Around line 43-46: Remove the leading shell prompt marker ($) from the fenced
code block that shows the docker build/run commands so the snippet is pure
commands (no prompt) and satisfies markdownlint MD014; update the block that
contains the docker build -t <dockerImageName>:<tag> . and docker run -it ... -e
ESIGNET_UI_BASE_URL=... -e MOCK_RELYING_PARTY_SERVER_URL=... entries to drop the
"$ " prefix from each line within the triple-backtick block so linting no longer
flags the snippet.

---

Outside diff comments:
In `@mock-relying-party-ui/README.md`:
- Around line 23-39: Add a row for MOCK_RP_UI_PUBLIC_URL to the "Configuration
Environment Variables" table in README.md documenting that it sets the public
base URL used for context-path deployments (e.g.,
`https://example.com/mock-relying-party-ui`), mark whether it is
Required/Optional (align with existing behavior), and include a short note that
it overrides internal resolution for deployments behind a context path; update
the table entry near other URL vars (ESIGNET_UI_BASE_URL,
MOCK_RELYING_PARTY_SERVER_URL) so readers can find it easily.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 404e9de6-f097-4370-ac07-5f8acc690161

📥 Commits

Reviewing files that changed from the base of the PR and between e81776f and a093efc.

📒 Files selected for processing (1)

• mock-relying-party-ui/README.md