ZITADEL Authentication for Astro Projects

zitadel-astro-authentication is an Astro NPM plugin that provides seamless user authentication using ZITADEL in Astro projects. This plugin simplifies the integration of ZITADEL's authentication services, allowing developers to quickly implement login and logout functionality.

Installation

Install the plugin using npm:

npm i zitadel-astro-authentication

Usage

To use the plugin, import the Authentication component in your code:

import { Authentication } from "zitadel-astro-authentication";

Login

To enable user login, use the Authentication component with the operation="login" prop:

<Authentication
  clientId="******" 
  authority="***" 
  redirectUri="http://url" 
  postLogoutRedirectUri="http://url/post" 
  organizationId="***" 
  projectId="***" 
  operation="login"
/>

Logout

To log users out, use the Authentication component with the operation="logout" prop:

<Authentication
  clientId="******" 
  authority="***" 
  redirectUri="http://url" 
  postLogoutRedirectUri="http://url/post" 
  organizationId="***" 
  projectId="***" 
  operation="logout"
/>

Props Description

• clientId: Your ZITADEL application's client ID.
• authority: The ZITADEL authority URL for your application.
• redirectUri: URL to redirect users after a successful login.
• postLogoutRedirectUri: URL to redirect users after logging out.
• organizationId: The ZITADEL organization ID.
• projectId: The ZITADEL project ID.
• operation: Specifies the action, either "login" or "logout".

Example Setup

1. Configure your ZITADEL application to generate the required clientId, organizationId, and projectId.
2. Replace placeholder values in the component props with your application's configuration details.
3. Include the Authentication component in your Astro project's pages where authentication is required.

Support

For more details on ZITADEL, visit ZITADEL Documentation.
For plugin-specific issues, create a GitHub issue in the repository (link coming soon).