A beautiful, client-side login shim that sits on top of a website, requiring users to log in via an extension before viewing the website content. The shim checks for the presence of window.nostr
and calls await window.nostr.getPublicKey()
for the login process.
To use the login shim in your project, first, download the index.js
file from this repository and include it in your project folder.
Then, add the following script tag to your HTML file:
<script src="path/to/index.js"></script>
Replace path/to with the actual path to the index.js file in your project folder.
To import the module from a CDN, add the following line to your HTML file:
import 'https://cdn.skypack.dev/nostr-login-shim'
or
<script
type="module"
src="https://cdn.skypack.dev/nostr-login-shim"
></script>
Once you've included the login shim library in your HTML file, it will automatically display the login shim on top of your website content. The shim will remain visible until the user clicks the "Login" button, at which point the library will check for the presence of window.nostr and call await window.nostr.getPublicKey(). If the check is successful, the shim will be hidden, and the user will be able to view the website content.
If you need to modify the login process or the appearance of the shim, you can edit the index.js file directly.
For the login process, modify the checkForExtension function as needed. For the appearance, update the shimStyles constant with your desired styles.
You can view the demo by clicking here.
- MIT