react-apple-login icon indicating copy to clipboard operation
react-apple-login copied to clipboard

AppleID is not defined

Open alvesvaren opened this issue 3 years ago • 11 comments

This package has worked fine for ~2 years on our site, but it just now started failing because it tries to access AppleID before it has downloaded the script

Error in console: image

Our code:

<AppleLogin
    clientId={appleClientId}
    redirectURI={appleRedirectURI}
    scope="name email"
    usePopup={true}
    callback={userInfo => this.responseAppleCallback(userInfo)}
    render={renderProps => (
        <button type="button" onClick={renderProps.onClick} className="provider apple">
            Apple
        </button>
    )}
/>

alvesvaren avatar Jul 15 '22 12:07 alvesvaren

Hi @alvesvaren

i am going to look into why this happened. Looks like Apple updated something.

i am going to book some time next week to improve this package.

thanks for reporting this.

patelmayankce avatar Jul 15 '22 15:07 patelmayankce

It seems like the script loads after it tires to access it, so probably something with how the useScript hook reads if the script has been loaded

alvesvaren avatar Jul 15 '22 15:07 alvesvaren

sorry, i have same problem, any update here?

duccadhv1 avatar Jul 28 '22 03:07 duccadhv1

For now you can delay rendering of the component using the lib by a few seconds so that its defined when you access it. It is only a hack and not a fix.

useEffect(() => {
  // hack for appleID being undefined
  // appleID takes time to load
  setTimeout(() => {
    setShowAppleId(true);
  }, 2000);
}, []);

vasanimit9 avatar Aug 11 '22 13:08 vasanimit9

截屏2022-11-17 下午5 06 12 Sorry, I have the same problem

baodiedie avatar Nov 17 '22 09:11 baodiedie

Any ideas how to overcome this? Using timeout hack doesn't work either in my case... Thank you in adv.

itsam avatar Nov 22 '22 21:11 itsam

In my case, this crash only happens if the AppleLogin component is rendered by React but not visible. Thus, I avoid rendering the login component until it is actually visible on the screen. So far, so good. Something like this (where props.visible is passed by the parent component and is true iff the component is visible):

  {props.visible ? (<AppleLogin .../>) : (<div>Hiding Apple Login</div>)}

michael-hewitt avatar Jan 03 '23 18:01 michael-hewitt

I have the same problem. With setTimeout it doesn't work

ermander avatar Feb 09 '23 16:02 ermander

I have the same problem. With setTimeout it doesn't work

Hi, you can checkout if this works for you. In that case, you can use it until this repo's owner fixes it.

vasanimit9 avatar Feb 11 '23 16:02 vasanimit9

i have the same problem props.visible and setTimeout not working.

idrees04 avatar Mar 21 '23 07:03 idrees04

this issue come from your application can't load sdk from apple, maybe issue from slow internet connection.

duccadhv1 avatar Mar 21 '23 08:03 duccadhv1