refactor: fix google one tap issues (#6054)

packages/connectors/connector-google/README.md

@@ -3,18 +3,17 @@
 The Google connector provides a succinct way for your application to use Google’s OAuth 2.0 authentication system.
 
 **Table of contents**
-- [Google connector](#google-connector)
-  - [Set up a project in the Google API Console](#set-up-a-project-in-the-google-api-console)
-  - [Configure your consent screen](#configure-your-consent-screen)
-    - [Configure and register your application](#configure-and-register-your-application)
-    - [Edit app registration](#edit-app-registration)
-      - [Config OAuth consent screen](#config-oauth-consent-screen)
-      - [Config scopes](#config-scopes)
-      - [Add test users (External user type only)](#add-test-users-external-user-type-only)
-  - [Obtain OAuth 2.0 credentials](#obtain-oauth-20-credentials)
-  - [Configure your connector](#configure-your-connector)
-    - [Config types](#config-types)
-  - [References](#references)
+- [Set up a project in the Google API Console](#set-up-a-project-in-the-google-api-console)
+- [Configure your consent screen](#configure-your-consent-screen)
+  - [Configure and register your application](#configure-and-register-your-application)
+  - [Edit app registration](#edit-app-registration)
+    - [Config OAuth consent screen](#config-oauth-consent-screen)
+    - [Config scopes](#config-scopes)
+    - [Add test users (External user type only)](#add-test-users-external-user-type-only)
+- [Obtain OAuth 2.0 credentials](#obtain-oauth-20-credentials)
+- [Configure your connector](#configure-your-connector)
+  - [Config types](#config-types)
+- [References](#references)
 
 ## Set up a project in the Google API Console
 
@@ -57,8 +56,8 @@ Now you should have the Google OAuth 2.0 consent screen configured.
 - On the **Credentials** page, click the **+ CREATE CREDENTIALS** button on the top menu bar, and select **OAuth client ID**.
 - On the **Create OAuth client ID** page, select **Web application** as the application type.
 - Fill out the basic information for your application.
-- Click **+ Add URI** to add an authorized domain to the **Authorized JavaScript origins** section. This is the domain that your logto authorization page will be served from. In our case, this will be `${your_logto_origin}`. e.g.`https://logto.dev`.
-- Click **+ Add URI** in the ****Authorized redirect URIs**** section to set up the ****Authorized redirect URIs****, which redirect the user to the application after logging in. In our case, this will be `${your_logto_endpoint}/callback/${connector_id}`. e.g. `https://logto.dev/callback/${connector_id}`. The `connector_id` can be found on the top bar of the Logto Admin Console connector details page.
+- Click **+ Add URI** to add an authorized domain to the **Authorized JavaScript origins** section. This is the domain that your logto authorization page will be served from. In our case, this will be `${your_logto_endpoint_origin}`. e.g.`https://foo.logto.app`.
+- Click **+ Add URI** in the ****Authorized redirect URIs**** section to set up the ****Authorized redirect URIs****, which redirect the user to the application after logging in. In our case, this will be `${your_logto_endpoint}/callback/${connector_id}`. e.g. `https://foo.logto.app/callback/${connector_id}`. The `connector_id` can be found on the top bar of the Logto Admin Console connector details page.
 - Click **Create** to finish and then you will get the **Client ID** and **Client Secret**.
 
 ## Configure your connector

packages/core/src/middleware/koa-security-headers.ts

@@ -67,7 +67,10 @@ export default function koaSecurityHeaders<StateT, ContextT, ResponseBodyT>(
   const basicSecurityHeaderSettings: HelmetOptions = {
     contentSecurityPolicy: false, // Exclusively set per app
     crossOriginOpenerPolicy: false, // Allow cross origin opener, as some apps rely on popup window for the sign-in flow
-    crossOriginEmbedderPolicy: { policy: 'credentialless' },
+    // Google One Tap iframe request does not respond the proper CORP header (it uses `same-site` instead of `cross-origin`)
+    // and we cannot add the `crossorigin` attribute to the iframe, so the only solution is to disable the COEP header here.
+    // TODO: Re-enable COEP header when Google One Tap supports CORP header.
+    crossOriginEmbedderPolicy: false,
     dnsPrefetchControl: false,
     referrerPolicy: {
       policy: 'strict-origin-when-cross-origin',

packages/experience/src/Providers/IframeModalProvider/IframeModal/index.module.scss

@@ -36,7 +36,7 @@
   width: 100%;
 }
 
-iframe {
+.iframe {
   width: 100%;
   height: 100%;
   border: none;

packages/experience/src/Providers/IframeModalProvider/IframeModal/index.tsx

@@ -1,4 +1,3 @@
-import { conditional } from '@silverhand/essentials';
 import classNames from 'classnames';
 import { useRef, useState } from 'react';
 import ReactModal from 'react-modal';
@@ -53,7 +52,7 @@ const IframeModal = ({ className, title = '', href = '', onClose }: ModalProps)
             title={title}
             src={href}
             sandbox="allow-same-origin"
-            className={conditional(isLoaded && styles.loaded)}
+            className={classNames(styles.iframe, isLoaded && styles.loaded)}
             onLoad={() => {
               setIsLoaded(true);
               loadingBarRef.current?.complete();