fix: iOS redirect delay (#116)

* fix: iOS redirect delay * chore: add changeset
farcasterxyz · Jan 22, 2024 · be9a35a · be9a35a
1 parent 47a8553
commit be9a35a
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 10 deletions.
diff --git a/.changeset/famous-glasses-exercise.md b/.changeset/famous-glasses-exercise.md
@@ -0,0 +1,5 @@
+---
+"@farcaster/auth-kit": patch
+---
+
+fix: iOS redirect delay
diff --git a/packages/auth-kit/src/components/Button.tsx b/packages/auth-kit/src/components/Button.tsx
@@ -7,7 +7,7 @@ export type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
 
 export function Button({ kind = "primary", children, className, ...rest }: Props) {
   return (
-    <button className={kindClass[kind] || className} {...rest}>
+    <button type="button" className={kindClass[kind] || className} {...rest}>
       {children}
     </button>
   );

diff --git a/packages/auth-kit/src/components/SignInButton/SignInButton.tsx b/packages/auth-kit/src/components/SignInButton/SignInButton.tsx
@@ -33,6 +33,7 @@ export function SignInButton({ debug, ...signInArgs }: SignInButtonProps) {
     [onError]
   );
 
+
   const signInState = useSignIn({
     ...signInArgs,
     onSuccess: onSuccessCallback,
@@ -42,34 +43,47 @@ export function SignInButton({ debug, ...signInArgs }: SignInButtonProps) {
   const {
     signIn,
     signOut,
+    connect,
     reconnect,
     isSuccess,
     isError,
     error,
+    channelToken,
     url,
     data,
     validSignature,
   } = signInState;
 
+  const onSignOut = useCallback(() => {
+    setShowDialog(false);
+    signOut();
+  }, [signOut]);
+
   const [showDialog, setShowDialog] = useState(false);
 
   const onClick = useCallback(() => {
-    isError ? reconnect() : signIn();
+    if (isError) {
+      reconnect()
+    }
     setShowDialog(true);
-  }, [isError, reconnect, signIn]);
+    signIn();
+    if (url && isMobile()) {
+      window.location.href = url;
+    }
+  }, [isError, reconnect, signIn, url]);
 
   const authenticated = isSuccess && validSignature;
 
   useEffect(() => {
-    if (url && isMobile()) {
-      window.location.href = url;
+    if (!channelToken) {
+      connect();
     }
-  }, [url, setShowDialog]);
+  }, [channelToken, connect]);
 
   return (
     <div className="fc-authkit-signin-button">
       {authenticated ? (
-        <ProfileButton userData={data} signOut={signOut} />
+        <ProfileButton userData={data} signOut={onSignOut} />
       ) : (
         <>
           <ActionButton onClick={onClick} label="Sign in" />

diff --git a/packages/auth-kit/src/hooks/useSignIn.ts b/packages/auth-kit/src/hooks/useSignIn.ts
@@ -39,11 +39,13 @@ export function useSignIn(args: UseSignInArgs) {
     reconnect,
     reset,
     data: { channelToken, url, qrCodeUri, nonce },
+    isSuccess: isConnected,
     isError: isCreateChannelError,
     error: createChannelError,
   } = useCreateChannel({ ...createChannelArgs, onError });
 
   const {
+    watch,
     isPolling,
     data: statusData,
     isError: isWatchStatusError,
@@ -73,7 +75,7 @@ export function useSignIn(args: UseSignInArgs) {
   const error = createChannelError || watchStatusError || verifyError;
 
   const signIn = () => {
-    connect();
+    watch();
   };
 
   const signOut = () => {
@@ -91,7 +93,9 @@ export function useSignIn(args: UseSignInArgs) {
   return {
     signIn,
     signOut,
+    connect,
     reconnect,
+    isConnected,
     isSuccess,
     isPolling,
     isError,

diff --git a/packages/auth-kit/src/hooks/useWatchStatus.ts b/packages/auth-kit/src/hooks/useWatchStatus.ts
@@ -26,20 +26,26 @@ export function useWatchStatus(args: UseWatchStatusArgs) {
   };
 
   const [statusData, setStatusData] = useState<StatusAPIResponse>();
+  const [isEnabled, setIsEnabled] = useState<boolean>(false);
   const [isSuccess, setIsSuccess] = useState<boolean>(false);
   const [isPolling, setIsPolling] = useState<boolean>(false);
   const [isError, setIsError] = useState<boolean>(false);
   const [error, setError] = useState<AuthClientError>();
 
   const resetState = () => {
     setStatusData(undefined);
+    setIsEnabled(false);
     setIsError(false);
     setIsSuccess(false);
     setError(undefined);
   };
 
+  const watch = () => {
+    setIsEnabled(true);
+  };
+
   const watchStatus = useCallback(async () => {
-    if (appClient && channelToken) {
+    if (isEnabled && appClient && channelToken) {
       setIsPolling(true);
       const {
         data,
@@ -66,7 +72,7 @@ export function useWatchStatus(args: UseWatchStatusArgs) {
         onSuccess?.(data);
       }
     }
-  }, [appClient, channelToken, timeout, interval, onSuccess, onError, onResponse]);
+  }, [isEnabled, appClient, channelToken, timeout, interval, onSuccess, onError, onResponse]);
 
   useEffect(() => {
     resetState();
@@ -76,6 +82,7 @@ export function useWatchStatus(args: UseWatchStatusArgs) {
   }, [channelToken, watchStatus]);
 
   return {
+    watch,
     isSuccess,
     isPolling,
     isError,