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