farcasterxyz / auth-monorepo Goto Github PK

I need a method to open with modal window with QR code but without pressing the SignIn button

I know that we have signIn method from useSignIn hook , but it is doesn`t work correctly.
I find out way only with redirect to special page , but no to open modal window pinned above. It is something like that

What is the feature you would like to implement?

• auth-kit package should rely on css variables for such style attributes as colors, sizes, border radiuses, fonts etc, instead of passing such as separate props via jsx;
• auth-kit package should expose composable low-level elements that allow a user to redefine the order/appearance of components;
• auth-kit package should allow passing className (or all of the rendered ComponentProps) of an element, along with using forwardRef.

Why is this feature important?

• The customization of auth-kit components is hard. I myself experienced it, when I tried to change the colors of the QRCode element, as my app uses dark palette and having a light bright QRCode would lead to bad UI. My workaround was using specific css-selectors to change the styles of the rendered SVG.
• The composition pattern that has faced a high adoption in such libraries as https://ui.shadcn.com/ gives a user full control of how the DOM tree for a specific component is built, and would allow users to build their own components that might not just require a different styling but a different composition.
• Having className and other DOM elements ComponentProps to be available greatly improves DX as one could pass className if uses TailwindCSS, or ref if a developer needs low-level control of the DOM element, etc.

How should this feature be built? (optional)

• All the colors, border radiuses, font settings have to be moved to their specific CSS variables.
  The suggestion is to prefix all of them with --fc-auth-kit- to avoid collisions with other CSS variables.
  Such a css could look like the following:

     // bg
     --fc-auth-kit-primary: #hex
     // text
     --fc-auth-kit-primary-foreground: #hex
     // etc.

  Developers would have to import the specific CSS in their codebase to have those variables defined, yet at the same time can define their own CSS variables if needed. Similar approach has been applied by RainbowKit (https://www.rainbowkit.com/docs/installation#import).
• Take a look at this QRCode implementation:

   <div className={qrCodeContainer}>
     <div className={qrCodeWrapper}>
       <div
         className={qrCode}
         style={{
           top: logoPosition,
           width: size,
         }}
       >
         <FarcasterLogo fill="purple" height={logoSize} />
       </div>
       <svg height={size} style={{ all: "revert" }} width={size}>
         <title>QR Code</title>
         <defs>
           <clipPath id="clip-wrapper">
             <rect height={logoWrapperSize} width={logoWrapperSize} />
           </clipPath>
           <clipPath id="clip-logo">
             <rect height={logoSize} width={logoSize} />
           </clipPath>
         </defs>
         <rect fill="transparent" height={size} width={size} />
         {dots}
       </svg>
     </div>
   </div>

  With those in place, a developer cannot re-define the composition of the components and is stuck to have those elements in DOM, even if it's not desired.
  Instead, all of those DOM Elements shall be moved to components and be exported, so that a user can use them any way he wants to:

  function QRCode(...) {
    return <Container>
      <Wrapper>
        <LogoWrapper position={logoPosition} size={size}>
          <FarcasterLogo fill="purple" height={logoSize} />
        </LogoWrapper>
        <SVG />
      </Wrapper>
    </Container>
  }
    
    QRCode.Container = Container
    QRCode.Wrapper = Wrapper
    QRCode.LogoWrapper = LogoWrapper
    QRCode.SVG = SVG
  
    export { QRCode }

  This allows a user to redefine the composition of components, i.e:

   <QRCode.Container>
     <MyCustomElementThatINeedHere />
     <QRCode.Wrapper>
       <QRCode.LogoWrapper position={logoPosition} size={size}>
         <WarpcastLogo />
       </QRCode.LogoWrapper>
       <QRCode.SVG />
     </QRCode.Wrapper>
   </QRCode.Container>

  Another approach that is worth mentioning is defining a Custom property on each component that relies on some state.
  As an example, such could be used to render a custom SVG:

  <QRCode.SVG.Custom>
   ({ dots, matrix }) => <MyFancyQRRenderer dots={dots} matrix={matrix} />
  </QRCode.SVG.Custom>

  Similar approach is implemented in RainbowKit (https://www.rainbowkit.com/docs/custom-connect-button)
• All the components must extend from the DOM Element props that is being rendered at the end, and pass refs whenever possible:
  Before:

  export type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
    kind?: "primary" | "secondary" | "tertiary" | "reset";
  };
  
  export function Button({ kind = "primary", children, className, ...rest }: Props) {
    return (
      <button type="button" className={kindClass[kind] || className} {...rest}>
        {children}
      </button>
    );
  }

  After:

  export type Props = ComponentProps<'button'> & {
    kind?: "primary" | "secondary" | "tertiary" | "reset";
  };
  
  export const Button = React.forwardRef<Props>(({ kind = "primary", children, className, ...rest }, ref) {
    return (
      <button type="button" className={kindClass[kind] || className} ref={ref} {...rest}>
        {children}
      </button>
    );
  })

Additional context
Those examples are touching only QRCode but the concerns are applicable to all the components.

What is the feature you would like to implement?
I'd like to pass in default button props, like id, ref, or className to the SignInButton component. One use case is I'd like to programmatically click the button to show the sign in flow without needing the user to click themselves, or pass in tailwind-style styling to the button.

What is the bug?
On iOS Safari after the Sign In button is clicked, if the time between the redirect and the click is too long, the Warpcast deep link does not work. There's no recovering the auth flow when that happens.

How can it be reproduced? (optional)
https://github.com/farcasterxyz/auth-monorepo/assets/2442166/867b29c3-0773-4cf1-baf3-b275d2307a1f

• Open https://sign-in-with-farcaster-demo.replit.app/ on iOS Safari with Warpcast installed
• Click sign in
  expect: it should open the Warpcast app and prompt for approval
  actual: loads a new safari tab prompting to "Install Warpcast", the auth flow cannot be recovered, even if you open the Warpcast manually and approve.

Additional context (optional)

• iOS deep links will not open the app if the time from user interaction (mouse click) to a redirect is too slow.
• In authkit's case, the time to setup the channel after clicking sign up is enough to break the deep link and the whole auth flow.
• I am based in Asia, so if you cannot reproduce try fudging your latency

Possible Solutions

• if iOS on sign in button click, create the channel then show a dialog with another button to open the app (or some variant), see example below, adds second state to button once channel is created.

e.g.

diff --git a/packages/auth-kit/src/components/SignInButton/SignInButton.tsx b/packages/auth-kit/src/components/SignInButton/SignInButton.tsx
index 9d85c03..b31d036 100644
--- a/packages/auth-kit/src/components/SignInButton/SignInButton.tsx
+++ b/packages/auth-kit/src/components/SignInButton/SignInButton.tsx
@@ -3,7 +3,7 @@ import useSignIn, { UseSignInArgs } from "../../hooks/useSignIn.ts";
 import { ActionButton } from "../ActionButton/index.ts";
 import { ProfileButton } from "../ProfileButton/index.ts";
 import { QRCodeDialog } from "../QRCodeDialog/index.tsx";
-import { isMobile } from "../../utils.ts";
+import { isIOS, isMobile } from "../../utils.ts";
 
 type SignInButtonProps = UseSignInArgs & { debug?: boolean };
 
@@ -12,6 +12,7 @@ export function SignInButton({ debug, ...signInArgs }: SignInButtonProps) {
   const { signIn, reconnect, isSuccess, isError, error, url, data, validSignature } = signInState;
 
   const [showDialog, setShowDialog] = useState(false);
+  const [showIOSButton, setShowIOSButton] = useState(false);
 
   const onClick = useCallback(() => {
     isError ? reconnect() : signIn();
@@ -22,7 +23,11 @@ export function SignInButton({ debug, ...signInArgs }: SignInButtonProps) {
 
   useEffect(() => {
     if (url && isMobile()) {
-      window.location.href = url;
+      if (!isIOS()) {
+        window.location.href = url;
+      } else {
+        setShowIOSButton(true);
+      }
     }
   }, [url, setShowDialog]);
 
@@ -32,7 +37,9 @@ export function SignInButton({ debug, ...signInArgs }: SignInButtonProps) {
         <ProfileButton userData={data} />
       ) : (
         <>
-          <ActionButton onClick={onClick} label="Sign in" />
+          {showIOSButton
+            ? <ActionButton onClick={() => { window.location.href = url! }} label="Open App" />
+            : <ActionButton onClick={onClick} label="Sign in" />}
           {url && (
             <QRCodeDialog
               open={showDialog && !isMobile()}

thanks for farcaster

What is the bug?
A concise, high level description of the bug and how it affects you

Tested on Mac OSX Chrome, clicking the "Copy Link" button gives a visual indication that the link was copied, but there is an error in the console from the Clipboard API and the link is not copied.

How can it be reproduced? (optional)
Include steps, code samples, replits, screenshots and anything else that would be helpful to reproduce the problem.

Click the "copy text" button.

log is:

6641.0a13e303.chunk.js:1 [Violation] Permissions policy violation: The Clipboard API has been blocked because of a permissions policy applied to the current document. See https://goo.gl/EuHzyv for more details.
onClick @ 6641.0a13e303.chunk.js:1
warpcast.com/static/js/6641.0a13e303.chunk.js:1 Uncaught (in promise) DOMException: Failed to execute 'writeText' on 'Clipboard': The Clipboard API has been blocked because of a permissions policy applied to the current document. See https://goo.gl/EuHzyv for more details.
    at onClick (https://warpcast.com/static/js/6641.0a13e303.chunk.js:1:7088)
    at Object.Re (https://warpcast.com/static/js/main.32761306.js:1:1806650)
    at Ze (https://warpcast.com/static/js/main.32761306.js:1:1806804)
    at https://warpcast.com/static/js/main.32761306.js:1:1826704
    at Lr (https://warpcast.com/static/js/main.32761306.js:1:1826798)
    at Br (https://warpcast.com/static/js/main.32761306.js:1:1827213)
    at https://warpcast.com/static/js/main.32761306.js:1:1832655
    at uc (https://warpcast.com/static/js/main.32761306.js:1:1896367)
    at Ne (https://warpcast.com/static/js/main.32761306.js:1:1805782)
    at zr (https://warpcast.com/static/js/main.32761306.js:1:1828507)

Additional context (optional)
Add any other context about the problem here.

In the with-next-auth example, I noticed if you sign in then hit refresh, the SignInButton believes you're not signed in and says "Sign In" rather than being a ProfileButton. This is because SignInButton is not aware of the data in the current session. It would be nice to be able to pass session data into SignInButton so that it can know you're already authenticated and display the right button.

What is the bug?
I'm using useSignIn to create a custom sign-in button. However, I'm seeing that the qrCodeUri returned by the hook is always undefined. I think I'm following the example here quite closely. Am I misunderstanding its usage?

How can it be reproduced? (optional)
I am on version "@farcaster/auth-kit": "^0.1.4",
This is a tiny snippet of my code, where this component is wrapped by a parent AuthKitProvider

const { qrCodeUri } = useSignIn({ onSuccess: () => undefined })
console.log(qrCodeUri)

and qrCodeUri is undefined on every render.

Getting a TypeScript error when I call useSignIn(): Expected 1 arguments, but got 0. The culprit is this line

What is the feature you would like to implement?
Hooks in auth-kit are managing query/mutations states themselves, yet it would be much more reliant to have them cached and managed by @tanstack/react-query.

Why is this feature important?
Library-independent state management is tough and increases the overall codebase complexity, along with caveat cases that are already managed by @tanstack/react-query.

Here's an example:
I have two components, one is a button that creates a channel, and the other one is a UI element that states wether a channel is created or not.

In order to implement one right now, I would have to implement a HOC that would use useCreateChannel and I'd need to propagate the state and mutation callback via props to my two components.

If this library leveraged @tanstack/react-query, I'd be able to call the hook separately in each component, and as long as the inputs are the same, I'd have the same state from react query cache.

How should this feature be built? (optional)
Just need to refactor anything that defines isSuccess, isError, state finality callback handlers, queries or mutations and such to use @tanstack/react-uqery.

Additional context
Developers using auth-kit would have to define their own QueryClient, which they already do with [email protected], so likelihood they've done it already is pretty high.

What is the bug?
A concise, high level description of the bug and how it affects you

I received an invitation to join Warpcast and attempted to sign up using the email [email protected]. However, it is not working. Is there a way I can debug this issue?

How can it be reproduced? (optional)
Include steps, code samples, replits, screenshots and anything else that would be helpful to reproduce the problem.

Additional context (optional)
Add any other context about the problem here.

What is the bug?
To use AuthKit, we have to polyfill Buffer in order to workaround this problem.

While this could be handled with little effort, I suggest that we move to a better implementation with https://viem.sh/docs/siwe/utilities/createSiweMessage.
This will result in less dependencies, less polyfill and better ts support.

Will happy to craft a pull request if needed.

What is the bug?
A concise, high level description of the bug and how it affects you

Using @farcaster/auth-client in a Vue3 app on iOS iPhone always shows a link to the App Store even if Warpcast is installed, making it impossible to authenticate.

It can be made to work by copying the link, opening a new tab, pasting the link and then opening warpcast from there.

How can it be reproduced? (optional)
Include steps, code samples, replits, screenshots and anything else that would be helpful to reproduce the problem.

screenshot shows this is action. Due to an issue on our side, the iframe is not scrollable.

Additional context (optional)
Add any other context about the problem here.

What is the bug?
I am trying useSignIn hook in NextJS 14.1.4, I logged In from Wrapcast app after Scanning QR code, but in return onSuccess event is not working. In console i am getting two things 1 is from farcaster relay and 2nd posting to blockchain.

How can it be reproduced? (optional)
https://github.com/jsonpreet/farcaster-login