Password protection

Open encrypted documents with a password your app provides, or ask the user for it with a built-in or custom form.

Basics

passwordPrompt shows a password form when a document is encrypted, and asks again after a wrong password.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { // The password for this sample is: demo return <PdfViewer source="/samples/password.pdf" passwordPrompt />; }

The form is labeled, announces an incorrect password as an alert, and marks the field invalid. Without passwordPrompt, an encrypted document reports a PASSWORD_REQUIRED error.

A known password

Pass password when your app already has it; changing it reloads the document.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { // A password your app already knows, for example from the server. return <PdfViewer source="/samples/password.pdf" password="demo" />; }

Customization

renderPasswordPrompt({ incorrect, submit }) replaces the form with your own.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; import { useId, useState } from 'react'; function UnlockForm({ incorrect, submit, }: { incorrect: boolean; submit: (password: string) => void; }) { const id = useId(); const [value, setValue] = useState(''); return ( <form style={{ display: 'grid', gap: 8, maxWidth: 320, margin: '48px auto', textAlign: 'center' }} onSubmit={(event) => { event.preventDefault(); submit(value); }} > <strong>🔒 This file is protected</strong> <label htmlFor={id}>Enter the document password (hint: demo)</label> <input id={id} type="password" value={value} aria-invalid={incorrect} onChange={(event) => setValue(event.target.value)} /> {incorrect && <span role="alert">That password didn’t work.</span>} <button type="submit">Unlock</button> </form> ); } export default function Demo() { return ( <PdfViewer source="/samples/password.pdf" passwordPrompt renderPasswordPrompt={(context) => <UnlockForm {...context} />} /> ); }

Default texts are labels.passwordPrompt, passwordLabel, passwordSubmit and passwordIncorrect; see Labels and locale and the customization guide.

Advanced / escape hatch

With usePdfDocument, pass password in the options and handle error.code === 'PASSWORD_REQUIRED' or 'INCORRECT_PASSWORD' in your own UI.

Limitations

The password is held in memory. Anything that controls password (props, state) can read it. Workaround: clear it from your state after the document opens if that matters in your threat model.
Owner restrictions are not enforced. Permissions such as “no printing” or “no copying” set by the PDF author are not applied by the viewer. Workaround: hide print and download from the toolbar and leave textLayer off for such documents.

API

PdfViewerProps — Props for PdfViewer. Every piece of state supports the value / defaultValue / onChange trio.