AppleID is not defined

[alvesvaren]

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:

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

[patelmayankce]

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.

[alvesvaren]

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

[duccadhv1]

sorry, i have same problem, any update here?

[vasanimit9]

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);
}, []);

[baodiedie]

Sorry, I have the same problem

[itsam]

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

[michael-hewitt]

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>)}

[ermander]

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

[vasanimit9]

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.

[idrees04]

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

[duccadhv1]

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

[i1-acc]

just directly add into your head tag the script that apple recommend

Apple official docs