Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cedoor/zuauth
A simple package designed to streamline the development of a zero-knowledge authentication system with Zupass tickets.
https://github.com/cedoor/zuauth
authentication pcd zuauth zupass zuzalu
Last synced: 3 months ago
JSON representation
A simple package designed to streamline the development of a zero-knowledge authentication system with Zupass tickets.
- Host: GitHub
- URL: https://github.com/cedoor/zuauth
- Owner: cedoor
- License: gpl-3.0
- Created: 2023-10-31T17:22:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-28T09:30:24.000Z (11 months ago)
- Last Synced: 2024-02-28T10:37:49.734Z (11 months ago)
- Topics: authentication, pcd, zuauth, zupass, zuzalu
- Language: TypeScript
- Homepage: https://zuauth.vercel.app
- Size: 1.27 MB
- Stars: 13
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Zuauth
A simple package designed to streamline the development of a zero-knowledge authentication system with Zupass tickets.
| The repository includes the `zuauth` package along with a documented [example](https://github.com/cedoor/zuauth/blob/main/example/README.md) demonstrating how to create an authentication system using NextJS and IronSession. Use the [demo](https://zuauth.vercel.app/) and refer to the [tutorial](/#-tutorial) section below to understand how to integrate `zuauth` into your app. |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |## 🛠Install
Install the `zuauth` package with npm:
```bash
npm i zuauth
```or yarn:
```bash
yarn add zuauth
```## 📜 Tutorial
> [!NOTE]
> The [example](https://github.com/cedoor/zuauth/blob/main/example/README.md) in the repository uses [`iron-session`](https://github.com/vvo/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](example/src/pages/api/login.ts), [logout](example/src/pages/api/logout.ts), [nonce](example/src/pages/api/nonce.ts), and [user](example/src/pages/api/user.ts). 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
2. 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
3. Check if the user is logged-in.
https://github.com/cedoor/zuauth/blob/c7c052a0a0b27cee9c3be7bae5dea634d7fc6954/example/src/pages/index.tsx#L26-L45
4. 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
5. 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.6. Create a function to allow users to log out:
https://github.com/cedoor/zuauth/blob/c7c052a0a0b27cee9c3be7bae5dea634d7fc6954/example/src/pages/index.tsx#L72-L82
7. Create your UI:
https://github.com/cedoor/zuauth/blob/c7c052a0a0b27cee9c3be7bae5dea634d7fc6954/example/src/pages/index.tsx#L161-L194