@contember/react-identity 1.3.0-alpha.14

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@contember/react-identity",
+  "license": "Apache-2.0",
+  "version": "1.3.0-alpha.14",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/production/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "development": "./dist/development/index.js",
+        "production": "./dist/production/index.js",
+        "default": "./dist/production/index.js"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "development": "./dist/development/index.cjs",
+        "production": "./dist/production/index.cjs",
+        "default": "./dist/production/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "typings": "./dist/types/index.d.ts",
+  "scripts": {
+    "build": "yarn build:js:dev && yarn build:js:prod",
+    "build:js:dev": "vite build --mode development",
+    "build:js:prod": "vite build --mode production",
+    "ae:build": "api-extractor run --local",
+    "ae:test": "api-extractor run",
+    "test": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contember/interface.git",
+    "directory": "packages/react-identity"
+  },
+  "dependencies": {
+    "@contember/react-binding": "1.3.0-alpha.14",
+    "@contember/react-client": "1.3.0-alpha.14",
+    "@contember/react-client-tenant": "1.3.0-alpha.14",
+    "@contember/react-utils": "1.3.0-alpha.14",
+    "@radix-ui/react-slot": "^1.0.2"
+  },
+  "peerDependencies": {
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "stableVersion": "0.0.0"
+}

package/src/components/HasRole.tsx

@@ -0,0 +1,33 @@
+import { Component } from '@contember/react-binding'
+import { ReactNode } from 'react'
+import { useProjectUserRoles } from '../hooks'
+import { identityEnvironmentExtension, projectEnvironmentExtension } from '../environment'
+
+export type RoleCondition = string | ((roles: Set<string>) => boolean)
+
+export interface HasRoleProps {
+	children?: ReactNode
+	role: RoleCondition
+}
+
+/**
+ * @group Logic Components
+ */
+export const HasRole = Component<HasRoleProps>(({ children, role }) => {
+	const projectRoles = useProjectUserRoles()
+
+	return evaluateCondition(role, projectRoles) ? <>{children}</> : null
+}, ({ children, role }, env) => {
+	const identity = env.getExtension(identityEnvironmentExtension).identity
+	const project = env.getExtension(projectEnvironmentExtension).slug
+	const projectRoles = new Set(identity?.projects.find(it => it.slug === project)?.roles ?? [])
+
+	return evaluateCondition(role, projectRoles) ? <>{children}</> : null
+})
+
+const evaluateCondition = (condition: RoleCondition, roles: Set<string>) => {
+	if (typeof condition === 'string') {
+		return roles.has(condition)
+	}
+	return condition(roles)
+}

package/src/components/IdentityProvider.tsx

@@ -0,0 +1,40 @@
+import { useSessionToken } from '@contember/react-client'
+import { ReactNode, useEffect } from 'react'
+import { EnvironmentExtensionProvider } from '@contember/react-binding'
+import { useFetchIdentity } from '../hooks'
+import { IdentityContext, IdentityMethodsContext, IdentityStateContext } from '../internal/contexts'
+import { identityEnvironmentExtension } from '../environment/IdentityEnvironmentExtension'
+
+
+export interface IdentityProviderProps {
+	children: ReactNode
+}
+
+export const IdentityProvider: React.FC<IdentityProviderProps> = ({ children }) => {
+	const sessionToken = useSessionToken()
+	const [{ identity, state }, methods] = useFetchIdentity()
+
+	const { refreshIdentity, clearIdentity } = methods
+	useEffect(
+		() => {
+			if (sessionToken !== undefined) {
+				refreshIdentity()
+			} else {
+				clearIdentity()
+			}
+		},
+		[sessionToken, refreshIdentity, clearIdentity],
+	)
+
+	return (
+		<IdentityStateContext.Provider value={state}>
+			<IdentityContext.Provider value={identity}>
+				<IdentityMethodsContext.Provider value={methods}>
+					<EnvironmentExtensionProvider extension={identityEnvironmentExtension} state={identity ?? null}>
+						{children}
+					</EnvironmentExtensionProvider>
+				</IdentityMethodsContext.Provider>
+			</IdentityContext.Provider>
+		</IdentityStateContext.Provider>
+	)
+}

package/src/components/IdentityState.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react'
+import { IdentityStateValue } from '../types'
+import { useIdentityState } from '../internal/contexts'
+
+export interface IdentityStateProps {
+	state: IdentityStateValue | IdentityStateValue[]
+	children: ReactNode
+}
+
+export const IdentityState = ({ state, children }: IdentityStateProps) => {
+	const currentState = useIdentityState()
+
+	return state === currentState || (Array.isArray(state) && state.includes(currentState)) ? children : null
+}

package/src/components/LogoutTrigger.tsx

