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 + + + +
+
+
` + }} /> +
+ + ) +}