| 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

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

3. 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

4. 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.

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

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

6. Create your UI:

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