@@ -0,0 +1,10 @@
+import { ReactNode, useCallback } from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { useLogout } from '../hooks'
+
+export const LogoutTrigger = ({ children }: {
+	children: ReactNode
+}) => {
+	const logout = useLogout()
+	return <Slot onClick={useCallback(() => logout(), [logout])}>{children}</Slot>
+}

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './HasRole'
+export * from './IdentityProvider'
+export * from './IdentityState'
+export * from './LogoutTrigger'

package/src/environment/IdentityEnvironmentExtension.ts

@@ -0,0 +1,12 @@
+import { BindingError, Environment } from '@contember/react-binding'
+import { Identity } from '../types'
+
+export const identityEnvironmentExtension = Environment.createExtension((state: Identity | null | undefined) => {
+	if (state === undefined) {
+		throw new BindingError('Environment does not contain identity state.')
+	}
+
+	return {
+		identity: state ?? undefined,
+	}
+})

package/src/environment/ProjectEnvironmentExtension.tsx

@@ -0,0 +1,10 @@
+import { BindingError, Environment } from '@contember/react-binding'
+
+export const projectEnvironmentExtension = Environment.createExtension((slug: string | null | undefined) => {
+	if (slug === undefined) {
+		throw new BindingError('Environment does not contain project slug state.')
+	}
+	return {
+		slug: slug ?? undefined,
+	}
+})

package/src/environment/index.ts

@@ -0,0 +1,2 @@
+export * from './IdentityEnvironmentExtension'
+export * from './ProjectEnvironmentExtension'

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from './useLogout'
+export * from './useFetchIdentity'
+export * from './useProjectUserRoles'
+export {
+	useIdentityMethods,
+	useIdentity,
+	useIdentityState,
+} from '../internal/contexts'

package/src/hooks/useFetchIdentity.ts

@@ -0,0 +1,54 @@
+import { useCallback, useMemo, useState } from 'react'
+import { Identity, IdentityMethods, IdentityStateValue } from '../types'
+import { useSessionToken } from '@contember/react-client'
+import { useFetchMe } from '../internal/hooks/useFetchMe'
+import { useLogoutInternal } from '../internal/hooks/useLogoutInternal'
+
+export const useFetchIdentity = (): [{ state: IdentityStateValue, identity: Identity | undefined }, IdentityMethods] => {
+	const sessionToken = useSessionToken()
+	const fetchMe = useFetchMe()
+
+	const [identityState, setIdentityState] = useState<IdentityStateValue>(sessionToken ? 'loading' : 'none')
+	const [identity, setIdentity] = useState<Identity | undefined>()
+
+	const clearIdentity = useCallback(() => setIdentityState('cleared'), [])
+	const logout = useLogoutInternal(clearIdentity)
+
+	const fetch = useCallback(async () => {
+		setIdentityState('loading')
+		try {
+			const response = await fetchMe()
+			const person = response.person
+			const projects = response.projects
+			const permissions = response.permissions ?? { canCreateProject: false }
+
+			setIdentityState('success')
+			setIdentity({
+				id: response.id,
+				person: person ?? undefined,
+				projects: projects.map(it => ({
+					name: it.project.name,
+					slug: it.project.slug,
+					roles: it.memberships.map(it => it.role),
+				})),
+				permissions,
+			})
+		} catch (e) {
+			console.error(e)
+			if (typeof e === 'object' && e !== null && 'status' in e && (e as { status?: unknown }).status === 401) {
+				logout({ noRedirect: true })
+				setIdentityState('cleared')
+			} else {
+				setIdentityState('failed')
+			}
+		}
+	}, [fetchMe, logout])
+
+	return [
+		{ state: identityState, identity },
+		useMemo((): IdentityMethods => ({
+			clearIdentity,
+			refreshIdentity: fetch,
+		}), [clearIdentity, fetch]),
+	]
+}

package/src/hooks/useLogout.ts

@@ -0,0 +1,7 @@
+import { useIdentityMethods } from '../internal/contexts'
+import { useLogoutInternal } from '../internal/hooks/useLogoutInternal'
+
+export const useLogout = () => {
+	const { clearIdentity } = useIdentityMethods()
+	return useLogoutInternal(clearIdentity)
+}

package/src/hooks/useProjectUserRoles.tsx

