Sign in with Apple JS - React - How to configure the redirectURI?

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)}
Answered by jdw814 in 710430022

For anyone who runs into this error, I finally got it fixed -- but not by changing the configuration of my redirect URL.

My problem was the Cross-Origin-Opener-Policy header on the web server -- and the tech with access to that changed it to allow "same-origin-allow-popups"


In regards to the redirect URL itself, since I am using a one-page React App for my website I just have it like the following: https://www.mysite.com/ (The ending slash seems to be a must...)

To set it in your Apple Developer account, go to "Certificates, Identifiers & Profiles" --> then choose "Identifiers" in the left hand menu --> then select "Service IDs" over on the top right. (The default is "App IDs") From there you can add or edit your Sign In with Apple configuration, including the URLs...

New data: I'm working on a new development server, different from the one that I did my original non-React implementation of this process on. This week, I brought that original process over to the new server -- and it is now failing in exactly the same way as the React app.

It appears that the problem is more likely in the server configuration, rather than in the React implementation. (This is an in-house server, managed by Corporate IT. The old server was Apache. I know that the new one isn't using Apache, but don't know what it is running...)

Hey there. I'm new working with apple sing-in. Did you find a tutorial about how I can configure sing in from the server ? I can not find where I must set the redirect_url value. tranks in advance.

Accepted Answer

For anyone who runs into this error, I finally got it fixed -- but not by changing the configuration of my redirect URL.

My problem was the Cross-Origin-Opener-Policy header on the web server -- and the tech with access to that changed it to allow "same-origin-allow-popups"


In regards to the redirect URL itself, since I am using a one-page React App for my website I just have it like the following: https://www.mysite.com/ (The ending slash seems to be a must...)

To set it in your Apple Developer account, go to "Certificates, Identifiers & Profiles" --> then choose "Identifiers" in the left hand menu --> then select "Service IDs" over on the top right. (The default is "App IDs") From there you can add or edit your Sign In with Apple configuration, including the URLs...

Hi, I'm using Firebase to configure Apple authentication, and i have a question: what should go into "clientId" field? Is it ServicesID or AppID from Apple developers console? Thanks in advance!

For my application, it was the ServicesID.

Sign in with Apple JS - React - How to configure the redirectURI?
 
 
Q