From f996c0de2c234d2e297502745dc289398996c775 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 15 Dec 2021 19:38:30 -0300
Subject: [PATCH 1/5] WIP

---
 app/apple/server/appleOauthManifest.ts        | 13 +++
 app/apple/server/appleOauthRegisterService.ts | 81 +++++++++++++++++++
 app/apple/server/startup.ts                   | 29 +++----
 app/ui-login/client/login/services.html       | 23 ++++--
 client/lib/utils/createAnchor.ts              |  4 +-
 client/templates.ts                           |  8 ++
 .../login/AppleOauth/AppleOauthButton.tsx     | 68 ++++++++++++++++
 definition/rest/v1/settings.ts                |  2 +-
 8 files changed, 198 insertions(+), 30 deletions(-)
 create mode 100644 app/apple/server/appleOauthManifest.ts
 create mode 100644 app/apple/server/appleOauthRegisterService.ts
 create mode 100644 client/views/login/AppleOauth/AppleOauthButton.tsx

diff --git a/app/apple/server/appleOauthManifest.ts b/app/apple/server/appleOauthManifest.ts
new file mode 100644
index 000000000000..fa4fbeeff7b6
--- /dev/null
+++ b/app/apple/server/appleOauthManifest.ts
@@ -0,0 +1,13 @@
+import { Meteor } from 'meteor/meteor';
+import { WebApp } from 'meteor/webapp';
+
+import { settings } from '../../settings/server';
+
+WebApp.connectHandlers.use('/.well-known/apple-developer-domain-association.txt', Meteor.bindEnvironment(function(req, res) {
+	res.writeHead(200, {
+		'Content-Type': 'text/plain',
+		'Access-Control-Allow-Origin': '*',
+	});
+
+	res.end(settings.get('Accounts_OAuth_Apple_manifest'));
+}));
diff --git a/app/apple/server/appleOauthRegisterService.ts b/app/apple/server/appleOauthRegisterService.ts
new file mode 100644
index 000000000000..666e24508151
--- /dev/null
+++ b/app/apple/server/appleOauthRegisterService.ts
@@ -0,0 +1,81 @@
+// import { Meteor } from 'meteor/meteor';
+// import { Tracker } from 'meteor/tracker';
+// import _ from 'underscore';
+
+import { jws } from 'jsrsasign';
+import { ServiceConfiguration } from 'meteor/service-configuration';
+
+
+/* eslint-disable @typescript-eslint/camelcase */
+
+import { CustomOAuth } from '../../custom-oauth/server/custom_oauth_server';
+import { settings, settingsRegistry } from '../../settings/server';
+
+
+const config = {
+	serverURL: 'https://appleid.apple.com',
+	identityPath: '/auth/token',
+	scope: 'name email',
+	mergeUsers: true,
+	accessTokenParam: 'access_token',
+	loginStyle: 'redirect',
+};
+
+// chat.rocket.gazzo
+
+new CustomOAuth('apple', config);
+
+settingsRegistry.addGroup('OAuth', function() {
+	this.section('Apple', function() {
+		this.add('Accounts_OAuth_Apple', false, { type: 'boolean', public: true });
+
+
+		this.add('Accounts_OAuth_Apple_clientId', '', { type: 'string', enableQuery: { Accounts_OAuth_Apple: true } });
+		this.add('Accounts_OAuth_Apple_secret', '', { type: 'string', enableQuery: { Accounts_OAuth_Apple: true } });
+		this.add('Accounts_OAuth_Apple_manifest', '', { type: 'string', enableQuery: { Accounts_OAuth_Apple: true } });
+		this.add('Accounts_OAuth_Apple_redirectUri', '', { type: 'string', enableQuery: { Accounts_OAuth_Apple: true } });
+
+		this.add('Accounts_OAuth_Apple_iss', '', { type: 'string', enableQuery: { Accounts_OAuth_Apple: true } });
+		this.add('Accounts_OAuth_Apple_kid', '', { type: 'string', enableQuery: { Accounts_OAuth_Apple: true } });
+	});
+});
+
+
+settings.watchMultiple(['Accounts_OAuth_Apple', 'Accounts_OAuth_Apple_clientId', 'Accounts_OAuth_Apple_secret', 'Accounts_OAuth_Apple_iss', 'Accounts_OAuth_Apple_kid'], ([enabled, clientId, serverSecret, iss, kid]) => {
+	if (!enabled) {
+		return ServiceConfiguration.configurations.remove({
+			service: 'apple',
+		});
+	}
+
+	const HEADER = {
+		typ: 'JWT',
+		kid,
+		alg: 'ES256',
+	};
+
+
+	const tokenPayload = {
+		iss,
+		iat: jws.IntDate.get('now'),
+		exp: 15780000,
+		aud: 'https://appleid.apple.com',
+		sub: clientId,
+	};
+
+	const header = JSON.stringify(HEADER);
+
+
+	ServiceConfiguration.configurations.upsert({
+		service: 'apple',
+	}, {
+		$set: {
+			// We'll hide this button on Web Client
+			showButton: false,
+			secret: jws.JWS.sign(HEADER.alg, header, JSON.stringify(tokenPayload), { rstr: serverSecret }),
+			enabled: settings.get('Accounts_OAuth_Apple'),
+			loginStyle: 'redirect',
+			clientId,
+		},
+	});
+});
diff --git a/app/apple/server/startup.ts b/app/apple/server/startup.ts
index 97ba8b3a239f..6e7dab81ebb6 100644
--- a/app/apple/server/startup.ts
+++ b/app/apple/server/startup.ts
@@ -1,28 +1,17 @@
-import { ServiceConfiguration } from 'meteor/service-configuration';
-
-import { settings, settingsRegistry } from '../../settings/server';
+/* eslint-disable @typescript-eslint/camelcase */
+import { settingsRegistry } from '../../settings/server';
+import './appleOauthManifest';
+import './appleOauthRegisterService';
 
 settingsRegistry.addGroup('OAuth', function() {
 	this.section('Apple', function() {
 		this.add('Accounts_OAuth_Apple', false, { type: 'boolean', public: true });
-	});
-});
-
+		this.add('Accounts_OAuth_Apple_clientId', '', { type: 'string', public: true });
+		this.add('Accounts_OAuth_Apple_secret', '', { type: 'string', public: true });
+		this.add('Accounts_OAuth_Apple_manifest', '', { type: 'string' });
 