@@ -0,0 +1,21 @@
+import { useMemo } from 'react'
+import { useProjectSlug } from '@contember/react-client'
+import { useIdentity } from '../internal/contexts'
+
+export type ProjectUserRoles = Set<string>
+
+export const useProjectUserRoles = (): ProjectUserRoles => {
+	const identity = useIdentity()
+	const projectSlug = useProjectSlug()
+	return useMemo(() => {
+		if (!projectSlug) {
+			return new Set()
+		}
+		const targetProject = identity?.projects.find(project => project.slug === projectSlug)
+		if (targetProject === undefined) {
+			return new Set()
+		}
+
+		return new Set(targetProject.roles)
+	}, [identity?.projects, projectSlug])
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './types'
+export * from './components'
+export * from './hooks'
+export * from './environment'

package/src/internal/contexts.ts

@@ -0,0 +1,8 @@
+import { createContext, createRequiredContext } from '@contember/react-utils'
+import { IdentityMethods } from '../types/IdentityMethods'
+import { Identity } from '../types/Identity'
+import { IdentityStateValue } from '../types/IdentityStateValue'
+
+export const [IdentityContext, useIdentity] = createContext<Identity | undefined>('IdentityContext', undefined)
+export const [IdentityMethodsContext, useIdentityMethods] = createRequiredContext<IdentityMethods>('IdentityMethodsContext')
+export const [IdentityStateContext, useIdentityState] = createRequiredContext<IdentityStateValue>('IdentityStateContext')

package/src/internal/hooks/useFetchMe.ts

@@ -0,0 +1,21 @@
+import * as TenantApi from '@contember/react-client-tenant'
+import { useCallback } from 'react'
+
+const identityFragment = TenantApi
+	.identity$$
+	.person(TenantApi.person$$)
+	.projects(TenantApi
+		.identityProjectRelation$
+		.project(TenantApi.project$$)
+		.memberships(TenantApi.membership$$.variables(TenantApi.variableEntry$$)),
+	)
+	.permissions(TenantApi.identityGlobalPermissions$$)
+
+export type FetchedIdentity = TenantApi.ModelType<typeof identityFragment>
+
+export const useFetchMe = () => {
+	const executor = TenantApi.useTenantApi()
+	return useCallback(async () => {
+		return (await executor(TenantApi.query$.me(identityFragment))).me
+	}, [executor])
+}

package/src/internal/hooks/useLogoutInternal.ts

@@ -0,0 +1,35 @@
+import { useSetSessionToken } from '@contember/react-client'
+import { useCallback } from 'react'
+import { useSignOut } from './useSignOut'
+
+export const useLogoutInternal = (clearIdentity?: () => void) => {
+	const tenantLogout = useSignOut()
+	const setSessionToken = useSetSessionToken()
+
+	return useCallback(
+		async ({ noRedirect = false }: { noRedirect?: boolean } = {}) => {
+			if (navigator.credentials && navigator.credentials.preventSilentAccess) {
+				try {
+					await navigator.credentials.preventSilentAccess()
+				} catch {
+					// actually, not implemented in safari:
+					// https://github.com/WebKit/WebKit/blob/414f4e45b0e82bbfcee783d08a9642be1afa8f72/Source/WebCore/Modules/credentialmanagement/CredentialsContainer.cpp#L132
+				}
+			}
+			clearIdentity?.()
+			setSessionToken(undefined)
+			try {
+				const response = await tenantLogout()
+				if (!response?.ok) {
+					console.warn(response?.error)
+				}
+			} catch (e) {
+				console.warn(e)
+			}
+			if (!noRedirect) {
+				window.location.href = '/' // todo better redirect?
+			}
+		},
+		[clearIdentity, setSessionToken, tenantLogout],
+	)
+}

package/src/internal/hooks/useSignOut.ts

@@ -0,0 +1,13 @@
+import * as TenantApi from '@contember/react-client-tenant'
+import { useCallback } from 'react'
+
+const signOutFragment = TenantApi.signOutResponse$$.error(TenantApi.signOutError$$)
+
+export type SignOutResult = TenantApi.ModelType<typeof signOutFragment>
+
+export const useSignOut = () => {
+	const api = TenantApi.useTenantApi()
+	return useCallback(async () => {
+		return (await api(TenantApi.mutation$.signOut(signOutFragment))).signOut
+	}, [api])
+}

package/src/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"extends": "../../../tsconfig.settings.json",
+	"compilerOptions": {
+		"outDir": "../dist/types"
+	},
+	"references": [
+		{ "path": "../../react-binding/src" },
+		{ "path": "../../react-client/src" },
+		{ "path": "../../react-client-tenant/src" },
+		{ "path": "../../react-utils/src" },
+	]
+}

package/src/types/Identity.ts

@@ -0,0 +1,20 @@
+export interface Identity {
+	readonly id: string
+	readonly person?: Person
+	readonly projects: IdentityProject[]
+	readonly permissions: {
+		readonly canCreateProject: boolean
+	}
+}
+
+export interface Person {
+	readonly id: string
+	readonly email?: string
+	readonly otpEnabled: boolean
+}
+
+export interface IdentityProject {
+	readonly slug: string
+	readonly name: string
+	readonly roles: readonly string[]
+}

package/src/types/IdentityMethods.ts

@@ -0,0 +1,4 @@
+export interface IdentityMethods {
+	clearIdentity: () => void
+	refreshIdentity: () => Promise<void>
+}

package/src/types/IdentityStateValue.ts

@@ -0,0 +1,6 @@
+export type IdentityStateValue =
+	| 'none'
+	| 'loading'
+	| 'failed'
+	| 'cleared'
+	| 'success'

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './IdentityMethods'
+export * from './IdentityStateValue'
+export * from './Identity'