Installations
npm install @storyofams/next-password-protectDeveloper Guide
Typescript
Yes
Module System
CommonJS
Node Version
12.22.12
NPM Version
6.14.11
Score
35.9
Supply Chain
79.5
Quality
78.3
Maintenance
50
Vulnerability
91.6
License
Releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (81.65%)
JavaScript (15.38%)
CSS (2.88%)
Shell (0.09%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
351,922
Last Day
48
Last Week
289
Last Month
1,304
Last Year
31,038
GitHub Statistics
318 Stars
125 Commits
18 Forks
6 Watching
17 Branches
9 Contributors
Bundle Size
54.90 kB
Minified
18.13 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
1.7.0
Package Id
@storyofams/next-password-protect@1.7.0
Unpacked Size
647.33 kB
Size
146.97 kB
File Count
324
NPM Version
6.14.11
Node Version
12.22.12
Total Downloads
Cumulative downloads
Total Downloads
351,922
Last day
-5.9%
48
Compared to previous day
Last week
-6.5%
289
Compared to previous week
Last month
-8.9%
1,304
Compared to previous month
Last year
-66.9%
31,038
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Dev Dependencies
77
@storyofams/next-password-protect
Password protect your Next.js deployments. View demo (Password is secret)
How it works
This library adds a password prompt to your Next.js deployment. It consists of two main parts:
- Two serverless API routes:
- A login route that checks if a password is correct and sets a cookie with a JWT in case it is.
- A check route that validates if you have the authorization cookie with a valid JWT.
- A HOC (Higher-Order Component) that wraps Next.js App and adds a check that validates if you are logged in. If you do, then you can view the app normally; otherwise, you are presented with a password prompt.
Important: The recommended use case for this library is in a staging or preview environment. By taking advantage of webpack's DefinePlugin, we can make sure this library is only included in certain environments, keeping the production bundle size small.
This library is NOT meant as a secure password authentication wrapper, but rather as a way to keep nosey people out.
Installation
1yarn add @storyofams/next-password-protect 2# or 3npm install @storyofams/next-password-protect
Usage
There are 3 steps to enabling password protect: setting a global variable, adding the API routes, and adding the HOC to _app.
Step 1
In order to be able to take advantage of dead code elimination, it is recommended to add an environment variable like process.env.PASSWORD_PROTECT, and enable the library based on that variable. To set this variable, add the following to next.config.js:
1module.exports = { 2 env: { 3 // Add any logic you want here, returning `true` to enable password protect. 4 PASSWORD_PROTECT: process.env.ENVIRONMENT === 'staging', 5 } 6});
Step 2
Add two api routes, one with the loginHandler and one with the passwordCheckHandler api function. You can name them anything, as long as you pass the names to loginApiUrl and checkApiUrl respectively, in the next step. By default it expects /login and /passwordCheck.
1import { loginHandler } from "@storyofams/next-password-protect"; 2 3export default loginHandler("YOUR_SECRET_PASSWORD", { 4 // Options go here (optional) 5 cookieName: "next-password-protect", 6});
1import { passwordCheckHandler } from "@storyofams/next-password-protect"; 2 3export default passwordCheckHandler("YOUR_SECRET_PASSWORD", { 4 // Options go here (optional) 5 cookieName: "next-password-protect", 6});
Step 3
Add the withPasswordProtect HOC to the default export of App in pages/_app.tsx:
1import { withPasswordProtect } from "@storyofams/next-password-protect"; 2 3// Before: export default App; 4export default process.env.PASSWORD_PROTECT 5 ? withPasswordProtect(App, { 6 // Options go here (optional) 7 loginApiUrl: "/login", 8 }) 9 : App;
Note: make sure to specify loginApiUrl and/or checkApiUrl if the api route(s) are not default.
API
API routes handlers
loginHandler(password: string, options)
The options object can contain any of the following options:
| Option | Description | Default value |
|---|---|---|
cookieMaxAge | Cookie Max-Age attribute | undefined |
cookieName | The name of the authorization cookie | 'next-password-protect' |
cookieSameSite | SameSite cookie attribute | false |
cookieSecure | Secure flag on the cookie | process.env.NODE_ENV === 'production' |
passwordCheckHandler(password: string, options)
The options object can contain any of the following options:
| Option | Description | Default value |
|---|---|---|
cookieName | The name of the authorization cookie | 'next-password-protect' |
Next App HOC
withPasswordProtect(App: NextApp, options)
The options object can contain any of the following options:
| Option | Description | Default value |
|---|---|---|
checkApiUrl | Relative path of the api route handled by passwordCheckHandler | '/api/passwordCheck' |
loginApiUrl | Relative path of the api route handled by loginHandler | '/api/login' |
loginComponent | Supply your own React component to show as login prompt | LoginComponent |
loginComponentProps | Properties object to customize the login prompt, without overriding the entire component (see below) | {} |
bypassProtection | Bypass protection for specific routes, decided by callback with NextRouter param | ({ route }) => false |
The loginComponentProps object can contain any of the following options:
| Option | Description | Default value |
|---|---|---|
backUrl | Show a link with this URL to go back to main website | undefined |
buttonBackgroundColor | Login button background color | '#01EDBC' |
buttonColor | Login button color | '#111' |
logo | Show a logo above the prompt (img src) | undefined |
Advanced
Custom login component
To change the default login component, a React component can be supplied to the withPasswordProtect HOC. In order for the library to function properly, make sure your login component has password input that is validated by the the api route.
You can use src/hoc/LoginComponent.tsx as a starting point.
Caveats
AMP is not yet supported, because the LoginComponent failed AMP validation. On an AMP page, nothing is rendered. This could be fixed by changing LoginComponent to valid AMP.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 3/4 approved changesets -- score normalized to 7
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/release.yaml:1
- Warn: no topLevel permission defined: .github/workflows/test.yaml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/instantcommerce/next-password-protect/release.yaml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/instantcommerce/next-password-protect/release.yaml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yaml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/instantcommerce/next-password-protect/test.yaml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yaml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/instantcommerce/next-password-protect/test.yaml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yaml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/instantcommerce/next-password-protect/test.yaml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yaml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/instantcommerce/next-password-protect/test.yaml/master?enable=pin
- Info: 0 out of 5 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
Project has not signed or included provenance with any releases.
Details
- Warn: release artifact v1.8.0 not signed: https://api.github.com/repos/instantcommerce/next-password-protect/releases/76517054
- Warn: release artifact v1.7.0 not signed: https://api.github.com/repos/instantcommerce/next-password-protect/releases/69595929
- Warn: release artifact v1.6.0 not signed: https://api.github.com/repos/instantcommerce/next-password-protect/releases/58437682
- Warn: release artifact v1.5.14 not signed: https://api.github.com/repos/instantcommerce/next-password-protect/releases/53895611
- Warn: release artifact v1.5.13 not signed: https://api.github.com/repos/instantcommerce/next-password-protect/releases/53894538
- Warn: release artifact v1.8.0 does not have provenance: https://api.github.com/repos/instantcommerce/next-password-protect/releases/76517054
- Warn: release artifact v1.7.0 does not have provenance: https://api.github.com/repos/instantcommerce/next-password-protect/releases/69595929
- Warn: release artifact v1.6.0 does not have provenance: https://api.github.com/repos/instantcommerce/next-password-protect/releases/58437682
- Warn: release artifact v1.5.14 does not have provenance: https://api.github.com/repos/instantcommerce/next-password-protect/releases/53895611
- Warn: release artifact v1.5.13 does not have provenance: https://api.github.com/repos/instantcommerce/next-password-protect/releases/53894538
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 30 are checked with a SAST tool
Reason
92 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-8cf7-32gw-wr33
- Warn: Project is vulnerable to: GHSA-hjrf-2m68-5959
- Warn: Project is vulnerable to: GHSA-qwph-4952-7xr6
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-c59h-r6p8-q9wc
- Warn: Project is vulnerable to: GHSA-g77x-44xx-532m
- Warn: Project is vulnerable to: GHSA-7gfc-8cq8-jh5f
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
- Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
- Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
- Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-hxwm-x553-x359
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
- Warn: Project is vulnerable to: GHSA-25mp-g6fv-mqxx
- Warn: Project is vulnerable to: GHSA-fmvm-x8mv-47mj
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Score
2.9
/10
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More