Password protected PDF's constantly being asked for password

spencer-robertson commented 1 year ago

Before you start - checklist

[X] I followed instructions in documentation written for my React-PDF version
[X] I have checked if this bug is not already reported
[X] I have checked if an issue is not listed in Known issues
[X] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

When using the component on mobile I kept getting the alert to enter my password for a protected PDF. If I click cancel a new alert appears instantly. I have seen similiar issues raised in the past and attmpted to add a custom alert into the onPassword prop:

onPassword={(callback): void => 
    callback(
        prompt(
            "My custom password prompt",
        ),
    )
}

However this never seems to get called for me.

Steps to reproduce

Add onPassword callback to Document
Open a password protected PDF

Expected behavior

Custom alert pops up asking user for password

Actual behavior

Old popup is used

Additional information

Ive noticed other issues raised around this from other users (this one in particular seems similiar to my issue but was in the incorrect repo https://github.com/diegomura/react-pdf/issues/925). The strange thing is, checking the code it looks like the default uses an alert with the message

Enter the password to open this PDF file.

(https://github.com/wojtekmaj/react-pdf/blob/v5.x/src/Document.jsx#L348)

However, when I attempt to open a password portected file I get the following. This is making me think it may be unrelated to the code and is maybe an issue with my file? If theres anything I can add please let me know

Environment

Browser (if applicable): Chrome Version 115.0.5790.110
React-PDF version: 7.3.3
React version: 16.14.0
Webpack version (if applicable): -

spencer-robertson commented 1 year ago

In case it helps here is how I am currently calling using it

<Document
  file={`${src}`}

  onLoadProgress={({ loaded: newLoaded, total: newTotal }): void => {
   ...load stuff
  }}

  onLoadSuccess={({ numPages }): void => {
    ...load stuff
  }}

  onLoadError={(newError): void => {
    ...load stuff
  }}

  onPassword={(callback): void =>
    callback(
      prompt("My custom password prompt")
    )
  }
>
  {Array.from(new Array(numberOfPages), (_, i) => (
    <Page
      key={`page_${i + 1}`}
      className={style.page}
      pageNumber={i + 1}
      scale={scale}
    />
  ))}

  <div className={style.controls}>
    <Button
      className={style.button}
      onButtonClick={(): void => setScale((prevScale) => prevScale * SCALE_AMOUNT)}
    >
      <ZoomIn className={style.icon} />
    </Button>

    <Button
      className={style.button}
      onButtonClick={(): void => setScale((prevScale) => prevScale / SCALE_AMOUNT)}
    >
      <ZoomOut className={style.icon} />
    </Button>
  </div>
</Document>;

wojtekmaj commented 1 year ago

Hmm, that's really, really weird, I must say.

Does this happen on v6 as well?

spencer-robertson commented 1 year ago

Please ignore everything I have said, realised I wasn't using it correctly. Just retested with all the changes to onPassword I added above and everything worked as expected, sorry to waste your time!

wojtekmaj / react-pdf