No response using usePopup=true prop with appleAuthHelpers

[jacqueswho]

Hi

I am trying your appleAuthHelpers.signIn function. below is my code. For some strange reason I don't get an onSuccess response.

I get the popup below

After clicking continue nothing happens

import React, { useCallback, useEffect, useRef, useState } from 'react';
import { appleAuthHelpers, useScript } from 'react-apple-signin-auth';
import {
  Alert,
  Button,
  ButtonGroup,
  ButtonGroupProps,
  Image
} from '@chakra-ui/react';
import { nanoid } from 'nanoid/non-secure';

const Social: React.FC<SocialProps> = ({ joinSession, ...rest }) => {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  useScript(appleAuthHelpers.APPLE_SCRIPT_SRC);

const signInApple = useCallback(() => {
    const nonce = nanoid();
    appleAuthHelpers.signIn({
      authOptions: {
        clientId: config.apple.clientId,
        /** Requested scopes, seperated by spaces - eg: 'email name' */
        scope: 'email name',
        /** Apple's redirectURI - must be one of the URIs you added to the serviceID - the undocumented trick in apple docs is that you should call auth from a page that is listed as a redirectURI, localhost fails */
        redirectURI: config.apple.redirectUrl,
        state: 'state',
        /** Nonce */
        nonce,
        usePopup: true,
      },
      onSuccess: (response: AppleAuthResponse) => console.log(response),
      onError: (error: any) => console.error(error),
    });
  }, []);

return ( <Button
          w="100%"
          type="button"
          colorScheme="black"
          boxShadow="lg"
          leftIcon={
            <Image
              src={appleImage}
              alt="Apple"
              htmlWidth="1.22em"
              htmlHeight="auto"
              w="1.22em"
              h="auto"
              mr="2"
            />
          }
          onClick={signInApple}
        >
          {t('auth.ssoApple')}
        </Button>

)

};

export default Social;

[a-tokyo]

Duplicate of #64

This is the default behavior from Apple Inc. You should use state instead.

[jacqueswho]

@a-tokyo but usePopup is true? I don't even need the state. I just want the authorization.id_token

[jacqueswho]

@a-tokyo It does the same for me on your demo site. When you click continue, nothing happens. Should it not close and give onSuccess response?

[jacqueswho]

@a-tokyo Am I doing something wrong then?

[jacqueswho]

Duplicate of #64

This is the default behavior from Apple Inc. You should use state instead.

@a-tokyo This is not a duplicate, because usePopup: true

[jacqueswho]

@a-tokyo I tried the button as well, I don't think usePopup is working?

 <AppleSignin
          /** Auth options passed to AppleID.auth.init() */
          authOptions={{
            /** Client ID - eg: 'com.example.com' */
            clientId: config.apple.clientId,
            /** Requested scopes, seperated by spaces - eg: 'email name' */
            scope: 'email name',
            /** Apple's redirectURI - must be one of the URIs you added to the serviceID - the undocumented trick in apple docs is that you should call auth from a page that is listed as a redirectURI, localhost fails */
            redirectURI: config.apple.redirectUrl,
            /** State string that is returned with the apple response */
            state: 'state',
            /** Nonce */
            nonce: nanoid(),
            /** Uses popup auth instead of redirection */
            usePopup: true,
          }} // REQUIRED
          /** General props */
          uiType="dark"
          /** className */
          className="apple-auth-btn"
          /** Removes default style tag */
          noDefaultStyle={false}
          /** Allows to change the button's children, eg: for changing the button text */
          buttonExtraChildren="Signin with Apple"
          /** Extra controlling props */
          /** Called upon signin success in case authOptions.usePopup = true -- which means auth is handled client side */
          onSuccess={onAppleSuccess} // default = undefined
          /** Called upon signin error */
          onError={onFailure} // default = undefined
          /** Skips loading the apple script if true */
          skipScript={false} // default = undefined
          /** Apple image props */
          iconProp={{ style: { marginTop: '10px' } }} // default = undefined
        />

[jacqueswho]

@a-tokyo my apologies, your last comment is important 'localhost fails'
/** Apple's redirectURI - must be one of the URIs you added to the serviceID - the undocumented trick in apple docs is that you should call auth from a page that is listed as a redirectURI, localhost fails */

[a-tokyo]

Awesome to hear everything worked with you! Sorry for the late response, I was off for a few days! ( :

Let me know if you need further help!