feat(experience): add redirect uri info (#5296)

add redirect uri info

packages/core/src/routes/interaction/consent.ts

@@ -26,7 +26,7 @@ import assertThat from '#src/utils/assert-that.js';
 import { interactionPrefix } from './const.js';
 import type { WithInteractionDetailsContext } from './middleware/koa-interaction-details.js';
 
-const { InvalidClient, InvalidTarget } = errors;
+const { InvalidClient, InvalidTarget, InvalidRedirectUri } = errors;
 
 /**
  * Parse the missing resource scopes info with details. We need to display the resource name and scope details on the consent page.
@@ -182,7 +182,7 @@ export default function consentRoutes<T extends IRouterParamContext>(
 
       const {
         session,
-        params: { client_id: clientId },
+        params: { client_id: clientId, redirect_uri: redirectUri },
         prompt,
       } = interactionDetails;
 
@@ -193,6 +193,11 @@ export default function consentRoutes<T extends IRouterParamContext>(
         new InvalidClient('client must be available')
       );
 
+      assertThat(
+        redirectUri && typeof redirectUri === 'string',
+        new InvalidRedirectUri('redirect_uri must be available')
+      );
+
       const { accountId } = session;
 
       const application = await queries.applications.findApplicationById(clientId);
@@ -230,6 +235,7 @@ export default function consentRoutes<T extends IRouterParamContext>(
         ),
         // Parse the missing resource scopes info with details.
         missingResourceScopes: await parseMissingResourceScopesInfo(queries, missingResourceScopes),
+        redirectUri,
       } satisfies ConsentInfoResponse;
 
       return next();

packages/experience/src/pages/Consent/index.module.scss

@@ -6,6 +6,13 @@
   margin-top: _.unit(6);
 }
 
+.redirectUri {
+  margin-top: _.unit(5);
+  text-align: center;
+  font: var(--font-label-3);
+  color: var(--color-type-secondary);
+}
+
 .footerButton {
   margin-top: _.unit(7);
   @include _.flex_row;

packages/experience/src/pages/Consent/index.tsx

@@ -97,11 +97,14 @@ const Consent = () => {
           title="action.cancel"
           type="secondary"
           onClick={() => {
-            window.history.back();
+            window.location.replace(consentData.redirectUri);
           }}
         />
         <Button title="action.authorize" onClick={consentHandler} />
       </div>
+      <div className={styles.redirectUri}>
+        {t('description.redirect_to', { name: consentData.redirectUri })}
+      </div>
       <div className={styles.footerLink}>
         {t('description.not_you')}{' '}
         <TextLink replace to="/sign-in" text="action.use_another_account" />

packages/phrases-experience/src/locales/de/description.ts

@@ -92,6 +92,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/en/description.ts

@@ -81,6 +81,7 @@ const description = {
   authorize_agreement: `By authorize the access, you agree to the {{name}}'s <link></link>.`,
   not_you: 'Not you?',
   user_id: 'User ID: {{id}}',
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/es/description.ts

@@ -91,6 +91,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/fr/description.ts

@@ -92,6 +92,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/it/description.ts

@@ -88,6 +88,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/ja/description.ts

@@ -88,6 +88,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/ko/description.ts

@@ -83,6 +83,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/pl-pl/description.ts

@@ -88,6 +88,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/pt-br/description.ts

@@ -87,6 +87,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/pt-pt/description.ts

@@ -87,6 +87,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/ru/description.ts

@@ -91,6 +91,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/tr-tr/description.ts

@@ -87,6 +87,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/zh-cn/description.ts

@@ -79,6 +79,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/zh-hk/description.ts

@@ -79,6 +79,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/zh-tw/description.ts

@@ -79,6 +79,8 @@ const description = {
   not_you: 'Not you?',
   /** UNTRANSLATED */
   user_id: 'User ID: {{id}}',
+  /** UNTRANSLATED */
+  redirect_to: 'You will be redirected to {{name}}.',
 };
 
 export default Object.freeze(description);

packages/schemas/src/types/consent.ts

@@ -62,6 +62,7 @@ export const consentInfoResponseGuard = z.object({
   organizations: publicOrganizationGuard.array().optional(),
   missingOIDCScope: z.string().array().optional(),
   missingResourceScopes: missingResourceScopesGuard.array().optional(),
+  redirectUri: z.string(),
 });
 
 export type ConsentInfoResponse = z.infer<typeof consentInfoResponseGuard>;