From cdef752a812a579e231929c69a3a899f1f5b3ddf Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 4 Oct 2022 13:04:52 +0800 Subject: [PATCH 1/3] Embed the apple id button so it doesnt fail when the apple CDN returns 404 --- .../web/components/templates/LoginForm.tsx | 9 +- .../templates/auth/AppleIdButton.tsx | 117 ++++++++++++++++++ 2 files changed, 119 insertions(+), 7 deletions(-) create mode 100644 packages/web/components/templates/auth/AppleIdButton.tsx diff --git a/packages/web/components/templates/LoginForm.tsx b/packages/web/components/templates/LoginForm.tsx index 566276e80..2068d0c2c 100644 --- a/packages/web/components/templates/LoginForm.tsx +++ b/packages/web/components/templates/LoginForm.tsx @@ -8,6 +8,7 @@ import { appleAuthRedirectURI, } from '../../lib/appConfig' import AppleLogin from 'react-apple-login' +import { AppleIdButton } from './auth/AppleIdButton' const StyledTextSpan = styled('span', StyledText) @@ -90,19 +91,13 @@ export function LoginForm(props: LoginFormProps): JSX.Element { height: '40px', }} > - )} diff --git a/packages/web/components/templates/auth/AppleIdButton.tsx b/packages/web/components/templates/auth/AppleIdButton.tsx new file mode 100644 index 000000000..2275c4323 --- /dev/null +++ b/packages/web/components/templates/auth/AppleIdButton.tsx @@ -0,0 +1,117 @@ +// Based on react-apple-login + +import React from "react"; + +export interface AppleLoginProps { + clientId: string; + redirectURI: string; + scope: string; + state?: string; + responseType?: string | "code" | "id_token"; + responseMode?: string | "query" | "fragment" | "form_post"; + nonce?: string; +} + +export const AppleIdButton = (props: AppleLoginProps) => { + const { + clientId, + redirectURI, + state = "", + responseMode = "query", + responseType = "code", + nonce = "", + scope, + } = props; + + const onClick = async (e: any = null) => { + if (e) { + e.preventDefault(); + } + + let url = new URL(`https://appleid.apple.com/auth/authorize`) + url.searchParams.append('response_type', responseType) + url.searchParams.append('response_mode', responseMode) + url.searchParams.append('client_id', clientId) + url.searchParams.append('redirect_uri', encodeURIComponent(redirectURI)) + url.searchParams.append('state', state) + url.searchParams.append('nonce', nonce) + url.searchParams.append('scope', responseMode === "query" ? "" : scope) + window.location.href = url.toString() + + } + + return ( + <> +
+
+
+ + + + + + +  Continue with Apple + + + +
+
+
` + }} /> +
+ + ) +} From cf582df40617a542e0f2517a81b5d01aa766b1d6 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 4 Oct 2022 13:10:31 +0800 Subject: [PATCH 2/3] use const instead of let --- packages/web/components/templates/auth/AppleIdButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/templates/auth/AppleIdButton.tsx b/packages/web/components/templates/auth/AppleIdButton.tsx index 2275c4323..dbd610e64 100644 --- a/packages/web/components/templates/auth/AppleIdButton.tsx +++ b/packages/web/components/templates/auth/AppleIdButton.tsx @@ -28,7 +28,7 @@ export const AppleIdButton = (props: AppleLoginProps) => { e.preventDefault(); } - let url = new URL(`https://appleid.apple.com/auth/authorize`) + const url = new URL(`https://appleid.apple.com/auth/authorize`) url.searchParams.append('response_type', responseType) url.searchParams.append('response_mode', responseMode) url.searchParams.append('client_id', clientId) From dd508f2f63f1e89b10ee69ea1c42e332871bf6c7 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 4 Oct 2022 13:25:22 +0800 Subject: [PATCH 3/3] Dont double encode the redirect uri --- packages/web/components/templates/auth/AppleIdButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/templates/auth/AppleIdButton.tsx b/packages/web/components/templates/auth/AppleIdButton.tsx index dbd610e64..2457baea4 100644 --- a/packages/web/components/templates/auth/AppleIdButton.tsx +++ b/packages/web/components/templates/auth/AppleIdButton.tsx @@ -32,7 +32,7 @@ export const AppleIdButton = (props: AppleLoginProps) => { url.searchParams.append('response_type', responseType) url.searchParams.append('response_mode', responseMode) url.searchParams.append('client_id', clientId) - url.searchParams.append('redirect_uri', encodeURIComponent(redirectURI)) + url.searchParams.append('redirect_uri', redirectURI) url.searchParams.append('state', state) url.searchParams.append('nonce', nonce) url.searchParams.append('scope', responseMode === "query" ? "" : scope)