User Profile

I've previously done a successful test implementation of "Sign in with Apple JS" in straight HTML / JS. Now, I am trying to move it into a React App. (Disclaimer: I've been doing web development for over a decade, but React is brand new to me -- as in since Jan 1.) I'm currently using an npm package called: "react-apple-signin-auth". I've set the redirectURI to https://develop.mySite.com/ (only with my actual development site url). When I use React to preview the process in localhost, it works up until the point that it is supposed to return the data collected back to me. (It lest me sign in, performs the 2A authentication, then gives me a Continue button -- but won't move forward from there.) When I build the React app and put the resulting code on my development site, it chokes -- displaying an error that says: "Your request could not be completed due to an error. Try again later." (In the console log, it throws the following: {"error": "popup_closed_by_user"}.) Has anyone here done this in a React app who might be able to give me a pointer on whether my redirectURI is set properly? (Or what else might be at issue here?) I'm happy to provide additional data, but can't include a link to the development site because corporate keeps it behind a firewall that only allows access to personnel within the building. Thank you, JD const responseApple = () => {   try {     return appleAuthHelpers.signIn({       authOptions: {         clientId: '<<snip>>',         redirectURI: 'https://develop.<<snip>>.com/',         usePopup: true,       },       onSuccess: (response) => console.log('responseApple - response', response),       onError: (error) => console.log('responseApple - error', error),     });   }   catch (error) {     console.log('responseApple - catch error', error);     //handle error.   } } const AppleSignInBtn = ({ ...rest }) => (   /** Apple Signin button */   <AppleSignin     /** Auth options passed to AppleID.auth.init() */     authOptions={{       clientId: '<<snip>>',       scope: 'name email',       redirectURI: 'https://develop.<<snip>>.com/',       usePopup: true,     }}     /** General props */     uiType="light"     /** className */     className="apple-auth-btn"     /** Allows to change the button's children, eg: for changing the button text */     buttonExtraChildren="Apple"     /* onClick={() => console.log('Apple onClick')} */  // default = undefined     /** Called upon signin success in case authOptions.usePopup = true -- which means auth is handled client side */     onSuccess={() => responseApple} // default = undefined     /** Called upon signin error */     onError={(error) => console.log('AppleSignInBtn onError error', error)} // default = undefined     /** Skips loading the apple script if true */     skipScript={false} // default = undefined     /** Checkout README.md for further customization props. */     /** Spread rest props if needed */     {...rest}   /> ); The error is coming from: onError={(error) => console.log('AppleSignInBtn onError error', error)}

I've already read the fixes suggested at the link below -- and double-checked my code regarding each: https://developer.apple.com/forums/thread/117531 I'm doing a React web page, using the npm package: react-apple-signin-auth for the Sign In with Apple feature. (And I have Sign In with Google already working...) When previewing the page (http://localhost:3000/), the pop-up displays and I get the prompt to Sign In with Apple. The process works all the way through until the point at which it is supposed to return the data back to my site. (Which is better than I expected in that mode.) When I build the page and push it up to my development web server, the pop-up displays -- but I get an error saying: "Your request could not be completed due to an error. Try again later." (Note: I can't point you to the development site, because corporate keeps it behind a local firewall.) Any pointers would be greatly appreciated. ~JD