Typescript support

[GrabbenD]

Typescript declarations would make it a ton easier to use this package, at the moment the types aren't exposed correctly:

Could not find a declaration file for module 'react-apple-signin-auth'. '/home/user/docs/repo/react-web/node_modules/react-apple-signin-auth/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-apple-signin-auth` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-apple-signin-auth';`

[Emiliano Bucci]

@a-tokyo Hi! Any updates on this?

[Jerrold Poh]

This was the first time for me adding a module without types, but found this answer on stackoverflow for those who are also struggling:

https://stackoverflow.com/questions/42964013/adding-declarations-file-manually-typescript/42964126#42964126

And as for what file to put the types in, there's an answer in the comments

https://stackoverflow.com/questions/42964013/adding-declarations-file-manually-typescript/42964126#comment85342450_42964126

[Robin]

if you have a declaration file you can add this. It should cover most of your use case.
Unrelated to the type, and coming from ReactNative I tried to use appleAuthHelpers.signIn and it wasn't working so I would keep to the button.

declare module "react-apple-signin-auth" {
  interface AppleAuthOptions {
    /** Client ID - eg: 'com.example.com' */
    clientId: string;
    /** Requested scopes, separated by spaces - eg: 'email name' */
    scope: string;
    /** 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: string;
    /** State string that is returned with the apple response */
    state?: string;
    /** Nonce */
    nonce?: string;
    /** Uses popup auth instead of redirection */
    usePopup?: boolean;
  }

  export interface AppleSigninErrorResponse {
    error: string;
  }

  export interface AppleAuthResponse {
    authorization: {
      /** ID JWT */
      id_token: string;
      /** Grant code valid for 5m */
      code: string;
      /** State string passed to the request */
      state?: string;
    };
    /** Only provided by apple in the first request */
    user?: {
      email: string;
      name: {
        firstName: string;
        lastName: string;
      };
    };
  }

  interface AppleSigninProps {
    authOptions: AppleAuthOptions;
    uiType?: "dark" | "light";
    className?: string;
    noDefaultStyle?: boolean;
    buttonExtraChildren?: string;
    style?: unknown;
    /** Removes default style tag */
    noDefaultStyle: boolean;
    /** Allows to change the button's children, eg: for changing the button text */
    buttonExtraChildren?: string;
    /** Called upon signin success in case authOptions.usePopup = true -- which means auth is handled client side default is undefined */
    onSuccess?: (response: AppleAuthResponse) => void;
    /** Called upon signin error default is undefined */
    onError?: (error: AppleSigninErrorResponse) => void;
    /** Skips loading the apple script if true. default is undefined */
    skipScript?: false;
    /** Apple image props */
    iconProps?: unknown;
    /** render function - called with all props - can be used to fully customize the UI by rendering your own component  */
    render?: (props: Record<string, unknown>) => JSX.Element;
  }

  const AppleSignin: (props: AppleSigninProps) => JSX.Element;
  export const useScript: unknown;
  export const appleAuthHelpers: {
    APPLE_SCRIPT_SRC: string;
    signIn: ({
      authOptions,
      onSuccess,
      onError,
    }: {
      authOptions: AppleAuthOptions;
      onSuccess: (response: AppleSigninSuccessResponse) => void;
      onError: (error: AppleSigninErrorResponse) => void;
    }) => Promise<void>;
  };
  export default AppleSignin;
}

[Tony]

@a-tokyo request for review #78

[Ahmed Tarek]

@tonytony2020 Awesome! reviewed 🔥

[Ahmed Tarek]

#78