|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import React, { |
| 4 | + useCallback, |
| 5 | + useEffect, |
| 6 | + useState, |
| 7 | + useRef, |
| 8 | + FC, |
| 9 | + ReactNode, |
| 10 | +} from 'react'; |
| 11 | +import { useNeynarContext } from '@neynar/react'; |
| 12 | + |
| 13 | +export const NeynarAuthButton: FC<{ |
| 14 | + children: ReactNode; |
| 15 | + onLogin: (code: string) => void; |
| 16 | +}> = (props) => { |
| 17 | + const { children, onLogin } = props; |
| 18 | + const { client_id } = useNeynarContext(); |
| 19 | + |
| 20 | + const [showModal, setShowModal] = useState(false); |
| 21 | + |
| 22 | + const authWindowRef = useRef<Window | null>(null); |
| 23 | + const neynarLoginUrl = `${ |
| 24 | + process.env.NEYNAR_LOGIN_URL ?? 'https://app.neynar.com/login' |
| 25 | + }?client_id=${client_id}`; |
| 26 | + const authOrigin = new URL(neynarLoginUrl).origin; |
| 27 | + |
| 28 | + const modalRef = useRef<HTMLDivElement>(null); |
| 29 | + |
| 30 | + const handleMessage = useCallback( |
| 31 | + async (event: MessageEvent) => { |
| 32 | + if ( |
| 33 | + event.origin === authOrigin && |
| 34 | + event.data && |
| 35 | + event.data.is_authenticated |
| 36 | + ) { |
| 37 | + authWindowRef.current?.close(); |
| 38 | + window.removeEventListener('message', handleMessage); // Remove listener here |
| 39 | + const _user = { |
| 40 | + signer_uuid: event.data.signer_uuid, |
| 41 | + ...event.data.user, |
| 42 | + }; |
| 43 | + |
| 44 | + onLogin(Buffer.from(JSON.stringify(_user)).toString('base64')); |
| 45 | + } |
| 46 | + }, |
| 47 | + [client_id, onLogin] |
| 48 | + ); |
| 49 | + |
| 50 | + const handleSignIn = useCallback(() => { |
| 51 | + const width = 600, |
| 52 | + height = 700; |
| 53 | + const left = window.screen.width / 2 - width / 2; |
| 54 | + const top = window.screen.height / 2 - height / 2; |
| 55 | + const windowFeatures = `width=${width},height=${height},top=${top},left=${left}`; |
| 56 | + |
| 57 | + authWindowRef.current = window.open( |
| 58 | + neynarLoginUrl, |
| 59 | + '_blank', |
| 60 | + windowFeatures |
| 61 | + ); |
| 62 | + |
| 63 | + if (!authWindowRef.current) { |
| 64 | + console.error( |
| 65 | + 'Failed to open the authentication window. Please check your pop-up blocker settings.' |
| 66 | + ); |
| 67 | + return; |
| 68 | + } |
| 69 | + |
| 70 | + window.addEventListener('message', handleMessage, false); |
| 71 | + }, [client_id, handleMessage]); |
| 72 | + |
| 73 | + const closeModal = () => setShowModal(false); |
| 74 | + |
| 75 | + useEffect(() => { |
| 76 | + return () => { |
| 77 | + window.removeEventListener('message', handleMessage); // Cleanup function to remove listener |
| 78 | + }; |
| 79 | + }, [handleMessage]); |
| 80 | + |
| 81 | + const handleOutsideClick = useCallback((event: any) => { |
| 82 | + if (modalRef.current && !modalRef.current.contains(event.target)) { |
| 83 | + closeModal(); |
| 84 | + } |
| 85 | + }, []); |
| 86 | + |
| 87 | + useEffect(() => { |
| 88 | + if (showModal) { |
| 89 | + document.addEventListener('mousedown', handleOutsideClick); |
| 90 | + } else { |
| 91 | + document.removeEventListener('mousedown', handleOutsideClick); |
| 92 | + } |
| 93 | + |
| 94 | + return () => { |
| 95 | + document.removeEventListener('mousedown', handleOutsideClick); |
| 96 | + }; |
| 97 | + }, [showModal, handleOutsideClick]); |
| 98 | + |
| 99 | + return <div onClick={handleSignIn}>{children}</div>; |
| 100 | +}; |
0 commit comments