AWS Cognito provider

docs/v3.x/plugins/users-permissions.md

@@ -317,6 +317,42 @@ Wait a few seconds while the application is created.
 
 :::
 
+::: tab AWS Cognito
+
+#### Using ngrok
+
+AWS Cognito accepts the `localhost` urls. <br>
+The use of `ngrok` is not needed.
+
+#### AWS Cognito configuration
+
+- Visit the AWS Management Console <br> [https://aws.amazon.com/console/](https://aws.amazon.com/console/)
+- If needed, select your **Region** in the top right corner next to the Support dropdown
+- Select the **Services** dropdown in the top left corner
+- Click on **Cognito** in the `Security, Identity & Compliance` section
+- Then click on the **Manage User Pools** button
+- If applicable either create or use an existing user pool. You will find hereafter a tutorial to create a User Pool <br> [https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-user-pool.html](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-user-pool.html)
+- Go to the **App clients** section in your cognito user pool and create a new client with the name `Strapi Auth` and set all the parameters and then click on **Create app client**
+- You should now have an **App client id** and by clicking on the button **Show Details** you will be able to see the **App client secret**. Do copy those two values **App client id** and **App client secret** somewhere for later use when configuring the AWS Cognito provider in Strapi.
+- Go to the **App integration section** and click on **App client settings**
+- Look for your app client named `Strapi Auth` and enable Cognito User Pool by checking it in the **Enabled Identity Providers** section of your newly created App client
+- Fill in your callback URL and Sign out URL with the value `http://localhost:1337/connect/cognito/callback` or the one provided by your AWS Cognito provider in Strapi
+- In the **Oauth 2.0** section select `Authorization code grant` and `Implicit grant` for the **Allowed OAuth Flows** and select `email`, `openid` and `profile` for the **Allowed OAuth Scopes**
+- You can now click on **Save changes** and if you have already configured your domain name then you should be able to see a link to the **Launch Hosted UI**. You can click on it in order to display the AWS Cognito login page. In case you haven't yet configured your domain name, use the link **Choose domain name** at the bottom right of the page in order to configure your domain name. On that page you will have an `Amazon Cognito Domain` section where a `Domain prefix` is already setup. Type a domain prefix to use for the sign-up and sign-in pages that are hosted by Amazon Cognito, this domain prefix together with the `.auth.YOUR_REGION.amazoncognito.com` will be the **Host URI (Subdomain)** value for your strapi configuration later on.
+
+#### Strapi configuration
+
+- Visit the User Permissions provider settings page <br> [http://localhost:1337/admin/settings/users-permissions/providers](http://localhost:1337/admin/settings/users-permissions/providers)
+- Click on the **Cognito** provider
+- Fill the information (replace with your own client ID and secret):
+  - **Enable**: `ON`
+  - **Client ID**: fill in the **App client id** (`5bd7a786qdupjmi0b3s10vegdt`)
+  - **Client Secret**: fill in the **App client secret** (`19c5c78dsfsdfssfsdfhpdb4nkpb145vesdfdsfsffgh7vwd6g45jlipbpb`)
+  - **Host URI (Subdomain)**: fill in the URL value that you copied earlier (`myapp67b50345-67b50b17-local.auth.eu-central-1.amazoncognito.com`)
+  - **The redirect URL to your front-end app**: if you are using strapi react-login [https://github.com/strapi/strapi-examples/tree/master/login-react/](https://github.com/strapi/strapi-examples/tree/master/login-react/) use `http://localhost:3000/connect/cognito/redirect` but if you do not yet have a front-end app to test your Cognito configuration you can then use the following URL `http://localhost:1337/auth/cognito/callback`
+
+:::
+
 ::: tab Twitter
 
 #### Using ngrok

packages/strapi-plugin-users-permissions/admin/src/containers/Providers/index.js

@@ -10,7 +10,7 @@ import {
   getYupInnerErrors,
   request,
 } from 'strapi-helper-plugin';
-import { get, upperFirst } from 'lodash';
+import { get, upperFirst, has } from 'lodash';
 import { Row } from 'reactstrap';
 import pluginPermissions from '../../permissions';
 import { useForm } from '../../hooks';
@@ -52,6 +52,15 @@ const ProvidersPage = () => {
     () => providers.filter(provider => provider.enabled).length,
     [providers]
   );
+  const isProviderWithSubdomain = useMemo(() => {
+    if (!providerToEditName) {
+      return false;
+    }
+
+    const providerToEdit = providers.find(obj => obj.name === providerToEditName);
+
+    return has(providerToEdit, 'subdomain');
+  }, [providers, providerToEditName]);
   const disabledProvidersCount = useMemo(() => {
     return providers.length - enabledProvidersCount;
   }, [providers, enabledProvidersCount]);
@@ -80,8 +89,16 @@ const ProvidersPage = () => {
   const pageTitle = formatMessage({ id: getTrad('HeaderNav.link.providers') });
 
   const formToRender = useMemo(() => {
-    return providerToEditName === 'email' ? forms.email : forms.providers;
-  }, [providerToEditName]);
+    if (providerToEditName === 'email') {
+      return forms.email;
+    }
+
+    if (isProviderWithSubdomain) {
+      return forms.providersWithSubdomain;
+    }
+
+    return forms.providers;
+  }, [providerToEditName, isProviderWithSubdomain]);
 
   const handleClick = useCallback(() => {
     buttonSubmitRef.current.click();
@@ -159,7 +176,7 @@ const ProvidersPage = () => {
       formToRender,
       handleToggle,
       modifiedData,
-      providerToEditName,
+      providerToEditName
     ]
   );
 
@@ -218,13 +235,13 @@ const ProvidersPage = () => {
             <Row>
               {formToRender.form.map(input => {
                 const label = input.label.params
-                  ? { ...input.label, params: { provider: upperFirst(providerToEditName) } }
-                  : input.label;
+                    ? { ...input.label, params: { provider: upperFirst(providerToEditName) } }
+                    : input.label;
 
                 const value =
-                  input.name === 'noName'
-                    ? `${strapi.backendURL}/connect/${providerToEditName}/callback`
-                    : get(modifiedData, [providerToEditName, ...input.name.split('.')], '');
+                    input.name === 'noName'
+                      ? `${strapi.backendURL}/connect/${providerToEditName}/callback`
+                      : get(modifiedData, [providerToEditName, ...input.name.split('.')], '');
 
                 return (
                   <SizedInput

packages/strapi-plugin-users-permissions/admin/src/containers/Providers/utils/createProvidersArray.js

@@ -3,10 +3,14 @@ import { sortBy } from 'lodash';
 const createProvidersArray = data => {
   return sortBy(
     Object.keys(data).reduce((acc, current) => {
-      const { icon: iconName, enabled } = data[current];
+      const { icon: iconName, enabled, subdomain } = data[current];
       const icon = iconName === 'envelope' ? ['fas', 'envelope'] : ['fab', iconName];
 
-      acc.push({ name: current, icon, enabled });
+      if (subdomain) {
+        acc.push({ name: current, icon, enabled, subdomain });
+      } else {
+        acc.push({ name: current, icon, enabled });
+      }
 
       return acc;
     }, []),

packages/strapi-plugin-users-permissions/admin/src/containers/Providers/utils/forms.js

@@ -103,6 +103,103 @@ const forms = {
       }),
     }),
   },
+  providersWithSubdomain: {
+    form: [
+      {
+        autoFocus: true,
+        label: getTrad('PopUpForm.Providers.enabled.label'),
+        name: 'enabled',
+        type: 'bool',
+        description: getTrad('PopUpForm.Providers.enabled.description'),
+        size: { xs: 6 },
+        validations: {
+          required: true,
+        },
+      },
+      {
+        autoFocus: false,
+        label: getTrad('PopUpForm.Providers.key.label'),
+        name: 'key',
+        type: 'text',
+        placeholder: getTrad('PopUpForm.Providers.key.placeholder'),
+        size: { xs: 12 },
+        validations: {
+          required: true,
+        },
+      },
+      {
+        autoFocus: false,
+        label: getTrad('PopUpForm.Providers.secret.label'),
+        name: 'secret',
+        type: 'text',
+        placeholder: getTrad('PopUpForm.Providers.secret.placeholder'),
+        size: { xs: 12 },
+        validations: {
+          required: true,
+        },
+      },
+      {
+        autoFocus: false,
+        label: getTrad('PopUpForm.Providers.subdomain.label'),
+        name: 'subdomain',
+        type: 'text',
+        placeholder: getTrad('PopUpForm.Providers.subdomain.placeholder'),
+        size: { xs: 12 },
+        validations: {
+          required: true,
+        },
+      },
+      {
+        autoFocus: false,
+        label: getTrad('PopUpForm.Providers.redirectURL.front-end.label'),
+        placeholder: 'http://www.client-app.com',
+        name: 'callback',
+        type: 'text',
+        size: { xs: 12 },
+        validations: {
+          required: true,
+        },
+      },
+      {
+        label: {
+          id: getTrad('PopUpForm.Providers.redirectURL.label'),
+          params: {
+            provider: 'VK',
+          },
+        },
+        name: 'noName',
+        type: 'text',
+        validations: {},
+        size: {
+          xs: 12,
+        },
+        disabled: true,
+      },
+    ],
+    schema: yup.object().shape({
+      enabled: yup.bool().required(translatedErrors.required),
+      key: yup.string().when('enabled', {
+        is: true,
+        then: yup.string().required(translatedErrors.required),
+        otherwise: yup.string(),
+      }),
+      secret: yup.string().when('enabled', {
+        is: true,
+        then: yup.string().required(translatedErrors.required),
+        otherwise: yup.string(),
+      }),
+      subdomain: yup.string().when('enabled', {
+        is: true,
+        then: yup.string().required(translatedErrors.required),
+        otherwise: yup.string(),
+      }),
+      callback: yup.string().when('enabled', {
+        is: true,
+        then: yup.string().required(translatedErrors.required),
+        otherwise: yup.string(),
+      }),
+    }),
+  },
 };
 
 export default forms;

packages/strapi-plugin-users-permissions/admin/src/translations/ar.json

@@ -40,6 +40,8 @@
   "PopUpForm.Providers.secret.label": "سر العميل (Client Secret)",
   "PopUpForm.Providers.secret.placeholder": "نص",
   "PopUpForm.header.edit.email-templates": "تحرير قوالب البريد الإلكتروني",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "notification.success.submit": "تم تحديث الإعدادات",
   "plugin.description.long": "حماية الـAPI الخاص بك مع عملية مصادقة كاملة استناداً إلى JWT. يأتي هذا الملحق أيضًا مع إستراتيجية ACL التي تسمح لك بإدارة الأذونات بين مجموعات المستخدمين.",
   "plugin.description.short": "حماية الـAPI الخاص بك مع عملية مصادقة كاملة استناداً إلى JWT",

packages/strapi-plugin-users-permissions/admin/src/translations/cs.json

@@ -46,6 +46,8 @@
   "PopUpForm.Providers.secret.label": "Client Secret",
   "PopUpForm.Providers.secret.placeholder": "TEXT",
   "PopUpForm.header.edit.email-templates": "Upravit e-mailové šablony",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "notification.success.submit": "Nastavení bylo aktualizování",
   "plugin.description.long": "Chraňte své API pomocí kompletního autentifikačního procesu, založeného na JWT. Tento zásuvný modul obsahuje ACL strategii, která vám umožní spravovat oprávnění mezi skupinami uživatelů.",
   "plugin.description.short": "Chraňte své API pomocí kompletního autentifikačního procesu, založeného na JWT",

packages/strapi-plugin-users-permissions/admin/src/translations/de.json

@@ -44,6 +44,8 @@
   "PopUpForm.Providers.secret.label": "Client Secret",
   "PopUpForm.Providers.secret.placeholder": "TEXT",
   "PopUpForm.header.edit.email-templates": "E-Mail-Templates bearbeiten",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "notification.success.submit": "Einstellungen aktualisiert",
   "plugin.description.long": "Beschütze deine API mit einem vollständigen Authentifikationsprozess basierend auf JWT. Zudem bietet dieses Plugin eine ACL-Strategie, die erlaubt, die Befugnisse zwischen Benutzergruppen festzulegen.",
   "plugin.description.short": "Beschütze deine API mit einem vollständigen Authentifikationsprozess basierend auf JWT.",

packages/strapi-plugin-users-permissions/admin/src/translations/en.json

@@ -52,6 +52,8 @@
   "PopUpForm.Providers.secret.placeholder": "TEXT",
   "PopUpForm.header.edit.email-templates": "Edit Email Templates",
   "PopUpForm.header.edit.providers": "Edit Provider",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "Settings.roles.deleted": "Role deleted",
   "Settings.roles.edited": "Role edited",
   "Settings.section-label": "Users & Permissions plugin",

packages/strapi-plugin-users-permissions/admin/src/translations/es.json

@@ -44,6 +44,8 @@
   "PopUpForm.Providers.secret.label": "Secreto Cliente",
   "PopUpForm.Providers.secret.placeholder": "TEXTO",
   "PopUpForm.header.edit.email-templates": "Editar Plantillas de Email",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "notification.success.submit": "Los ajustes se han actualizado",
   "plugin.description.long": "Proteja su API con un proceso de autenticación completo basado en JWT. Este plugin viene también con una estrategia ACL que le permite administrar los permisos entre los grupos de usuarios.",
   "plugin.description.short": "Proteja su API con un proceso de autenticación completo basado en JWT",

packages/strapi-plugin-users-permissions/admin/src/translations/fr.json

@@ -46,6 +46,8 @@
   "PopUpForm.Providers.secret.label": "Client Secret",
   "PopUpForm.Providers.secret.placeholder": "TEXT",
   "PopUpForm.header.edit.email-templates": "Editer E-mail Templates",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "notification.success.submit": "Les configurations ont bien été sauvegardés",
   "plugin.description.long": "Protégez votre API avec un système d'authentification complet basé sur JWT (JSON Web Token). Ce plugin ajoute aussi une stratégie ACL (Access Control Layer) qui vous permet de gérer les permissions entre les groupes d'utilisateurs.",
   "plugin.description.short": "Protégez votre API avec un système d'authentification complet basé sur JWT",

packages/strapi-plugin-users-permissions/admin/src/translations/it.json

@@ -38,6 +38,8 @@
   "PopUpForm.Providers.secret.label": "Client Secret",
   "PopUpForm.Providers.secret.placeholder": "TEXT",
   "PopUpForm.header.edit.email-templates": "Modifica il template delle Email",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "notification.success.submit": "Impostazioni aggiornate",
   "plugin.description.long": "Proteggi le tue API con un processo completo di autenticazione basato su JWT. Questo plugin è implementato con una strategia ACL che ti consente di gestire i permessi tra i gruppi di utenti.",
   "plugin.description.short": "Proteggi le tue API con un processo completo di autenticazione basato su JWT",

packages/strapi-plugin-users-permissions/admin/src/translations/ja.json

@@ -44,6 +44,8 @@
   "PopUpForm.Providers.secret.label": "クライアントの秘密",
   "PopUpForm.Providers.secret.placeholder": "TEXT",
   "PopUpForm.header.edit.email-templates": "メールテンプレートの編集",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "notification.success.submit": "設定が更新されました",
   "plugin.description.long": "JWTに基づいた完全な認証プロセスでAPIを保護します。このプラグインには、ユーザーのグループ間で権限を管理できるACL戦略もあります。",
   "plugin.description.short": "JWTに基づく完全な認証プロセスでAPIを保護する",

packages/strapi-plugin-users-permissions/admin/src/translations/ko.json

@@ -46,6 +46,8 @@
   "PopUpForm.Providers.secret.label": "클라이언트 시크릿(Client Secret)",
   "PopUpForm.Providers.secret.placeholder": "텍스트",
   "PopUpForm.header.edit.email-templates": "이메일 템플릿 수정",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "notification.success.submit": "설정을 업데이트했습니다.",
   "plugin.description.long": "JWT 기반의 인증 프로세스로 API를 보호하세요. 이 플러그인에서 사용자 그룹간 권한을 관리할 수 있는 ACL 전략도 설정할 수 있습니다.",
   "plugin.description.short": "JWT 기반의 인증 프로세스로 API를 보호하세요.",

packages/strapi-plugin-users-permissions/admin/src/translations/ms.json

@@ -46,6 +46,8 @@
   "PopUpForm.Providers.secret.label": "Client Secret",
   "PopUpForm.Providers.secret.placeholder": "TEKS",
   "PopUpForm.header.edit.email-templates": "Edit Templat E-mel",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "notification.success.submit": "Tetapan telah dikemas kini",
   "plugin.description.long": "Lindungi API anda dengan proses pengesahan penuh berdasarkan JWT. Plugin ini juga dilengkapi dengan strategi ACL yang membolehkan anda mengurus pengizinan antara kumpulan pengguna.",
   "plugin.description.short": "Lindungi API anda dengan proses pengesahan penuh berdasarkan JWT"

packages/strapi-plugin-users-permissions/admin/src/translations/nl.json

@@ -44,6 +44,8 @@
   "PopUpForm.Providers.secret.label": "Client Secret",
   "PopUpForm.Providers.secret.placeholder": "TEXT",
   "PopUpForm.header.edit.email-templates": "E-mail sjablonen aanpassen",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "notification.success.submit": "Instellingen zijn geüpdatet",
   "plugin.description.long": "Beveilig je API met een volledig authenticatie proces op JWT. Deze extensie komt ook met een ACL strategie welke ervoor zorgt dat je de permissies tussen groepen van gebruikers kan beheren.",
   "plugin.description.short": "Beveilig je API met een volledig authenticatie proces op JWT",

packages/strapi-plugin-users-permissions/admin/src/translations/pl.json

@@ -46,6 +46,8 @@
   "PopUpForm.Providers.secret.label": "Klucz sekretny klienta",
   "PopUpForm.Providers.secret.placeholder": "TEKST",
   "PopUpForm.header.edit.email-templates": "Zmień szablony e-mail",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "notification.success.submit": "Ustawienia zostały zaktualizowane",
   "plugin.description.long": "Chroń API za pomocą procesu pełnego uwierzytelniania opartego na JWT. Ta wtyczka zawiera również strategię ACL, która pozwala zarządzać uprawnieniami między grupami użytkowników.",
   "plugin.description.short": "Chroń API za pomocą procesu pełnego uwierzytelniania opartego na JWT",

packages/strapi-plugin-users-permissions/admin/src/translations/pt-BR.json

@@ -40,6 +40,8 @@
   "PopUpForm.Providers.secret.label": "Segredo do Cliente",
   "PopUpForm.Providers.secret.placeholder": "TEXT",
   "PopUpForm.header.edit.email-templates": "Editar modelos de email",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "notification.success.submit": "As configurações foram atualizadas",
   "plugin.description.long": "Proteja sua API com um processo de autenticação completo baseado no JWT. Esse plugin também vem com uma estratégia de ACL que permite gerenciar as permissões entre os grupos de usuários.",
   "plugin.description.short": "Proteja sua API com um processo de autenticação completo baseado no JWT",

packages/strapi-plugin-users-permissions/admin/src/translations/pt.json

@@ -44,6 +44,8 @@
   "PopUpForm.Providers.secret.label": "Segredo de cliente",
   "PopUpForm.Providers.secret.placeholder": "TEXTO",
   "PopUpForm.header.edit.email-templates": "Editar Modelos de Email",
+  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
+  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "notification.success.submit": "As configurações foram atualizadas",
   "plugin.description.long": "Proteja a sua API com um processo completo de autenticação baseado em JWT. Este plugin também vem com estratégia de ACL que permite gerir permissões entre grupos de utilizadores.",
   "plugin.description.short": "Proteja a sua API com um processo completo de autenticação baseado em JWT",