cleanup, naming, release workflow

.github/workflows/release.yml

@@ -0,0 +1,26 @@
+name: Release @zitadel/react package
+on:
+  push:
+    branches:
+      - "main"
+
+jobs:
+  release:
+    name: build and release
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - run: yarn
+        working-directory: ./lib
+      - run: yarn build
+        working-directory: ./lib
+      - name: semantic release
+        uses: cycjimmy/semantic-release-action@v3
+        with:
+          working_directory: ./lib
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

lib/dist/index.d.ts

@@ -1 +1 @@
-export { createZITADELAuth, ZitadelConfig } from "./zitadelAuth";
+export { createZitadelAuth, ZitadelConfig } from "./zitadelAuth";

lib/dist/index.js

@@ -1 +1 @@
-export { createZITADELAuth } from "./zitadelAuth";
+export { createZitadelAuth } from "./zitadelAuth";

lib/dist/zitadelAuth.d.ts

@@ -2,12 +2,15 @@ import { UserManager } from "oidc-client-ts";
 export interface ZitadelConfig {
     client_id: string;
     issuer: string;
+    redirect_uri?: string;
+    post_logout_redirect_uri?: string;
+    scope?: string;
     project_resource_id?: string;
 }
 interface ZitadelAuth {
     authorize(): Promise<void>;
-    clearAuth(): Promise<void>;
+    signout(): Promise<void>;
     userManager: UserManager;
 }
-export declare function createZITADELAuth(zitadelConfig: ZitadelConfig): ZitadelAuth;
+export declare function createZitadelAuth(zitadelConfig: ZitadelConfig): ZitadelAuth;
 export {};

lib/dist/zitadelAuth.js

@@ -1,18 +1,16 @@
 import { UserManager, WebStorageStateStore, } from "oidc-client-ts";
