zuauth
TypeScript icon, indicating that this package has built-in type declarations

0.5.0 • Public • Published

ZuAuth Icon Zuauth

A simple package designed to streamline the development of a zero-knowledge authentication system with Zupass tickets.

Github license NPM version

The repository includes the zuauth package along with a documented example demonstrating how to create an authentication system using NextJS and IronSession. Use the demo and refer to the tutorial section below to understand how to integrate zuauth into your app.

🛠 Install

Install the zuauth package with npm:

npm i zuauth

or yarn:

yarn add zuauth

📜 Tutorial

[!NOTE]
The example in the repository uses iron-session to manage sessions, but you are of course free to integrate your preferred solution.

Server

First, you need to create the server-side logic to generate a session nonce and perform the authentication. The example in this repository includes four functions: login, logout, nonce, and user. Remember to add all necessary checks in your login function, particularly ensuring that the ticket has been issued by Zupass and that it is among the supported tickets.

Client

Next, you can proceed with the client side.

  1. Create a page for the Zupass popup:

https://github.com/cedoor/zuauth/blob/c7c052a0a0b27cee9c3be7bae5dea634d7fc6954/example/src/pages/popup.tsx#L1-L10

  1. Create another page and define the default set of ticket fields to reveal.

https://github.com/cedoor/zuauth/blob/c7c052a0a0b27cee9c3be7bae5dea634d7fc6954/example/src/pages/index.tsx#L11-L23

  1. Check if the user is logged-in.

https://github.com/cedoor/zuauth/blob/c7c052a0a0b27cee9c3be7bae5dea634d7fc6954/example/src/pages/index.tsx#L26-L45

  1. Create a function to login, which generates a nonce and user's PCD:

https://github.com/cedoor/zuauth/blob/c7c052a0a0b27cee9c3be7bae5dea634d7fc6954/example/src/pages/index.tsx#L58-L70

  1. Check when the PCD is generated and returned by the Zupass popup to call the login API:

https://github.com/cedoor/zuauth/blob/c7c052a0a0b27cee9c3be7bae5dea634d7fc6954/example/src/pages/index.tsx#L47-L56

[!IMPORTANT]
When the user interacts with the Zupass popup, the output, which is the generated PCD, is not returned by any function but can be found in the pcd state variable within the useZuAuth hook. It's important to check if the value is defined.

  1. Create a function to allow users to log out:

https://github.com/cedoor/zuauth/blob/c7c052a0a0b27cee9c3be7bae5dea634d7fc6954/example/src/pages/index.tsx#L72-L82

  1. Create your UI:

https://github.com/cedoor/zuauth/blob/c7c052a0a0b27cee9c3be7bae5dea634d7fc6954/example/src/pages/index.tsx#L161-L194

Readme

Keywords

none

Package Sidebar

Install

npm i zuauth

Weekly Downloads

1

Version

0.5.0

License

GPL-3.0-or-later

Unpacked Size

56.8 kB

Total Files

8

Last publish

Collaborators

  • cedoor