Typescript support
GrabbenD opened this issue · 6 comments
GrabbenD commented
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 commented
@a-tokyo Hi! Any updates on this?
jklp commented
This was the first time for me adding a module without types, but found this answer on stackoverflow for those who are also struggling:
And as for what file to put the types in, there's an answer in the comments
rsomlette commented
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;
}
tonytony2020 commented
a-tokyo commented
@tonytony2020 Awesome! reviewed 🔥