[FEATURE] Modifier l'interface de la double mire SSO pour inclure toutes les données récupérées des utilisateurs (PIX-16303)

admin/app/routes/authentication/login-oidc.js

@@ -76,9 +76,9 @@ export default class LoginOidcRoute extends Route {
       const error = new JSONApiError(apiError.detail, apiError);
 
       const shouldUserCreateAnAccount = error.code === 'SHOULD_VALIDATE_CGU';
-      const { authenticationKey, email } = error.meta ?? {};
+      const { authenticationKey, userClaims } = error.meta ?? {};
       if (shouldUserCreateAnAccount && authenticationKey) {
-        return { shouldUserCreateAnAccount, authenticationKey, email, identityProviderSlug };
+        return { shouldUserCreateAnAccount, authenticationKey, email: userClaims.email, identityProviderSlug };
       }
 
       if (error.status === '403' && error.code === 'PIX_ADMIN_ACCESS_NOT_ALLOWED') {

admin/tests/unit/routes/authentication/login-oidc-test.js

@@ -164,7 +164,9 @@ module('Unit | Route | login-oidc', function (hooks) {
               authenticationKey: 'key',
               givenName: 'Mélusine',
               familyName: 'TITEGOUTTE',
-              email: 'melu@example.net',
+              userClaims: {
+                email: 'melu@example.net',
+              },
             },
           },
         ],

api/src/identity-access-management/application/oidc-provider/oidc-provider.controller.js

@@ -42,14 +42,8 @@ async function authenticateOidcUser(request, h) {
   // TODO utiliser un message en anglais au lieu du français
   const message = "L'utilisateur n'a pas de compte Pix";
   const responseCode = 'SHOULD_VALIDATE_CGU';
-  const { authenticationKey, givenName, familyName, email } = result;
-  const meta = { authenticationKey, givenName, familyName };
 
-  if (email) {
-    Object.assign(meta, { email });
-  }
-
-  throw new UnauthorizedError(message, responseCode, meta);
+  throw new UnauthorizedError(message, responseCode, result);
 }
 
 /**

api/src/identity-access-management/domain/usecases/authenticate-oidc-user.usecase.js

@@ -1,5 +1,9 @@
+import lodash from 'lodash';
+
 import { ForbiddenAccess } from '../../../shared/domain/errors.js';
 
+const { omit } = lodash;
+
 /**
  * @typedef {function} authenticateOidcUser
  * @param {Object} params
@@ -63,8 +67,17 @@ async function authenticateOidcUser({
 
   if (!user) {
     const authenticationKey = await authenticationSessionService.save({ userInfo, sessionContent });
-    const { firstName: givenName, lastName: familyName, email } = userInfo;
-    return { authenticationKey, givenName, familyName, email, isAuthenticationComplete: false };
+
+    const userClaims = omit(userInfo, ['externalIdentityId']);
+
+    return {
+      authenticationKey,
+      userClaims,
+      isAuthenticationComplete: false,
+      // TODO: The properties givenName and familyName are kept for backward compatibility with the Front. They will be removed soon.
+      givenName: userClaims.firstName,
+      familyName: userClaims.lastName,
+    };
   }
 
   await _assertUserHasAccessToApplication({ requestedApplication, user, adminMemberRepository });

api/tests/identity-access-management/unit/application/oidc-provider.controller.test.js

@@ -83,10 +83,20 @@ describe('Unit | Identity Access Management | Application | Controller | oidc-pr
       it('returns UnauthorizedError', async function () {
         // given
         const authenticationKey = 'aaa-bbb-ccc';
-        const givenName = 'Mélusine';
-        const familyName = 'TITEGOUTTE';
+        const firstName = 'Mélusine';
+        const lastName = 'TITEGOUTTE';
         const email = 'melu@example.net';
-        usecases.authenticateOidcUser.resolves({ authenticationKey, givenName, familyName, email });
+        const userClaims = {
+          firstName,
+          lastName,
+          email,
+        };
+        usecases.authenticateOidcUser.resolves({
+          authenticationKey,
+          userClaims,
+          givenName: firstName,
+          familyName: lastName,
+        });
 
         // when
         const error = await catchErr(oidcProviderController.authenticateOidcUser)(request, hFake);
@@ -95,7 +105,12 @@ describe('Unit | Identity Access Management | Application | Controller | oidc-pr
         expect(error).to.be.an.instanceOf(UnauthorizedError);
         expect(error.message).to.equal("L'utilisateur n'a pas de compte Pix");
         expect(error.code).to.equal('SHOULD_VALIDATE_CGU');
-        expect(error.meta).to.deep.equal({ authenticationKey, givenName, familyName, email });
+        expect(error.meta).to.deep.equal({
+          authenticationKey,
+          userClaims,
+          givenName: firstName,
+          familyName: lastName,
+        });
       });
     });
   });

api/tests/identity-access-management/unit/domain/usecases/authenticate-oidc-user.usecase.test.js

@@ -231,9 +231,13 @@ describe('Unit | Identity Access Management | Domain | UseCase | authenticate-oi
         expect(authenticationSessionService.save).to.have.been.calledWithExactly({ userInfo, sessionContent });
         expect(result).to.deep.equal({
           authenticationKey,
+          userClaims: {
+            firstName: 'Mélusine',
+            lastName: 'TITEGOUTTE',
+            email: 'melu@example.net',
+          },
           givenName: 'Mélusine',
           familyName: 'TITEGOUTTE',
-          email: 'melu@example.net',
           isAuthenticationComplete: false,
         });
       });

mon-pix/app/components/authentication/login-or-register-oidc.hbs

@@ -2,39 +2,46 @@
 <div class="login-or-register-oidc-form__container">
   <div class="login-or-register-oidc-form__register-container">
     <h2 class="login-or-register-oidc-form__subtitle">{{t "pages.login-or-register-oidc.register-form.title"}}</h2>
-    <div>
-      <p class="login-or-register-oidc-form__description">
-        {{! template-lint-disable "no-bare-strings" }}
-        {{t "pages.login-or-register-oidc.register-form.description"}}
-        <em>{{this.identityProviderOrganizationName}}</em>&nbsp;:
-      </p>
-      <div class="login-or-register-oidc-form__information">
-        <ul>
-          <li>{{t "pages.login-or-register-oidc.register-form.information.given-name" givenName=this.givenName}}</li>
-          <li>{{t "pages.login-or-register-oidc.register-form.information.family-name" familyName=this.familyName}}</li>
-        </ul>
+    {{#if this.userClaimsToDisplay.length}}
+      <div>
+        <p class="login-or-register-oidc-form__description">
+          {{! template-lint-disable "no-bare-strings" }}
+          {{t "pages.login-or-register-oidc.register-form.description"}}
+          <em>{{this.identityProviderOrganizationName}}</em>&nbsp;:
+        </p>
+        <div class="login-or-register-oidc-form__information">
+          <ul>
+            {{#each this.userClaimsToDisplay as |userClaimToDisplay|}}
+              <li>{{userClaimToDisplay}}</li>
+            {{/each}}
+          </ul>
+        </div>
+      </div>
+      <div class="login-or-register-oidc-form__cgu-container">
+        <PixCheckbox {{on "change" this.onChange}}>
+          <:label>{{t
+              "common.cgu.message"
+              cguUrl=this.cguUrl
+              dataProtectionPolicyUrl=this.dataProtectionPolicyUrl
+              htmlSafe=true
+            }}</:label>
+        </PixCheckbox>
       </div>
-    </div>
-    <div class="login-or-register-oidc-form__cgu-container">
-      <PixCheckbox {{on "change" this.onChange}}>
-        <:label>{{t
-            "common.cgu.message"
-            cguUrl=this.cguUrl
-            dataProtectionPolicyUrl=this.dataProtectionPolicyUrl
-            htmlSafe=true
-          }}</:label>
-      </PixCheckbox>
-    </div>
 
-    {{#if this.registerErrorMessage}}
+      {{#if this.registerErrorMessage}}
+        <PixNotificationAlert @type="error" class="login-or-register-oidc-form__cgu-error">
+          {{this.registerErrorMessage}}
+        </PixNotificationAlert>
+      {{/if}}
+
+      <PixButton @type="submit" @triggerAction={{this.register}} @isLoading={{this.isRegisterLoading}}>
+        {{t "pages.login-or-register-oidc.register-form.button"}}
+      </PixButton>
+    {{else}}
       <PixNotificationAlert @type="error" class="login-or-register-oidc-form__cgu-error">
-        {{this.registerErrorMessage}}
+        {{this.userClaimsErrorMessage}}
       </PixNotificationAlert>
     {{/if}}
-
-    <PixButton @type="submit" @triggerAction={{this.register}} @isLoading={{this.isRegisterLoading}}>
-      {{t "pages.login-or-register-oidc.register-form.button"}}
-    </PixButton>
   </div>
 
   <div class="login-or-register-oidc-form__divider"></div>

mon-pix/app/components/authentication/login-or-register-oidc.js

@@ -35,14 +35,6 @@ export default class LoginOrRegisterOidcComponent extends Component {
     return this.oidcIdentityProviders[this.args.identityProviderSlug]?.organizationName;
   }
 
-  get givenName() {
-    return this.args.givenName;
-  }
-
-  get familyName() {
-    return this.args.familyName;
-  }
-
   get currentLanguage() {
     return this.intl.primaryLocale;
   }
@@ -55,6 +47,41 @@ export default class LoginOrRegisterOidcComponent extends Component {
     return this.url.dataProtectionPolicyUrl;
   }
 
+  get userClaimsErrorMessage() {
+    const { userClaims } = this.args;
+
+    if (!userClaims) {
+      return this.intl.t(`pages.login-or-register-oidc.register-form.information.error`);
+    } else {
+      return null;
+    }
+  }
+
+  get userClaimsToDisplay() {
+    const { userClaims } = this.args;
+
+    const result = [];
+
+    if (userClaims) {
+      const { firstName, lastName, ...rest } = userClaims;
+      result.push(`${this.intl.t(`pages.login-or-register-oidc.register-form.information.firstName`)} ${firstName}`);
+      result.push(`${this.intl.t(`pages.login-or-register-oidc.register-form.information.lastName`)} ${lastName}`);
+
+      Object.entries(rest).map(([key, value]) => {
+        let label = `${this.intl.t(`pages.login-or-register-oidc.register-form.information.${key}`)}`;
+        const translation = `${this.intl.t(`pages.login-or-register-oidc.register-form.information.${key}`)}`;
+
+        if (translation.includes('Missing translation')) {
+          label = `${key} :`;
+        }
+
+        return result.push(`${label} ${value}`);
+      });
+    }
+
+    return result;
+  }
+
   @action
   async login(event) {
     event.preventDefault();

mon-pix/app/controllers/authentication/login-or-register-oidc.js

@@ -3,8 +3,12 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 
+import { SessionStorageEntry } from '../../utils/session-storage-entry';
+
+const oidcUserAuthenticationStorage = new SessionStorageEntry('oidcUserAuthentication');
+
 export default class LoginOrRegisterOidcController extends Controller {
-  queryParams = ['authenticationKey', 'identityProviderSlug', 'givenName', 'familyName'];
+  queryParams = ['identityProviderSlug'];
 
   @service url;
   @service oidcIdentityProviders;
@@ -15,7 +19,6 @@ export default class LoginOrRegisterOidcController extends Controller {
   @service currentDomain;
 
   @tracked showOidcReconciliation = false;
-  @tracked authenticationKey = null;
   @tracked identityProviderSlug = null;
   @tracked email = '';
   @tracked fullNameFromPix = '';
@@ -27,6 +30,14 @@ export default class LoginOrRegisterOidcController extends Controller {
     return this.url.showcase;
   }
 
+  get oidcUserAuthenticationStorage() {
+    return oidcUserAuthenticationStorage.get();
+  }
+
+  get userClaims() {
+    return this.oidcUserAuthenticationStorage?.userClaims;
+  }
+
   get isInternationalDomain() {
     return !this.currentDomain.isFranceDomain;
   }
@@ -35,6 +46,10 @@ export default class LoginOrRegisterOidcController extends Controller {
     return this.intl.primaryLocale;
   }
 
+  get authenticationKey() {
+    return this.oidcUserAuthenticationStorage?.authenticationKey;
+  }
+
   @action
   onLanguageChange(language) {
     this.locale.setLocale(language);

mon-pix/app/routes/authentication/login-oidc.js

@@ -6,6 +6,10 @@ import ENV from 'mon-pix/config/environment';
 import { createTranslatedApplicationError } from 'mon-pix/errors/factories/create-application-error';
 import JSONApiError from 'mon-pix/errors/json-api-error';
 
+import { SessionStorageEntry } from '../../utils/session-storage-entry';
+
+const oidcUserAuthenticationStorage = new SessionStorageEntry('oidcUserAuthentication');
+
 export default class LoginOidcRoute extends Route {
   @service intl;
   @service location;
@@ -37,23 +41,21 @@ export default class LoginOidcRoute extends Route {
 
   async model(params, transition) {
     const queryParams = transition.to.queryParams;
+
     const identityProviderSlug = params.identity_provider_slug;
     if (queryParams.code) {
       return this._handleCallbackRequest(queryParams.code, queryParams.state, queryParams.iss, identityProviderSlug);
     }
   }
 
-  afterModel({ shouldValidateCgu, authenticationKey, identityProviderSlug, givenName, familyName } = {}) {
-    const shouldCreateAnAccountForUser = shouldValidateCgu && authenticationKey;
+  afterModel({ shouldValidateCgu, identityProviderSlug } = {}) {
+    const shouldCreateAnAccountForUser = shouldValidateCgu && oidcUserAuthenticationStorage.get().authenticationKey;
 
     if (!shouldCreateAnAccountForUser) return;
 
     return this.router.replaceWith('authentication.login-or-register-oidc', {
       queryParams: {
-        authenticationKey,
         identityProviderSlug,
-        givenName,
-        familyName,
       },
     });
   }
@@ -76,9 +78,10 @@ export default class LoginOidcRoute extends Route {
       const error = new JSONApiError(apiError.detail, apiError);
 
       const shouldValidateCgu = error.code === 'SHOULD_VALIDATE_CGU';
-      const { authenticationKey, givenName, familyName } = error.meta ?? {};
-      if (shouldValidateCgu && authenticationKey) {
-        return { shouldValidateCgu, authenticationKey, identityProviderSlug, givenName, familyName };
+
+      if (shouldValidateCgu && error.meta.authenticationKey) {
+        oidcUserAuthenticationStorage.set(error.meta);
+        return { shouldValidateCgu, identityProviderSlug };
       }
 
       throw error;

mon-pix/app/templates/authentication/login-or-register-oidc.hbs

@@ -21,8 +21,7 @@
       <Authentication::LoginOrRegisterOidc
         @identityProviderSlug={{this.identityProviderSlug}}
         @authenticationKey={{this.authenticationKey}}
-        @givenName={{this.givenName}}
-        @familyName={{this.familyName}}
+        @userClaims={{this.userClaims}}
         @onLogin={{this.onLogin}}
       />
     {{/if}}

mon-pix/mirage/routes/authentication/oidc/index.js

@@ -8,7 +8,10 @@ export default function (config) {
         {},
         {
           errors: [
-            { code: 'SHOULD_VALIDATE_CGU', meta: { authenticationKey: 'key', familyName: 'PIX', givenName: 'test' } },
+            {
+              code: 'SHOULD_VALIDATE_CGU',
+              meta: { authenticationKey: 'key', userClaims: { lastName: 'PIX', firstName: 'test' } },
+            },
           ],
         },
       );

mon-pix/tests/acceptance/authentication/login-or-register-oidc-test.js

@@ -19,10 +19,7 @@ module('Acceptance | Login or register oidc', function (hooks) {
         const screen = await visit('/connexion/oidc-partner?code=oidc_example_code&state=auth_session_state');
 
         // then
-        assert.strictEqual(
-          currentURL(),
-          '/connexion/oidc?authenticationKey=key&familyName=PIX&givenName=test&identityProviderSlug=oidc-partner',
-        );
+        assert.strictEqual(currentURL(), '/connexion/oidc?identityProviderSlug=oidc-partner');
         assert.dom(screen.getByRole('button', { name: 'Sélectionnez une langue' })).exists();
       });
     });