Prompt for password for password protected PDF keeps popping up

[zeusservando]

Hi @wojtekmaj good day i have a pdf file with password protected, but when the prompt box shows up i cant close it.

[helios1138]

you can define a custom password behavior using onPassword handler

[wojtekmaj]

Yeah, the default onPassword is a little limited. But this is because there are so many different use cases. React-PDF might handle PDFs that are meant to be "closeable" or not.

If you want to cancel loading the file if the user presses "Cancel" on password prompt and do something with it, do something like this:

function onPassword(callback, reason) {
  function callbackProxy(password) {
    // Cancel button handler
    if (password === null) {
      // Reset your `document` in `state`, un-mount your `<Document />`, show custom message, whatever
    }

    callback(password);
  }

  switch (reason) {
    case PasswordResponses.NEED_PASSWORD: {
      const password = prompt('Enter the password to open this PDF file.');
      callbackProxy(password);
      break;
    }
    case PasswordResponses.INCORRECT_PASSWORD: {
      const password = prompt('Invalid password. Please try again.');
      callbackProxy(password);
      break;
    }
    default:
  }
}

[wojtekmaj]

Looks like you confused the repositories. This is React-PDF which is used to display PDFs.

[sebastam97]

Hello, I have a problem when I try to close the alert, it is not allowed, I could give a clear example of how to close it when they give it to cancel

[wojtekmaj]

@sebastam97 It is allowed, but you need to handle that like described in #581 (comment).

[sivaprasadev]

@wojtekmaj I have a scenario where I want to check whether the password given by the user is correct or not. If it is correct, onLoadSuccess has to be called else need to throw an error which led to invoke onLoadError() method.

Currently, I pass the password from API to the password callback and the document gets loaded if it is correct. But, not throwing an error when it becomes wrong.

How can i handle this problem ?

[hilmanski]

Hi @wojtekmaj
Do you mind to show use what's the current "default" behavior in code looks like

function onPassword(..) {
 // what's the current behavior here
}

thanks

[wojtekmaj]

@hilmanski Sure, it's open source :P

react-pdf/src/Document.jsx

Lines 347 to 363 in c2012f8

	onPassword: (callback, reason) => {
	switch (reason) {
	case PasswordResponses.NEED_PASSWORD: {
	// eslint-disable-next-line no-alert
	const password = prompt('Enter the password to open this PDF file.');
	callback(password);
	break;
	}
	case PasswordResponses.INCORRECT_PASSWORD: {
	// eslint-disable-next-line no-alert
	const password = prompt('Invalid password. Please try again.');
	callback(password);
	break;
	}
	default:
	}
	},

[hilmanski]

thanks for pointing out the file @wojtekmaj
have a good day!

[NikhilAgarwal05]

sometime the above solution code gives error, at that point this code is working:-

visit #581 (comment) for more reference.
Thanks @wojtekmaj

[pstevovski]

@hilmanski Sure, it's open source :P

react-pdf/src/Document.jsx

Lines 347 to 363 in c2012f8

	onPassword: (callback, reason) => {
	switch (reason) {
	case PasswordResponses.NEED_PASSWORD: {
	// eslint-disable-next-line no-alert
	const password = prompt('Enter the password to open this PDF file.');
	callback(password);
	break;
	}
	case PasswordResponses.INCORRECT_PASSWORD: {
	// eslint-disable-next-line no-alert
	const password = prompt('Invalid password. Please try again.');
	callback(password);
	break;
	}
	default:
	}
	},

@wojtekmaj Where does the PasswordResponses variable comes from? I tried accessing it, tried importing it from 'react-pdf' but it does not exist.

[wojtekmaj]

Well that's really stupid - would you mind raising a PR for that?

[pstevovski]

@wojtekmaj Sure thing, will open a PR now. Seems like the PasswordResponses.ts file exists and has a default export, but in the exported modules from index.ts is not present. Will send a PR now.

[atologistChiragRathod]

import { PasswordResponses } from 'pdfjs-dist';
From 'pdfjs-dist' you can import PasswordResponses

[wojtekmaj]

@atologistChiragRathod PasswordResponses is exported from react-pdf since #1615 (v7.4.1 and up).