This example features an optional developer-friendly mode to choose an arbitrary subset (from none to all) of ticket fields to reveal during authentication with zuauth. With the developer mode disabled, only the predefined set of ticket fields (refer to the Step 2 below) will be displayed on the page. The main page component has multiple straightforward and tailored elements (e.g. Toggle) to ensure easy reading and customization. You can refer to an implementation of iron-session for session management and usage of local storage to ensure consistency during page refreshes.

sequenceDiagram
    Zuauth-client->>Zuauth-server: getNonce()
    Zuauth-server->>Zuauth-client: return <<nonce>>
    Zuauth-client->>Zupass: requestPCD()
    Zupass->>Zuauth-client: return <<ZKTicketPCD>>
    Zuauth-client->>Zuauth-server: login()
    Zuauth-server->>Zuauth-client: return <<cookie>>

🛠 Install

Clone this repository:

git clone https://github.com/cedoor/zuauth.git

Navigate to the example/ folder and install the dependencies:

cd zuauth/example && yarn # or npm i

📜 Usage

Copy the .env file as .env.local:

cp .env .env.local

And add your environment variables.