Zitadel Authentication Example

This example demonstrates how to implement authentication and authorization using Zitadel. It covers the flow of signing in a user via frontend redirection and authorizing that user through secure backend API calls to Zitadel.

• The frontend is registered as a User Agent in the Zitadel console.

• The backend is registered as a standard API resource.

• When a user signs in via the frontend, they are redirected to Zitadel for authentication.

• After successful login, the frontend obtains an access token, which is used to interact with the backend API.

• The backend validates the access token and checks the user’s roles (e.g., admin) to determine permissions.

• Authenticated users can view a to-do list.

• Users with the admin role can add new items to the list.

Setup

Zitadel

1. Start Zitadel: docker/podman compose up -d
2. Login Zitadel http://localhost:8080/ui/console, with Email: zitadel-admin@zitadel.localhost Password: Password1!
3. Create a new instance via the UI
4. Create a two applications
   • A react app of type User Agent, copy the user id into the react apps config.
   • A api-app(OCID standard) and create a key and download it, place it in the backend directory and call it key.json
5. Start the backend make start-backend (or go run .)
6. Start the frontend make start-frontend (or npm run dev)
7. Visit localhost:5173 and Log in with the existing user.
8. If you want to create a task with the user, create a admin role in the zitadel UI and assign it to your user.