-
Notifications
You must be signed in to change notification settings - Fork 0
/
GoogleLoginButton.tsx
96 lines (82 loc) · 2.4 KB
/
GoogleLoginButton.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import {useMatches} from '@remix-run/react';
import {useRef, useEffect} from 'react';
import jwtDecode from 'jwt-decode';
import {multipass} from '~/lib/multipass/multipass';
interface GoogleJwtCredentialsType {
given_name: string;
family_name: string;
email: string;
picture: string;
sub: string;
}
interface GoogleJwTResponseType {
credential: string;
}
declare global {
var google: {
accounts: {
id: {
initialize: (options: any) => void;
renderButton: (element: HTMLDivElement | null, options: any) => void;
};
};
};
}
/*
Google Sign in component.
@see: https://developers.google.com/identity/gsi/web/guides/display-button
*/
export function GoogleLoginButton() {
const [root] = useMatches();
const env = root?.data?.env;
const init = useRef(false);
const buttonRef = useRef<HTMLDivElement>(null);
async function handleJwtResponse(response: GoogleJwTResponseType) {
const account: GoogleJwtCredentialsType = jwtDecode(response.credential);
// google jwt customer info
const customer = {
first_name: account.given_name,
last_name: account.family_name,
email: account.email,
multipass_identifier: account.sub,
return_to: `/account`,
};
// authenticate google customer info via multipass
await multipass({
customer,
redirect: true, // will redirect to
});
}
useEffect(() => {
if (typeof window?.google !== 'undefined' || init.current) return;
init.current = true;
const script = document.createElement('script');
script.src = 'https://accounts.google.com/gsi/client';
script.async = true;
script.defer = true;
script.onload = () => {
google.accounts.id.initialize({
client_id: env.PUBLIC_GOOGLE_CLIENT_ID,
callback: handleJwtResponse,
});
// @see: https://developers.google.com/identity/gsi/web/reference/js-reference#GsiButtonConfiguration
google.accounts.id.renderButton(
buttonRef.current,
{
theme: 'outline',
text: 'Login in with Google',
size: 'large',
type: 'standard',
autoPrompt: false,
}, // customization attributes
);
};
console.log(document.body);
document.body.appendChild(script);
}, []);
return (
<div style={{width: '220px', height: '44px', overflow: 'hidde'}}>
<div ref={buttonRef}>Loading...</div>
</div>
);
}