tailwind package

packages/zitadel-client/package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "jose": "^4.13.1",
-    "nice-grpc": "2.0.1",
+    "nice-grpc-web": "^3.2.3",
     "protobufjs": "^7.2.3"
   }
 }

packages/zitadel-client/src/admin.ts

@@ -1,28 +0,0 @@
-import { CompatServiceDefinition } from "nice-grpc/lib/service-definitions";
-
-import { createChannel, createClientFactory } from "nice-grpc";
-import {
-  AuthServiceClient,
-  AuthServiceDefinition,
-} from "./proto/server/zitadel/auth";
-import {
-  AdminServiceClient,
-  AdminServiceDefinition,
-} from "./proto/server/zitadel/admin";
-import { authMiddleware } from "./middleware";
-
-const createClient = <Client>(
-  definition: CompatServiceDefinition,
-  accessToken: string
-) => {
-  const channel = createChannel(process.env.ZITADEL_API_URL ?? "");
-  return createClientFactory()
-    .use(authMiddleware(accessToken))
-    .create(definition, channel) as Client;
-};
-
-export const getAdmin = () =>
-  createClient<AdminServiceClient>(
-    AdminServiceDefinition as CompatServiceDefinition,
-    process.env.ZITADEL_ADMIN_TOKEN ?? ""
-  );

packages/zitadel-client/src/auth.ts

@@ -1,25 +1,19 @@
-import { CompatServiceDefinition } from "nice-grpc/lib/service-definitions";
-import { createChannel, createClientFactory } from "nice-grpc";
-import {
-  AuthServiceClient,
-  AuthServiceDefinition,
-} from "./proto/server/zitadel/auth";
 import { ZitadelApp } from "./app";
 import { authMiddleware } from "./middleware";
 
-const createClient = <Client>(
-  definition: CompatServiceDefinition,
-  accessToken: string
-) => {
-  const channel = createChannel(process.env.ZITADEL_API_URL ?? "");
-  return createClientFactory()
-    .use(authMiddleware(accessToken))
-    .create(definition, channel) as Client;
-};
+// const createClient = <Client>(
+//   definition: CompatServiceDefinition,
+//   accessToken: string
+// ) => {
+//   const channel = createChannel(process.env.ZITADEL_API_URL ?? "");
+//   return createClientFactory()
+//     .use(authMiddleware(accessToken))
+//     .create(definition, channel) as Client;
+// };
 