-export function createZITADELAuth(zitadelConfig) {
+export function createZitadelAuth(zitadelConfig) {
+    var _a, _b, _c;
     const authConfig = {
-        authority: `${zitadelConfig.issuer}`, //Replace with your issuer URL
-        client_id: `${zitadelConfig.client_id}`, //Replace with your client id
-        redirect_uri: "http://localhost:3000/callback",
+        authority: `${zitadelConfig.issuer}`,
+        client_id: `${zitadelConfig.client_id}`,
+        redirect_uri: `${(_a = zitadelConfig.redirect_uri) !== null && _a !== void 0 ? _a : "http://localhost:3000/callback"}`,
         response_type: "code",
-        scope: `openid profile email ${zitadelConfig.project_resource_id
+        scope: (_b = zitadelConfig.scope) !== null && _b !== void 0 ? _b : `openid profile email ${zitadelConfig.project_resource_id
             ? `urn:zitadel:iam:org:project:id:${zitadelConfig.project_resource_id}:aud urn:zitadel:iam:org:projects:roles`
             : ""}`,
-        post_logout_redirect_uri: "http://localhost:3000/",
-        //   userinfo_endpoint:
-        //     "https://instance-some_text.zitadel.cloud/oidc/v1/userinfo",
+        post_logout_redirect_uri: `${(_c = zitadelConfig.post_logout_redirect_uri) !== null && _c !== void 0 ? _c : "http://localhost:3000/"}`,
         response_mode: "query",
-        //   code_challenge_method: "S256",
     };
     const userManager = new UserManager({
         userStore: new WebStorageStateStore({ store: window.localStorage }),
@@ -21,12 +19,12 @@ export function createZITADELAuth(zitadelConfig) {
     const authorize = () => {
         return userManager.signinRedirect();
     };
-    const clearAuth = () => {
+    const signout = () => {
         return userManager.signoutRedirect();
     };
     const oidc = {
         authorize,
-        clearAuth,
+        signout,
         userManager,
     };
     return oidc;

lib/src/index.ts

@@ -1 +1 @@
-export { createZITADELAuth, ZitadelConfig } from "./zitadelAuth";
+export { createZitadelAuth, ZitadelConfig } from "./zitadelAuth";

lib/src/zitadelAuth.ts

@@ -8,31 +8,37 @@ import {
 export interface ZitadelConfig {
   client_id: string;
   issuer: string;
+  redirect_uri?: string;
+  post_logout_redirect_uri?: string;
+  scope?: string;
   project_resource_id?: string;
 }
 
 interface ZitadelAuth {
   authorize(): Promise<void>;
-  clearAuth(): Promise<void>;
+  signout(): Promise<void>;
   userManager: UserManager;
 }
 
-export function createZITADELAuth(zitadelConfig: ZitadelConfig): ZitadelAuth {
+export function createZitadelAuth(zitadelConfig: ZitadelConfig): ZitadelAuth {
   const authConfig: UserManagerSettings = {
-    authority: `${zitadelConfig.issuer}`, //Replace with your issuer URL
-    client_id: `${zitadelConfig.client_id}`, //Replace with your client id
-    redirect_uri: "http://localhost:3000/callback",
+    authority: `${zitadelConfig.issuer}`,
+    client_id: `${zitadelConfig.client_id}`,
+    redirect_uri: `${
+      zitadelConfig.redirect_uri ?? "http://localhost:3000/callback"
+    }`,
     response_type: "code",
-    scope: `openid profile email ${
-      zitadelConfig.project_resource_id
-        ? `urn:zitadel:iam:org:project:id:${zitadelConfig.project_resource_id}:aud urn:zitadel:iam:org:projects:roles`
-        : ""
+    scope:
+      zitadelConfig.scope ??
+      `openid profile email ${
+        zitadelConfig.project_resource_id
+          ? `urn:zitadel:iam:org:project:id:${zitadelConfig.project_resource_id}:aud urn:zitadel:iam:org:projects:roles`
+          : ""
+      }`,
+    post_logout_redirect_uri: `${
+      zitadelConfig.post_logout_redirect_uri ?? "http://localhost:3000/"
     }`,
-    post_logout_redirect_uri: "http://localhost:3000/",
-    //   userinfo_endpoint:
-    //     "https://instance-some_text.zitadel.cloud/oidc/v1/userinfo",
     response_mode: "query",
-    //   code_challenge_method: "S256",
   };
 
   const userManager = new UserManager({
@@ -44,13 +50,13 @@ export function createZITADELAuth(zitadelConfig: ZitadelConfig): ZitadelAuth {
     return userManager.signinRedirect();
   };
 
-  const clearAuth = () => {
+  const signout = () => {
     return userManager.signoutRedirect();
   };
 
   const oidc = {
     authorize,
-    clearAuth,
+    signout,
     userManager,
   };
 

src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import logo from "./logo.svg";
 import "./App.css";
-import { createZITADELAuth, ZitadelConfig } from "@zitadel/react";
+import { createZitadelAuth, ZitadelConfig } from "@zitadel/react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 import Login from "./components/Login";
@@ -12,28 +12,29 @@ function App() {
     issuer: "",
     client_id: "",
   };
-  const oidc = createZITADELAuth(config);
+
+  const zitadel = createZitadelAuth(config);
 
   function login() {
-    oidc.authorize();
+    zitadel.authorize();
   }
 
   function signout() {
-    oidc.clearAuth();
+    zitadel.signout();
   }
 
   const [authenticated, setAuthenticated] = useState<boolean>(false);
   const [userInfo, setUserInfo] = useState(null);
 
   useEffect(() => {
-    oidc.userManager.getUser().then((user) => {
+    zitadel.userManager.getUser().then((user) => {
       if (user) {
         setAuthenticated(true);
       } else {
         setAuthenticated(false);
       }
     });
-  }, [oidc]);
+  }, [zitadel]);
 
   return (
     <div className="App">
@@ -59,7 +60,7 @@ function App() {
                   userInfo={userInfo}
                   setUserInfo={setUserInfo}
                   handleLogout={signout}
-                  userManager={oidc.userManager}
+                  userManager={zitadel.userManager}
                 />
               }
             />