-settings.watch('Accounts_OAuth_Apple', (enabled) => {
-	if (!enabled) {
-		return ServiceConfiguration.configurations.remove({
-			service: 'apple',
-		});
-	}
 
-	ServiceConfiguration.configurations.upsert({
-		service: 'apple',
-	}, {
-		$set: {
-			// We'll hide this button on Web Client
-			showButton: false,
-			enabled: settings.get('Accounts_OAuth_Apple'),
-		},
+		this.add('Accounts_OAuth_Apple_iss', '', { type: 'string' });
+		this.add('Accounts_OAuth_Apple_kid', '', { type: 'string' });
 	});
 });
diff --git a/app/ui-login/client/login/services.html b/app/ui-login/client/login/services.html
index bb19c56e00d3..cc013fc5162b 100644
--- a/app/ui-login/client/login/services.html
+++ b/app/ui-login/client/login/services.html
@@ -1,9 +1,18 @@
-<template name='loginServices'>
+<template name="loginServices">
 	{{#if loginService.length}}
-		<div class="oauth-login buttons-group">
-			{{#each loginService}}
-				<button type="button" class="rc-button rc-button--secondary external-login {{service.service}}" title="{{displayName}}" style="{{#if service.buttonColor}}background-color:{{service.buttonColor}};{{/if}}{{#if service.buttonLabelColor}}color:{{service.buttonLabelColor}};{{/if}}"><i class="icon-{{icon}} service-icon"></i><i class="icon-spin animate-spin loading-icon hidden"></i><span>{{service.buttonLabelText}}</span></button>
-			{{/each}}
-		</div>
-	{{/if}}
+	<div class="oauth-login buttons-group">
+		{{#each loginService}}
+		<button
+			type="button"
+			class="rc-button rc-button--secondary external-login {{service.service}}"
+			title="{{displayName}}"
+			style="{{#if service.buttonColor}}background-color:{{service.buttonColor}};{{/if}}{{#if service.buttonLabelColor}}color:{{service.buttonLabelColor}};{{/if}}"
+		>
+			<i class="icon-{{icon}} service-icon"></i
+			><i class="icon-spin animate-spin loading-icon hidden"></i
+			><span>{{service.buttonLabelText}}</span>
+		</button>
+		{{/each}}
+	</div>
+	{{/if}} {{> AppleOauthButton}}
 </template>
diff --git a/client/lib/utils/createAnchor.ts b/client/lib/utils/createAnchor.ts
index 8f26fbfca37a..a228047644e8 100644
--- a/client/lib/utils/createAnchor.ts
+++ b/client/lib/utils/createAnchor.ts
@@ -1,6 +1,6 @@
-export const createAnchor = (id: string): HTMLDivElement => {
+export const createAnchor = (id: string, target = document.body): HTMLDivElement => {
 	const div = document.createElement('div');
 	div.id = id;
-	document.body.appendChild(div);
+	target.appendChild(div);
 	return div;
 };
diff --git a/client/templates.ts b/client/templates.ts
index 63fccea452a3..92f05a7de9e2 100644
--- a/client/templates.ts
+++ b/client/templates.ts
@@ -230,6 +230,14 @@ createTemplateForComponent(
 	() => import('./sidebar/header/actions/CreateRoomList'),
 );
 
+createTemplateForComponent(
+	'AppleOauthButton',
+	() => import('./views/login/AppleOauth/AppleOauthButton'),
+	{
+		renderContainerView: () => HTML.DIV({ style: 'display: flex; justify-content: center;' }),
+	},
+);
+
 createTemplateForComponent('UserDropdown', () => import('./sidebar/header/UserDropdown'));
 
 createTemplateForComponent('sidebarFooter', () => import('./sidebar/footer'));
diff --git a/client/views/login/AppleOauth/AppleOauthButton.tsx b/client/views/login/AppleOauth/AppleOauthButton.tsx
new file mode 100644
index 000000000000..0ace19c9b7ca
--- /dev/null
+++ b/client/views/login/AppleOauth/AppleOauthButton.tsx
@@ -0,0 +1,68 @@
+import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+import { useAbsoluteUrl } from '../../../contexts/ServerContext';
+import { useSetting } from '../../../contexts/SettingsContext';
+
+export const AppleOauthButton = (): ReactNode => {
+	const enabled = useSetting('Accounts_OAuth_Apple');
+	const absoluteUrl = useAbsoluteUrl();
+	const appleClientID = useSetting('Accounts_OAuth_Apple_client_id') || '[CLIENT_ID]';
+	const appleState = useSetting('Accounts_OAuth_Apple_state');
+
+	const appleRedirectUri = useSetting('Accounts_OAuth_Apple_redirectUri');
+	const defaultRedirectURI = absoluteUrl('_oauth/apple');
+	const redirectURI = appleRedirectUri || defaultRedirectURI;
+
+	const scriptLoadedHandler = useCallback(() => {
+		if (!enabled) {
+			return;
+		}
+		(window as any).AppleID.auth.init({
+			clientId: appleClientID,
+			scope: 'name email',
+			redirectURI,
+			state:
+				appleState ||
+				btoa(
+					JSON.stringify({
+						loginStyle: 'redirect',
+						redirectUrl: location.href,
+					}),
+				),
+		});
+	}, [enabled, appleClientID, redirectURI, appleState]);
+
+	const ref = useRef<HTMLScriptElement>(null);
+
+	useEffect(() => {
+		if ((window as any).AppleID) {
+			scriptLoadedHandler();
+			return;
+		}
+		if (!ref.current) {
+			return;
+		}
+		ref.current.onload = scriptLoadedHandler;
+	}, [scriptLoadedHandler]);
+
+	if (!enabled) {
+		return null;
+	}
+	return (
+		<>
+			{createPortal(
+				<script
+					id='apple-id-script'
+					ref={ref}
+					async
+					src='https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js'
+				/>,
+				document.head,
+			)}
+			<div id='appleid-signin' data-height='40px'></div>
+		</>
+	);
+};
+
+export default AppleOauthButton;
diff --git a/definition/rest/v1/settings.ts b/definition/rest/v1/settings.ts
index e88a6d144d67..a83625048c66 100644
--- a/definition/rest/v1/settings.ts
+++ b/definition/rest/v1/settings.ts
@@ -20,7 +20,7 @@ export type OauthCustomConfiguration = {
 	identityPath: unknown;
 	authorizePath: unknown;
 	scope: unknown;
-	loginStyle: unknown;
+	loginStyle: 'popup' | 'redirect';
 	tokenSentVia: unknown;
 	identityTokenSentVia: unknown;
 	keyField: unknown;

From c7faf97a7c5feb903bc9988d983504472d702465 Mon Sep 17 00:00:00 2001
From: Diego Sampaio <chinello@gmail.com>
Date: Tue, 28 Dec 2021 11:53:24 -0300
Subject: [PATCH 2/5] Working version

---
 app/apple/server/appleOauthManifest.ts        | 13 ----
 app/apple/server/appleOauthRegisterService.ts | 32 +++------
 app/apple/server/startup.ts                   | 16 -----
 .../login/AppleOauth/AppleOauthButton.tsx     | 66 +++++++++++++------
 server/configuration/accounts_meld.js         |  1 +
 5 files changed, 58 insertions(+), 70 deletions(-)
 delete mode 100644 app/apple/server/appleOauthManifest.ts

diff --git a/app/apple/server/appleOauthManifest.ts b/app/apple/server/appleOauthManifest.ts
deleted file mode 100644
index fa4fbeeff7b6..000000000000
--- a/app/apple/server/appleOauthManifest.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { WebApp } from 'meteor/webapp';
-
-import { settings } from '../../settings/server';
-
-WebApp.connectHandlers.use('/.well-known/apple-developer-domain-association.txt', Meteor.bindEnvironment(function(req, res) {
-	res.writeHead(200, {
-		'Content-Type': 'text/plain',
-		'Access-Control-Allow-Origin': '*',
-	});
-
-	res.end(settings.get('Accounts_OAuth_Apple_manifest'));
-}));
diff --git a/app/apple/server/appleOauthRegisterService.ts b/app/apple/server/appleOauthRegisterService.ts
index 666e24508151..3bdcfb5b253c 100644
--- a/app/apple/server/appleOauthRegisterService.ts
+++ b/app/apple/server/appleOauthRegisterService.ts
@@ -5,23 +5,18 @@
 import { jws } from 'jsrsasign';
 import { ServiceConfiguration } from 'meteor/service-configuration';
 
-
-/* eslint-disable @typescript-eslint/camelcase */
-
 import { CustomOAuth } from '../../custom-oauth/server/custom_oauth_server';
 import { settings, settingsRegistry } from '../../settings/server';
 
-
 const config = {
 	serverURL: 'https://appleid.apple.com',
-	identityPath: '/auth/token',
+	tokenPath: '/auth/token',
 	scope: 'name email',
 	mergeUsers: true,
 	accessTokenParam: 'access_token',
 	loginStyle: 'redirect',
 };
 
-// chat.rocket.gazzo
 
 new CustomOAuth('apple', config);
 
@@ -29,19 +24,15 @@ settingsRegistry.addGroup('OAuth', function() {
 	this.section('Apple', function() {
 		this.add('Accounts_OAuth_Apple', false, { type: 'boolean', public: true });
 
+		this.add('Accounts_OAuth_Apple_id', '', { type: 'string', public: true });
+		this.add('Accounts_OAuth_Apple_secretKey', '', { type: 'string', multiline: true });
 
-		this.add('Accounts_OAuth_Apple_clientId', '', { type: 'string', enableQuery: { Accounts_OAuth_Apple: true } });
-		this.add('Accounts_OAuth_Apple_secret', '', { type: 'string', enableQuery: { Accounts_OAuth_Apple: true } });
-		this.add('Accounts_OAuth_Apple_manifest', '', { type: 'string', enableQuery: { Accounts_OAuth_Apple: true } });
-		this.add('Accounts_OAuth_Apple_redirectUri', '', { type: 'string', enableQuery: { Accounts_OAuth_Apple: true } });
-
-		this.add('Accounts_OAuth_Apple_iss', '', { type: 'string', enableQuery: { Accounts_OAuth_Apple: true } });
-		this.add('Accounts_OAuth_Apple_kid', '', { type: 'string', enableQuery: { Accounts_OAuth_Apple: true } });
+		this.add('Accounts_OAuth_Apple_iss', '', { type: 'string' });
+		this.add('Accounts_OAuth_Apple_kid', '', { type: 'string' });
 	});
 });
 
-
-settings.watchMultiple(['Accounts_OAuth_Apple', 'Accounts_OAuth_Apple_clientId', 'Accounts_OAuth_Apple_secret', 'Accounts_OAuth_Apple_iss', 'Accounts_OAuth_Apple_kid'], ([enabled, clientId, serverSecret, iss, kid]) => {
+settings.watchMultiple(['Accounts_OAuth_Apple', 'Accounts_OAuth_Apple_id', 'Accounts_OAuth_Apple_secretKey', 'Accounts_OAuth_Apple_iss', 'Accounts_OAuth_Apple_kid'], ([enabled, clientId, serverSecret, iss, kid]) => {
 	if (!enabled) {
 		return ServiceConfiguration.configurations.remove({
 			service: 'apple',
@@ -49,22 +40,19 @@ settings.watchMultiple(['Accounts_OAuth_Apple', 'Accounts_OAuth_Apple_clientId',
 	}
 
 	const HEADER = {
-		typ: 'JWT',
 		kid,
 		alg: 'ES256',
 	};
 
-
 	const tokenPayload = {
 		iss,
-		iat: jws.IntDate.get('now'),
-		exp: 15780000,
+		iat: Math.floor(Date.now() / 1000),
+		exp: Math.floor(Date.now() / 1000) + 300,
 		aud: 'https://appleid.apple.com',
 		sub: clientId,
 	};
 
-	const header = JSON.stringify(HEADER);
-
+	const secret = jws.JWS.sign(null, HEADER, tokenPayload, serverSecret);
 
 	ServiceConfiguration.configurations.upsert({
 		service: 'apple',
@@ -72,7 +60,7 @@ settings.watchMultiple(['Accounts_OAuth_Apple', 'Accounts_OAuth_Apple_clientId',
 		$set: {
 			// We'll hide this button on Web Client
 			showButton: false,
-			secret: jws.JWS.sign(HEADER.alg, header, JSON.stringify(tokenPayload), { rstr: serverSecret }),
+			secret,
 			enabled: settings.get('Accounts_OAuth_Apple'),
 			loginStyle: 'redirect',
 			clientId,
diff --git a/app/apple/server/startup.ts b/app/apple/server/startup.ts
index 6e7dab81ebb6..d4b3d92958ad 100644
--- a/app/apple/server/startup.ts
+++ b/app/apple/server/startup.ts
@@ -1,17 +1 @@
-/* eslint-disable @typescript-eslint/camelcase */
-import { settingsRegistry } from '../../settings/server';
-import './appleOauthManifest';
 import './appleOauthRegisterService';
-
-settingsRegistry.addGroup('OAuth', function() {
-	this.section('Apple', function() {
-		this.add('Accounts_OAuth_Apple', false, { type: 'boolean', public: true });
-		this.add('Accounts_OAuth_Apple_clientId', '', { type: 'string', public: true });
-		this.add('Accounts_OAuth_Apple_secret', '', { type: 'string', public: true });
-		this.add('Accounts_OAuth_Apple_manifest', '', { type: 'string' });
-
-
-		this.add('Accounts_OAuth_Apple_iss', '', { type: 'string' });
-		this.add('Accounts_OAuth_Apple_kid', '', { type: 'string' });
-	});
-});
diff --git a/client/views/login/AppleOauth/AppleOauthButton.tsx b/client/views/login/AppleOauth/AppleOauthButton.tsx
index 0ace19c9b7ca..66982ac17782 100644
--- a/client/views/login/AppleOauth/AppleOauthButton.tsx
+++ b/client/views/login/AppleOauth/AppleOauthButton.tsx
@@ -1,5 +1,6 @@
+import { Accounts } from 'meteor/accounts-base';
 import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
+// import { createPortal } from 'react-dom';
 
 import { useAbsoluteUrl } from '../../../contexts/ServerContext';
 import { useSetting } from '../../../contexts/SettingsContext';
@@ -7,12 +8,38 @@ import { useSetting } from '../../../contexts/SettingsContext';
 export const AppleOauthButton = (): ReactNode => {
 	const enabled = useSetting('Accounts_OAuth_Apple');
 	const absoluteUrl = useAbsoluteUrl();
-	const appleClientID = useSetting('Accounts_OAuth_Apple_client_id') || '[CLIENT_ID]';
-	const appleState = useSetting('Accounts_OAuth_Apple_state');
+	const appleClientID = useSetting('Accounts_OAuth_Apple_id') || '[CLIENT_ID]';
 
-	const appleRedirectUri = useSetting('Accounts_OAuth_Apple_redirectUri');
-	const defaultRedirectURI = absoluteUrl('_oauth/apple');
-	const redirectURI = appleRedirectUri || defaultRedirectURI;
+	const redirectURI = absoluteUrl('_oauth/apple');
+
+	useEffect(() => {
+		document.addEventListener('AppleIDSignInOnSuccess', (data) => {
+			// handle successful response
+			const { authorization, user } = data.detail;
+
+			Accounts.callLoginMethod({
+				methodArguments: [
+					{
+						serviceName: 'apple',
+						identityToken: authorization.id_token,
+						...(user && {
+							fullName: {
+								givenName: user.name.firstName,
+								familyName: user.name.lastName,
+							},
+							email: user.email,
+						}),
+					},
+				],
+				userCallback: console.log,
+			});
+		});
+		// Listen for authorization failures
+		document.addEventListener('AppleIDSignInOnFailure', (error) => {
+			// handle error.
+			console.error('deu ruim', error);
+		});
+	}, []);
 
 	const scriptLoadedHandler = useCallback(() => {
 		if (!enabled) {
@@ -22,16 +49,9 @@ export const AppleOauthButton = (): ReactNode => {
 			clientId: appleClientID,
 			scope: 'name email',
 			redirectURI,
-			state:
-				appleState ||
-				btoa(
-					JSON.stringify({
-						loginStyle: 'redirect',
-						redirectUrl: location.href,
-					}),
-				),
+			usePopup: true,
 		});
-	}, [enabled, appleClientID, redirectURI, appleState]);
+	}, [enabled, appleClientID, redirectURI]);
 
 	const ref = useRef<HTMLScriptElement>(null);
 
@@ -49,17 +69,25 @@ export const AppleOauthButton = (): ReactNode => {
 	if (!enabled) {
 		return null;
 	}
+
+	const script = document.createElement('script');
+	script.src =
+		'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
+	script.async = true;
+	script.onload = scriptLoadedHandler;
+	document.body.appendChild(script);
+
 	return (
 		<>
-			{createPortal(
+			{/* {createPortal(
 				<script
 					id='apple-id-script'
 					ref={ref}
-					async
+					// async
 					src='https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js'
 				/>,
-				document.head,
-			)}
+				document.body,
+			)} */}
 			<div id='appleid-signin' data-height='40px'></div>
 		</>
 	);
diff --git a/server/configuration/accounts_meld.js b/server/configuration/accounts_meld.js
index cb3327388b18..5e7ad97046d7 100644
--- a/server/configuration/accounts_meld.js
+++ b/server/configuration/accounts_meld.js
@@ -14,6 +14,7 @@ Accounts.updateOrCreateUserFromExternalService = function(serviceName, serviceDa
 		'meteor-developer',
 		'linkedin',
 		'twitter',
+		'apple',
 	];
 
 	if (services.includes(serviceName) === false && serviceData._OAuthCustom !== true) {

From ab3d259b80a809101f3da7d2c9340adb0e0a25e9 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 29 Dec 2021 17:35:07 -0300
Subject: [PATCH 3/5] Fix cors

---
 app/cors/server/cors.js                       |  4 ++--
 .../login/AppleOauth/AppleOauthButton.tsx     | 22 ++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/cors/server/cors.js b/app/cors/server/cors.js
index 65f794b4dc39..6987cc3f9bb7 100644
--- a/app/cors/server/cors.js
+++ b/app/cors/server/cors.js
@@ -35,7 +35,7 @@ WebApp.rawConnectHandlers.use(function (req, res, next) {
 		]
 			.filter(Boolean)
 			.join(' ');
-
+		const external = [settings.get('Accounts_OAuth_Apple') && 'https://appleid.cdn-apple.com'].filter(Boolean).join(' ');
 		res.setHeader(
 			'Content-Security-Policy',
 			[
@@ -45,7 +45,7 @@ WebApp.rawConnectHandlers.use(function (req, res, next) {
 				'frame-src *',
 				'img-src * data:',
 				'media-src * data:',
-				`script-src 'self' 'unsafe-eval' ${inlineHashes} ${cdn_prefixes}`,
+				`script-src 'self' 'unsafe-eval' ${inlineHashes} ${cdn_prefixes} ${external}`,
 				`style-src 'self' 'unsafe-inline' ${cdn_prefixes}`,
 			].join('; '),
 		);
diff --git a/client/views/login/AppleOauth/AppleOauthButton.tsx b/client/views/login/AppleOauth/AppleOauthButton.tsx
index 0ace19c9b7ca..e5d68108186c 100644
--- a/client/views/login/AppleOauth/AppleOauthButton.tsx
+++ b/client/views/login/AppleOauth/AppleOauthButton.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import React, { ReactNode, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useAbsoluteUrl } from '../../../contexts/ServerContext';
@@ -46,20 +46,22 @@ export const AppleOauthButton = (): ReactNode => {
 		ref.current.onload = scriptLoadedHandler;
 	}, [scriptLoadedHandler]);
 
+	useLayoutEffect(() => {
+		const script = document.createElement('script');
+		script.src = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
+		script.async = true;
+		ref.current = script;
+		document.body.appendChild(script);
+		return () => {
+			document.body.removeChild(script);
+		};
+	}, []);
+
 	if (!enabled) {
 		return null;
 	}
 	return (
 		<>
-			{createPortal(
-				<script
-					id='apple-id-script'
-					ref={ref}
-					async
-					src='https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js'
-				/>,
-				document.head,
-			)}
 			<div id='appleid-signin' data-height='40px'></div>
 		</>
 	);

From 049891243f7406b41ebc7f1798d48716f6c62c71 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 12 Jan 2022 12:25:29 -0300
Subject: [PATCH 4/5] Apply suggestions from code review

Co-authored-by: Diego Sampaio <chinello@gmail.com>
---
 app/apple/server/appleOauthRegisterService.ts      | 4 ----
 client/views/login/AppleOauth/AppleOauthButton.tsx | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/apple/server/appleOauthRegisterService.ts b/app/apple/server/appleOauthRegisterService.ts
index 988c6be685cc..de06249bc1de 100644
--- a/app/apple/server/appleOauthRegisterService.ts
+++ b/app/apple/server/appleOauthRegisterService.ts
@@ -1,7 +1,3 @@
-// import { Meteor } from 'meteor/meteor';
-// import { Tracker } from 'meteor/tracker';
-// import _ from 'underscore';
-
 import { KJUR } from 'jsrsasign';
 import { ServiceConfiguration } from 'meteor/service-configuration';
 
diff --git a/client/views/login/AppleOauth/AppleOauthButton.tsx b/client/views/login/AppleOauth/AppleOauthButton.tsx
index 71c08f02e946..9863627d91e8 100644
--- a/client/views/login/AppleOauth/AppleOauthButton.tsx
+++ b/client/views/login/AppleOauth/AppleOauthButton.tsx
@@ -78,7 +78,7 @@ export const AppleOauthButton: FC = () => {
 		script.async = true;
 		ref.current = script;
 		document.body.appendChild(script);
-		return () => {
+		return (): void => {
 			document.body.removeChild(script);
 		};
 	}, []);

From a887824a6b2acb62db5740a1497e827489dad30f Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Fri, 14 Jan 2022 14:13:05 -0300
Subject: [PATCH 5/5] Fix review

---
 app/apple/server/appleOauthRegisterService.ts      | 4 ++--
 client/views/login/AppleOauth/AppleOauthButton.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/apple/server/appleOauthRegisterService.ts b/app/apple/server/appleOauthRegisterService.ts
index de06249bc1de..11753235a9b0 100644
--- a/app/apple/server/appleOauthRegisterService.ts
+++ b/app/apple/server/appleOauthRegisterService.ts
@@ -10,7 +10,7 @@ const config = {
 	scope: 'name email',
 	mergeUsers: true,
 	accessTokenParam: 'access_token',
-	loginStyle: 'redirect',
+	loginStyle: 'popup',
 };
 
 new CustomOAuth('apple', config);
@@ -67,7 +67,7 @@ settings.watchMultiple(
 					showButton: false,
 					secret,
 					enabled: settings.get('Accounts_OAuth_Apple'),
-					loginStyle: 'redirect',
+					loginStyle: 'popup',
 					clientId,
 				},
 			},
diff --git a/client/views/login/AppleOauth/AppleOauthButton.tsx b/client/views/login/AppleOauth/AppleOauthButton.tsx
index 9863627d91e8..672a64e5857a 100644
--- a/client/views/login/AppleOauth/AppleOauthButton.tsx
+++ b/client/views/login/AppleOauth/AppleOauthButton.tsx
@@ -7,7 +7,7 @@ import { useSetting } from '../../../contexts/SettingsContext';
 export const AppleOauthButton: FC = () => {
 	const enabled = useSetting('Accounts_OAuth_Apple');
 	const absoluteUrl = useAbsoluteUrl();
-	const appleClientID = useSetting('Accounts_OAuth_Apple_id') || '[CLIENT_ID]';
+	const appleClientID = useSetting('Accounts_OAuth_Apple_id');
 
 	const redirectURI = absoluteUrl('_oauth/apple');