-export async function getAuth(app?: ZitadelApp): Promise<AuthServiceClient> {
-  return createClient<AuthServiceClient>(
-    AuthServiceDefinition as CompatServiceDefinition,
-    ""
-  );
+export async function getAuth(app?: ZitadelApp) {
+  //   return createClient<AuthServiceClient>(
+  //     AuthServiceDefinition as CompatServiceDefinition,
+  //     ""
+  //   );
 }

packages/zitadel-client/src/index.ts

@@ -1,8 +1,5 @@
 export { initializeApp, getApps } from "./app";
 
 export { getAuth } from "./auth";
-export { getManagement } from "./management";
-export { getAdmin } from "./admin";
-export { getSystem } from "./system";
 
 export type { ZitadelOptions } from "./app";

packages/zitadel-client/src/management.ts

@@ -1,45 +0,0 @@
-import { CompatServiceDefinition } from "nice-grpc/lib/service-definitions";
-
-import { createChannel, createClientFactory } from "nice-grpc";
-import {
-  ManagementServiceClient,
-  ManagementServiceDefinition,
-} from "./proto/server/zitadel/management";
-
-import { authMiddleware } from "./middleware";
-import { ZitadelApp, getApps } from "./app";
-
-const createClient = <Client>(
-  definition: CompatServiceDefinition,
-  apiUrl: string,
-  token: string
-) => {
-  if (!apiUrl) {
-    throw Error("ZITADEL_API_URL not set");
-  }
-
-  const channel = createChannel(process.env.ZITADEL_API_URL ?? "");
-  return createClientFactory()
-    .use(authMiddleware(token))
-    .create(definition, channel) as Client;
-};
-
-export const getManagement = (app?: string | ZitadelApp) => {
-  let config;
-  if (app && typeof app === "string") {
-    const apps = getApps();
-    config = apps.find((a) => a.name === app)?.config;
-  } else if (app && typeof app === "object") {
-    config = app.config;
-  }
-
-  if (!config) {
-    throw Error("No ZITADEL app found");
-  }
-
-  return createClient<ManagementServiceClient>(
-    ManagementServiceDefinition as CompatServiceDefinition,
-    config.apiUrl,
-    config.token
-  );
-};

packages/zitadel-client/src/middleware.ts

@@ -1,4 +1,4 @@
-import { CallOptions, ClientMiddlewareCall, Metadata } from "nice-grpc";
+import { CallOptions, ClientMiddlewareCall, Metadata } from "nice-grpc-web";
 
 export const authMiddleware = (token: string) =>
   async function* <Request, Response>(

packages/zitadel-client/src/system.ts

@@ -1,35 +0,0 @@
-import { CompatServiceDefinition } from "nice-grpc/lib/service-definitions";
-import { importPKCS8, SignJWT } from "jose";
-
-import { createChannel, createClientFactory } from "nice-grpc";
-import {
-  SystemServiceClient,
-  SystemServiceDefinition,
-} from "./proto/server/zitadel/system";
-import { authMiddleware } from "./middleware";
-
-const createSystemClient = <Client>(
-  definition: CompatServiceDefinition,
-  accessToken: string
-) => {
-  const channel = createChannel(process.env.ZITADEL_SYSTEM_API_URL ?? "");
-  return createClientFactory()
-    .use(authMiddleware(accessToken))
-    .create(definition, channel) as Client;
-};
-
-export const getSystem = async () => {
-  const token = await new SignJWT({})
-    .setProtectedHeader({ alg: "RS256" })
-    .setIssuedAt()
-    .setExpirationTime("1h")
-    .setIssuer(process.env.ZITADEL_SYSTEM_API_USERID ?? "")
-    .setSubject(process.env.ZITADEL_SYSTEM_API_USERID ?? "")
-    .setAudience(process.env.ZITADEL_ISSUER ?? "")
-    .sign(await importPKCS8(process.env.ZITADEL_SYSTEM_API_KEY ?? "", "RS256"));
-
-  return createSystemClient<SystemServiceClient>(
-    SystemServiceDefinition as CompatServiceDefinition,
-    token
-  );
-};

packages/zitadel-react/package.json

@@ -1,31 +1,38 @@
 {
   "name": "@zitadel/react",
   "version": "0.0.0",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "sideEffects": false,
-  "license": "MIT",
-  "files": [
-    "dist/**"
+  "sideEffects": [
+    "**/*.css"
   ],
+  "license": "MIT",
+  "exports": {
+    ".": "./dist",
+    "./styles.css": "./dist/index.css",
+    "./assets/*": "./dist/assets/*"
+  },
   "scripts": {
-    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
-    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "lint": "eslint \"src/**/*.ts*\"",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
+    "@types/react": "^17.0.13",
+    "@types/react-dom": "^17.0.8",
     "@zitadel/tsconfig": "workspace:*",
     "eslint": "^7.32.0",
     "eslint-config-zitadel": "workspace:*",
-    "@types/react": "^17.0.13",
-    "@types/react-dom": "^17.0.8",
-    "react": "^17.0.2",
+    "postcss": "8.4.21",
+    "sass": "^1.62.0",
+    "tailwindcss": "3.2.4",
     "tsup": "^5.10.1",
     "typescript": "^4.5.3"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "peerDependencies": {
+    "react": "18.2.0"
   }
 }

packages/zitadel-react/postcss.config.js

@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/zitadel-react/src/components/SignInWithGoogle.tsx

@@ -6,15 +6,15 @@ export interface SignInWithGoogleProps {
 
 export function SignInWithGoogle(props: SignInWithGoogleProps) {
   return (
-    <div className="flex flex-row items-center bg-white text-gray-500 dark:bg-transparent dark:text-white rounded-md p-4 text-sm">
+    <div className="ui-flex ui-flex-row ui-items-center ui-bg-white ui-text-black dark:ui-bg-transparent dark:ui-text-white rounded-md p-4 text-sm">
       <img
         className="h-8 w-8"
-        src="idp/google.png"
+        src="./assets/google.png"
         alt="google"
         height={24}
         width={24}
       />
-      Sign in with Google
+      <span className="ui-ml-4">Sign in with Google</span>
     </div>
   );
 }

packages/zitadel-react/src/index.tsx

@@ -1,5 +1,6 @@
-import * as React from "react";
+import "./styles.css";
+
 export {
   SignInWithGoogle,
   type SignInWithGoogleProps,
-} from "./SignInWithGoogle";
+} from "./components/SignInWithGoogle";

packages/zitadel-react/src/styles.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.hello {
+  color: yellow;
+}

packages/zitadel-react/tailwind.config.js

@@ -0,0 +1,17 @@
+const colors = require("tailwindcss/colors");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  prefix: "ui-",
+  darkMode: "class",
+  content: [`src/**/*.{js,ts,jsx,tsx}`],
+  theme: {
+    extend: {
+      colors: {
+        brandblue: colors.blue[500],
+        brandred: colors.red[500],
+      },
+    },
+  },
+  plugins: [],
+};

packages/zitadel-react/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  treeshake: true,
+  splitting: true,
+  entry: ["src/**/*.tsx"],
+  format: ["esm"],
+  dts: true,
+  minify: true,
+  clean: true,
+  external: ["react"],
+  ...options,
+}));

packages/zitadel-server/package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "jose": "^4.13.1",
+    "long": "^5.2.1",
     "nice-grpc": "2.0.1",
     "protobufjs": "^7.2.3"
   }

packages/zitadel-server/src/app.ts

@@ -1,13 +1,6 @@
-/**
- * Return a slugified copy of a string.
- *
- * @param {CoreProps} str The ZITADEL client configuration
- * @return {Core} The client implementation.
- */
-
 let apps: ZitadelApp[] = [];
 
-export interface ZitadelCoreProps {
+export interface ZitadelClientProps {
   clientId: string;
   apiUrl: string; // process.env.ZITADEL_API_URL
   token: string;
@@ -15,17 +8,17 @@ export interface ZitadelCoreProps {
   managementToken?: string;
 }
 
-export interface ZitadelOptions extends ZitadelCoreProps {
+export interface ZitadelOptions extends ZitadelClientProps {
   name?: string;
 }
 
 export interface ZitadelApp {
   name: string | undefined;
-  config: ZitadelCoreProps;
+  config: ZitadelClientProps;
 }
 
 export async function initializeApp(
-  config: ZitadelCoreProps,
+  config: ZitadelClientProps,
   name?: string
 ): Promise<ZitadelApp> {
   const app = { config, name };