@contember/react-client-tenant 2.0.0-alpha.13 → 2.0.0-alpha.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-client-tenant",
   "license": "Apache-2.0",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.15",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -33,9 +33,9 @@
     "directory": "packages/react-client-tenant"
   },
   "dependencies": {
-    "@contember/graphql-client-tenant": "2.0.0-alpha.13",
-    "@contember/react-client": "2.0.0-alpha.13",
-    "@contember/react-utils": "2.0.0-alpha.13",
+    "@contember/graphql-client-tenant": "2.0.0-alpha.15",
+    "@contember/react-client": "2.0.0-alpha.15",
+    "@contember/react-utils": "2.0.0-alpha.15",
     "@radix-ui/primitive": "^1.0.1",
     "@radix-ui/react-slot": "^1.0.2",
     "graphql-ts-client-api": "^3.1.17"

package/src/components/forms/LoginForm.tsx

@@ -41,7 +41,7 @@ const headers = {
 	'X-Contember-Token-Path': 'data.mutation.result.token',
 }
 
-const DEFAULT_LOGIN_EXPIRATION = 14 * 24 * 3600 // 14 days
+const DEFAULT_LOGIN_EXPIRATION = 14 * 24 * 60 // 14 days
 
 export const LoginForm = ({ children, expiration = DEFAULT_LOGIN_EXPIRATION, onSuccess }: LoginFormProps) => {
 	const login = useSignInMutation({ headers })

package/src/components/forms/PasswordResetForm.tsx

@@ -77,4 +77,5 @@ const errorToField: Record<TenantApi.ResetPasswordErrorCode, keyof PasswordReset
 	TOKEN_EXPIRED: 'token',
 	TOKEN_NOT_FOUND: 'token',
 	TOKEN_USED: 'token',
+	TOKEN_INVALID: 'token',
 }

package/src/components/forms/PasswordlessSignInForm.tsx

@@ -0,0 +1,102 @@
+import { ReactElement, useCallback, useMemo } from 'react'
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { TenantForm } from './TenantForm'
+import { FormContextValue, FormError, FormState } from '../../types/forms'
+import { useForm } from '../../contexts'
+import { SignInPasswordlessMutationResult, useSignInPasswordlessMutation } from '../../hooks'
+import { useRedirectToBacklinkCallback } from '../../internal/hooks/useRedirectToBacklink'
+import { useSetSessionToken } from '@contember/react-client'
+
+export type PasswordlessSignInFormValues = {
+	token: string
+	otpToken: string
+}
+
+export type PasswordlessSignInFormErrorCode =
+	| TenantApi.SignInPasswordlessErrorCode
+	| 'FIELD_REQUIRED'
+	| 'INVALID_VALUE'
+	| 'UNKNOWN_ERROR'
+
+export type PasswordlessSignInFormState =
+	| FormState
+	| 'otp-required'
+
+export type PasswordlessSignInFormError = FormError<PasswordlessSignInFormValues, PasswordlessSignInFormErrorCode>
+
+export type PasswordlessSignInFormContextValue = FormContextValue<PasswordlessSignInFormValues, PasswordlessSignInFormErrorCode, PasswordlessSignInFormState>
+
+
+export interface PasswordlessSignInFormProps {
+	requestId: string
+	validationType: TenantApi.PasswordlessValidationType
+	token?: string
+	expiration?: number
+	children: ReactElement
+	onSuccess?: () => void
+}
+
+export const usePasswordlessSignInForm = useForm as () => PasswordlessSignInFormContextValue
+
+const headers = {
+	'X-Contember-Token-Path': 'data.mutation.result.token',
+}
+const DEFAULT_LOGIN_EXPIRATION = 14 * 24 * 60 // 14 days
+
+export const PasswordlessSignInForm = ({ children, onSuccess, requestId, validationType, token, expiration = DEFAULT_LOGIN_EXPIRATION }: PasswordlessSignInFormProps) => {
+
+	const signIn = useSignInPasswordlessMutation({ headers })
+	const redirectToBacklink = useRedirectToBacklinkCallback()
+	const setSessionToken = useSetSessionToken()
+	return (
+		<TenantForm<PasswordlessSignInFormContextValue, SignInPasswordlessMutationResult>
+			onSuccess={args => {
+				onSuccess?.()
+				setSessionToken(args.result.token)
+				redirectToBacklink()
+			}}
+			errorMapping={errorToField}
+			initialValues={useMemo(() => ({
+				token: token ?? '',
+				otpToken: '',
+			}), [token])}
+			validate={({ values, state }) => {
+				if (!values.token) {
+					return [{ code: 'FIELD_REQUIRED', field: 'token' }]
+				}
+				if (!values.otpToken && state === 'otp-required') {
+					return [{ code: 'FIELD_REQUIRED', field: 'otpToken' }]
+				} else if (values.otpToken && !values.otpToken.match(/^\d{6}$/)) {
+					return [{ code: 'INVALID_VALUE', field: 'otpToken' }]
+				}
+				return []
+			}}
+			execute={useCallback(async ({ values }) => {
+				const result = await signIn({
+					requestId,
+					expiration,
+					token: values.token,
+					mfaOtp: values.otpToken || undefined,
+					validationType,
+				})
+				if (!result.ok && result.error === 'OTP_REQUIRED') {
+					return { ...result, state: 'otp-required' }
+				}
+
+				return result
+			}, [expiration, requestId, signIn, validationType])}
+		>
+			{children}
+		</TenantForm>
+	)
+
+}
+const errorToField: Record<TenantApi.SignInPasswordlessErrorCode, keyof PasswordlessSignInFormValues | undefined> = {
+	PERSON_DISABLED: undefined,
+	TOKEN_EXPIRED: 'token',
+	TOKEN_NOT_FOUND: 'token',
+	TOKEN_USED: 'token',
+	TOKEN_INVALID: 'token',
+	INVALID_OTP_TOKEN: 'otpToken',
+	OTP_REQUIRED: undefined,
+}

package/src/components/forms/PasswordlessSignInInitForm.tsx

@@ -0,0 +1,68 @@
+import { ReactElement, useCallback, useMemo } from 'react'
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { TenantForm } from './TenantForm'
+import { FormContextValue, FormError, FormState } from '../../types/forms'
+import { useForm } from '../../contexts'
+import { InitSignInPasswordlessMutationResult, useInitSignInPasswordlessMutation } from '../../hooks'
+import { PASSWORDLESS_REQUEST_STORAGE_KEY } from '../../consts'
+
+export type PasswordlessSignInInitFormValues = {
+	email: string
+}
+
+export type PasswordlessSignInInitFormErrorCode =
+	| TenantApi.InitSignInPasswordlessErrorCode
+	| 'FIELD_REQUIRED'
+	| 'INVALID_VALUE'
+	| 'UNKNOWN_ERROR'
+
+export type PasswordlessSignInInitFormState = FormState
+
+export type PasswordlessSignInInitFormError = FormError<PasswordlessSignInInitFormValues, PasswordlessSignInInitFormErrorCode>
+
+export type PasswordlessSignInInitFormContextValue = FormContextValue<PasswordlessSignInInitFormValues, PasswordlessSignInInitFormErrorCode>
+
+
+export interface PasswordlessSignInInitFormProps {
+	children: ReactElement
+	onSuccess?: (args: { result: InitSignInPasswordlessMutationResult }) => void
+}
+
+export const usePasswordlessSignInInitForm = useForm as () => PasswordlessSignInInitFormContextValue
+
+export const PasswordlessSignInInitForm = ({ children, onSuccess }: PasswordlessSignInInitFormProps) => {
+
+	const initSignIn = useInitSignInPasswordlessMutation()
+	return (
+		<TenantForm<PasswordlessSignInInitFormContextValue, InitSignInPasswordlessMutationResult>
+			onSuccess={res => {
+				localStorage.setItem(PASSWORDLESS_REQUEST_STORAGE_KEY, res.result.requestId)
+				onSuccess?.(res)
+			}}
+			errorMapping={errorToField}
+			initialValues={useMemo(() => ({
+				email: '',
+			}), [])}
+			validate={({ values }) => {
+				if (!values.email) {
+					return [{ code: 'FIELD_REQUIRED', field: 'email' }]
+				} else if (!values.email.match(/^.+@.+$/)) {
+					return [{ code: 'INVALID_VALUE', field: 'email' }]
+				}
+				return []
+			}}
+			execute={useCallback(async ({ values }) => {
+				return await initSignIn({
+					email: values.email,
+				})
+			}, [initSignIn])}
+		>
+			{children}
+		</TenantForm>
+	)
+
+}
+const errorToField: Record<TenantApi.InitSignInPasswordlessErrorCode, keyof PasswordlessSignInInitFormValues | undefined> = {
+	PERSON_NOT_FOUND: 'email',
+	PASSWORDLESS_DISABLED: undefined,
+}

package/src/components/forms/index.ts

@@ -5,6 +5,8 @@ export * from './InviteForm'
 export * from './LoginForm'
 export * from './PasswordResetForm'
 export * from './PasswordResetRequestForm'
+export * from './PasswordlessSignInForm'
+export * from './PasswordlessSignInInitForm'
 export * from './OtpPrepareForm'
 export * from './OtpConfirmForm'
 export * from './UpdateProjectMemberForm'

package/src/consts.ts

@@ -0,0 +1 @@
+export const PASSWORDLESS_REQUEST_STORAGE_KEY = 'passwordless_request'

package/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './useLogout'
 export * from './useTenantApi'
 export * from './useTenantQueryLoader'
 export * from './useTenantMutation'
+export * from './usePasswordlessOtpActivator'

package/src/hooks/mutations/index.ts

@@ -3,5 +3,6 @@ export * from './auth'
 export * from './invite'
 export * from './idp'
 export * from './memberships'
+export * from './passwordless'
 export * from './otp'
 export * from './passwordReset'

package/src/hooks/mutations/passwordless/index.ts

@@ -0,0 +1,5 @@
+export * from './useActivatePasswordlessOtpMutation'
+export * from './useDisableMyPasswordlessMutation'
+export * from './useEnableMyPasswordlessMutation'
+export * from './useSignInPasswordlessMutation'
+export * from './useInitSignInPasswordlessMutation'

package/src/hooks/mutations/passwordless/useActivatePasswordlessOtpMutation.ts

@@ -0,0 +1,19 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { LoginToken } from '../../useTenantApi'
+import { createTenantMutation } from '../../useTenantMutation'
+
+
+const ActivatePasswordlessOtpMutation = TenantApi
+	.mutation$
+	.activatePasswordlessOtp(
+		TenantApi
+			.activatePasswordlessOtpResponse$$
+			.error(TenantApi.activatePasswordlessOtpError$$),
+		options => options.alias('mutation'),
+	)
+
+export const useActivatePasswordlessOtpMutation = createTenantMutation(ActivatePasswordlessOtpMutation, {
+	apiToken: LoginToken,
+})
+
+export type ActivatePasswordlessOtpMutationVariables = Parameters<ReturnType<typeof useActivatePasswordlessOtpMutation>>[0]

package/src/hooks/mutations/passwordless/useDisableMyPasswordlessMutation.ts

@@ -0,0 +1,14 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { createTenantMutation } from '../../useTenantMutation'
+
+
+const DisableMyPasswordlessMutation = TenantApi
+	.mutation$
+	.disableMyPasswordless(
+		TenantApi
+			.toggleMyPasswordlessResponse$$
+			.error(TenantApi.toggleMyPasswordlessError$$),
+		options => options.alias('mutation'),
+	)
+
+export const useDisableMyPasswordlessMutation = createTenantMutation(DisableMyPasswordlessMutation)

package/src/hooks/mutations/passwordless/useEnableMyPasswordlessMutation.ts

@@ -0,0 +1,14 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { createTenantMutation } from '../../useTenantMutation'
+
+
+const EnableMyPasswordlessMutation = TenantApi
+	.mutation$
+	.enableMyPasswordless(
+		TenantApi
+			.toggleMyPasswordlessResponse$$
+			.error(TenantApi.toggleMyPasswordlessError$$),
+		options => options.alias('mutation'),
+	)
+
+export const useEnableMyPasswordlessMutation = createTenantMutation(EnableMyPasswordlessMutation)

package/src/hooks/mutations/passwordless/useInitSignInPasswordlessMutation.ts

@@ -0,0 +1,22 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { LoginToken } from '../../useTenantApi'
+import { createTenantMutation } from '../../useTenantMutation'
+import { ModelType } from 'graphql-ts-client-api'
+
+const InitSignInPasswordlessMutationResult = TenantApi.initSignInPasswordlessResult$$
+export type InitSignInPasswordlessMutationResult = ModelType<typeof InitSignInPasswordlessMutationResult>
+const InitSignInPasswordlessMutation = TenantApi
+	.mutation$
+	.initSignInPasswordless(
+		TenantApi
+			.initSignInPasswordlessResponse$$
+			.error(TenantApi.initSignInPasswordlessError$$)
+			.result(InitSignInPasswordlessMutationResult),
+		options => options.alias('mutation'),
+	)
+
+export const useInitSignInPasswordlessMutation = createTenantMutation(InitSignInPasswordlessMutation, {
+	apiToken: LoginToken,
+})
+
+export type InitSignInPasswordlessMutationVariables = Parameters<ReturnType<typeof useInitSignInPasswordlessMutation>>[0]

package/src/hooks/mutations/passwordless/useSignInPasswordlessMutation.ts

@@ -0,0 +1,24 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { LoginToken } from '../../useTenantApi'
+import { createTenantMutation } from '../../useTenantMutation'
+import { ModelType } from 'graphql-ts-client-api'
+
+const signInResultFragment = TenantApi.signInPasswordlessResult$$.person(TenantApi.person$$)
+
+export type SignInPasswordlessMutationResult = ModelType<typeof signInResultFragment>
+
+const SignInPasswordlessMutation = TenantApi
+	.mutation$
+	.signInPasswordless(
+		TenantApi
+			.signInPasswordlessResponse$$
+			.error(TenantApi.signInPasswordlessError$$)
+			.result(signInResultFragment),
+		options => options.alias('mutation'),
+	)
+
+export const useSignInPasswordlessMutation = createTenantMutation(SignInPasswordlessMutation, {
+	apiToken: LoginToken,
+})
+
+export type SignInPasswordlessMutationVariables = Parameters<ReturnType<typeof useSignInPasswordlessMutation>>[0]

package/src/hooks/usePasswordlessOtpActivator.ts

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react'
+import { PASSWORDLESS_REQUEST_STORAGE_KEY } from '../consts'
+import { useActivatePasswordlessOtpMutation } from './mutations'
+import { randomString } from '../internal/utils/randomInt'
+import { calculateHash } from '../internal/utils/hashing'
+import { ActivatePasswordlessOtpErrorCode } from '@contember/graphql-client-tenant'
+
+const usePasswordlessParams = (): {localStorageRequestId: string | null; urlRequestId: string | null; urlToken: string | null} => {
+	const localStorageValue = localStorage.getItem(PASSWORDLESS_REQUEST_STORAGE_KEY) ?? null
+	const urlParams = new URLSearchParams(window.location.search)
+	const requestId = urlParams.get('request_id')
+	const token = urlParams.get('token')
+
+	return { localStorageRequestId: localStorageValue, urlRequestId: requestId, urlToken: token }
+}
+
+export type PasswordlessResponseHandlerState =
+	| { type: 'empty' }
+	| { type: 'otp_activating' }
+	| { type: 'otp_activated'; otp: string }
+	| { type: 'otp_activation_failed'; error: ActivatePasswordlessOtpErrorCode | 'UNKNOWN_ERROR'}
+	| { type: 'can_proceed_to_login' }
+
+export const usePasswordlessOtpActivator = ({ otpLength = 6, otpChars = '0123456789ABCDEF' }: {
+	otpLength?: number
+	otpChars?: string
+} = {}) => {
+	const { localStorageRequestId, urlRequestId, urlToken } = usePasswordlessParams()
+	const activateOtp = useActivatePasswordlessOtpMutation()
+
+	const [state, setState] = useState<PasswordlessResponseHandlerState>(() => {
+		if (urlRequestId && urlToken) {
+			if (localStorageRequestId !== urlRequestId) {
+				return { type: 'otp_activating' }
+			} else {
+				return { type: 'can_proceed_to_login' }
+			}
+		}
+		return { type: 'empty' }
+	})
+
+	useEffect(() => {
+		(async () => {
+			if (state.type === 'otp_activating') {
+				const otpCode = randomString(otpLength, otpChars)
+				try {
+					const result = await activateOtp({
+						requestId: urlRequestId!,
+						token: urlToken!,
+						otpHash: await calculateHash('SHA-256', otpCode),
+					})
+					if (!result.ok) {
+						setState({ type: 'otp_activation_failed', error: result.error })
+					} else {
+						setState({ type: 'otp_activated', otp: otpCode })
+					}
+				} catch (e) {
+					console.error(e)
+					setState({ type: 'otp_activation_failed', error: 'UNKNOWN_ERROR' })
+				}
+			}
+		})()
+	}, [activateOtp, localStorageRequestId, otpChars, otpLength, state.type, urlRequestId, urlToken])
+
+	return state
+}

package/src/internal/hooks/useHandleIDPResponse.ts

@@ -18,7 +18,7 @@ const headers = {
 	'X-Contember-Token-Path': 'data.mutation.result.token',
 }
 
-const DEFAULT_LOGIN_EXPIRATION = 14 * 24 * 3600 // 14 days
+const DEFAULT_LOGIN_EXPIRATION = 14 * 24 * 60 // 14 days
 
 export const useHandleIDPResponse = ({ onLogin, expiration = DEFAULT_LOGIN_EXPIRATION, setState, hasOauthResponse }: UseHandleIDPResponseProps): void => {
 	const idpSignIn = useSignInIDPMutation({ headers })

package/src/internal/utils/hashing.ts

@@ -0,0 +1,4 @@
+export const calculateHash = async (algo: AlgorithmIdentifier, message: string): Promise<string> => {
+	const hashBuffer = await crypto.subtle.digest(algo, new TextEncoder().encode(message))
+	return Array.from(new Uint8Array(hashBuffer)).map(b => b.toString(16).padStart(2, '0')).join('')
+}

package/src/internal/utils/randomInt.ts

@@ -0,0 +1,30 @@
+export const randomInt = (min: number, max: number) => {
+	if (min >= max) {
+		throw new Error('The min value must be less than the max value.')
+	}
+
+	if (max > 0xFFFFFFFF) {
+		throw new Error('The max value exceeds the limit for this implementation.')
+	}
+
+	const range = max - min + 1
+	const maxValidValue = Math.floor(0xFFFFFFFF / range) * range
+	let randomInt
+
+	do {
+		const array = new Uint32Array(1)
+		window.crypto.getRandomValues(array)
+		randomInt = array[0]
+	} while (randomInt >= maxValidValue)
+
+	return min + (randomInt % range)
+}
+
+
+export const randomString = (length: number, charset: string): string => {
+	let result = ''
+	for (let i = 0; i < length; i++) {
+		result += charset[randomInt(0, charset.length - 1)]
+	}
+	return result
+}