@contember/react-client-tenant 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/types/types/forms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["../../../src/types/forms.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,SAAS,GAClB,SAAS,GACT,SAAS,GACT,YAAY,GACZ,OAAO,GACP,SAAS,CAAA;AAEZ,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE7C,MAAM,MAAM,aAAa,GAAG,eAAe,CAAA;AAE3C,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,MAAM,IAAI;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAA;IACf,IAAI,EAAE,aAAa,GAAG,CAAC,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CACzB,CAAC;AAEF,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,KAAK;IACpG,MAAM,EAAE,CAAC,CAAA;IACT,KAAK,EAAE,SAAS,GAAG,CAAC,CAAA;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IAC9C,QAAQ,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IAC5D,MAAM,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAA;CACzB"}
+{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["../../../src/types/forms.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,SAAS,GAClB,SAAS,GACT,SAAS,GACT,YAAY,GACZ,OAAO,GACP,SAAS,CAAA;AAEZ,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAE5C,MAAM,MAAM,aAAa,GAAG,eAAe,CAAA;AAE3C,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,MAAM,IAAI;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAA;IACf,IAAI,EAAE,aAAa,GAAG,CAAC,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,KAAK;IACpG,MAAM,EAAE,CAAC,CAAA;IACT,KAAK,EAAE,SAAS,GAAG,CAAC,CAAA;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IAC9C,QAAQ,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IAC5D,MAAM,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAA;CACzB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-client-tenant",
   "license": "Apache-2.0",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.21",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -17,22 +17,15 @@
         "types": "./dist/types/index.d.ts",
         "development": "./dist/development/index.cjs",
         "production": "./dist/production/index.cjs",
+        "typescript": "./src/index.ts",
         "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": "NODE_ENV=development vite build --mode development",
-    "build:js:prod": "vite build --mode production",
     "ae:build": "api-extractor run --local",
-    "ae:test": "api-extractor run",
-    "test": "vitest"
+    "ae:test": "api-extractor run"
   },
   "repository": {
     "type": "git",
@@ -40,11 +33,11 @@
     "directory": "packages/react-client-tenant"
   },
   "dependencies": {
-    "@contember/graphql-client-tenant": "^1.3.7",
-    "@contember/react-client": "2.0.0-alpha.2",
-    "@contember/react-utils": "2.0.0-alpha.2",
-    "@radix-ui/primitive": "^1.0.1",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@contember/graphql-client-tenant": "2.0.0-alpha.21",
+    "@contember/react-client": "2.0.0-alpha.21",
+    "@contember/react-utils": "2.0.0-alpha.21",
+    "@radix-ui/primitive": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
     "graphql-ts-client-api": "^3.1.17"
   },
   "peerDependencies": {
@@ -54,6 +47,5 @@
   "devDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
-  },
-  "stableVersion": "0.0.0"
+  }
 }

package/src/components/IdentityProvider.tsx

@@ -31,7 +31,7 @@ export const IdentityProvider: React.FC<IdentityProviderProps> = ({ children })
 		<IdentityStateContext.Provider value={state}>
 			<IdentityContext.Provider value={identity}>
 				<IdentityMethodsContext.Provider value={methods}>
-						{children}
+					{children}
 				</IdentityMethodsContext.Provider>
 			</IdentityContext.Provider>
 		</IdentityStateContext.Provider>

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/TenantForm.tsx

@@ -9,17 +9,17 @@ const SlotForm = Slot as ComponentType<React.FormHTMLAttributes<HTMLFormElement>
 
 type ExecuteResult<T extends FormContextValue<any, any, any>, OkResult = undefined> =
 	| ({ ok: true } & (OkResult extends undefined ? {} : { result: OkResult }))
-	| { ok: false, error?: T['errors'][number]['code'], developerMessage?: string, state?: T['state'] }
+	| { ok: false; error?: T['errors'][number]['code']; developerMessage?: string; state?: T['state'] }
 
 export interface TenantFormProps<T extends FormContextValue<any, any, any>, OkResult = undefined> {
 	children: ReactElement
 	loading?: boolean
 	initialValues: T['values']
 	errorMapping?: Partial<Record<T['errors'][number]['code'], keyof T['values']>>
-	validate?: (args: { values: T['values'], state: T['state'] }) => T['errors'] | undefined
-	execute: (args: { values: T['values'], state: T['state'] }) => Promise<ExecuteResult<T, OkResult>>
+	validate?: (args: { values: T['values']; state: T['state'] }) => T['errors'] | undefined
+	execute: (args: { values: T['values']; state: T['state'] }) => Promise<ExecuteResult<T, OkResult>>
 	onSuccess?: (args: { result: OkResult }) => void
-	onChange?: (args: { values: T['values'], state: T['state'], submit: () => Promise<void> }) => void
+	onChange?: (args: { values: T['values']; state: T['state']; submit: () => Promise<void> }) => void
 }
 
 export const TenantForm = <T extends FormContextValue<any, any, any>, OkResult = 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/components/triggers/TenantActionTrigger.tsx

@@ -9,8 +9,8 @@ export interface TenantActionTriggerProps<OkResult, Error extends string> {
 	children: ReactElement
 	onClick?: MouseEventHandler<HTMLButtonElement>
 	onSuccess?: (args: {result: OkResult}) => void
-	onError?: (args: { code: Error | 'UNKNOWN_ERROR', error: unknown }) => void
-	execute: () => Promise<({ ok: true } & (OkResult extends undefined ? {} : { result: OkResult })) | { ok: false, error?: Error }>
+	onError?: (args: { code: Error | 'UNKNOWN_ERROR'; error: unknown }) => void
+	execute: () => Promise<({ ok: true } & (OkResult extends undefined ? {} : { result: OkResult })) | { ok: false; error?: Error }>
 }
 
 export const TenantActionTrigger = <OkResult, Error extends string>({ onError: onErrorIn, onSuccess: onSuccessIn, onClick: onClickProp, execute: executeIn, ...props }: TenantActionTriggerProps<OkResult, Error>) => {

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/apiKey/useCreateSessionTokenMutation.tsx

@@ -2,7 +2,7 @@ import * as TenantApi from '@contember/graphql-client-tenant'
 import { ModelType } from 'graphql-ts-client-api'
 import { createTenantMutation } from '../../useTenantMutation'
 
-const createSessionTokenMutationResult = TenantApi.createSessionTokenResult$.token.person(TenantApi.person$$)
+const createSessionTokenMutationResult = TenantApi.createSessionTokenResult$.token.person(TenantApi.person$.id.email.name)
 
 export type CreateSessionTokenMutationResult = ModelType<typeof createSessionTokenMutationResult>
 

package/src/hooks/mutations/auth/useSignInMutation.ts

@@ -3,7 +3,7 @@ import { LoginToken } from '../../useTenantApi'
 import { ModelType } from 'graphql-ts-client-api'
 import { createTenantMutation } from '../../useTenantMutation'
 
-const signInResultFragment = TenantApi.signInResult$$.person(TenantApi.person$$)
+const signInResultFragment = TenantApi.signInResult$$.person(TenantApi.person$.id.email.name)
 
 export type SignInMutationResult = ModelType<typeof signInResultFragment>
 

package/src/hooks/mutations/idp/useInitSignInIDPMutation.ts

@@ -20,7 +20,7 @@ const InitSignInIDPMutation = TenantApi
 		TenantApi
 			.initSignInIDPResponse$$
 			.error(TenantApi.initSignInIDPError$$)
-			.result(TenantApi.initSignInIDPResult$$),
+			.result(TenantApi.initSignInIDPResult$.authUrl.sessionData),
 		options => options.alias('mutation'),
 	)
 

package/src/hooks/mutations/idp/useSignInIdpMutation.ts

@@ -3,7 +3,7 @@ import { LoginToken } from '../../useTenantApi'
 import { createTenantMutation } from '../../useTenantMutation'
 import { ModelType } from 'graphql-ts-client-api'
 
-const signInIdpFragment = TenantApi.signInIDPResult$$.person(TenantApi.person$$)
+const signInIdpFragment = TenantApi.signInIDPResult$$.person(TenantApi.person$.id.email.name)
 
 export type SignInIDPMutationResult = ModelType<typeof signInIdpFragment>
 

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/invite/useInviteMutation.tsx

@@ -3,7 +3,7 @@ import { ModelType } from 'graphql-ts-client-api'
 import { createTenantMutation } from '../../useTenantMutation'
 
 const inviteMutationResult = TenantApi.inviteResult$$
-	.person(TenantApi.person$$.identity(TenantApi.identity$$))
+	.person(TenantApi.person$.id.email.name.identity(TenantApi.identity$$))
 
 export type InviteMutationResult = ModelType<typeof inviteMutationResult>
 

package/src/hooks/mutations/otp/useConfirmOtpMutation.ts

@@ -3,9 +3,9 @@ import { createTenantMutation } from '../../useTenantMutation'
 
 export const confirmOtpMutation = TenantApi.mutation$
 	.confirmOtp(TenantApi
-			.confirmOtpResponse$$
-			.error(TenantApi.confirmOtpError$$),
-		options => options.alias('mutation'),
+		.confirmOtpResponse$$
+		.error(TenantApi.confirmOtpError$$),
+	options => options.alias('mutation'),
 	)
 
 

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$.id.email.name)
+
+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/queries/useMeQuery.ts

@@ -5,7 +5,7 @@ import { useCallback } from 'react'
 
 const identityFragment = TenantApi
 	.identity$$
-	.person(TenantApi.person$$)
+	.person(TenantApi.person$.id.email.name.otpEnabled)
 	.projects(TenantApi
 		.identityProjectRelation$
 		.project(TenantApi.project$$)

package/src/hooks/queries/useProjectMembersQuery.ts

@@ -6,8 +6,8 @@ import { useCallback } from 'react'
 const projectIdentityRelationFragment = TenantApi
 	.projectIdentityRelation$
 	.identity(TenantApi.identity$$
-			.person(TenantApi.person$$)
-			.apiKey(TenantApi.apiKey$$)
+		.person(TenantApi.person$.id.email.name.otpEnabled)
+		.apiKey(TenantApi.apiKey$$)
 		,
 	)
 	.memberships(TenantApi.membership$$.variables(TenantApi.variableEntry$$))

package/src/hooks/useFetchIdentity.ts

@@ -1,10 +1,10 @@
 import { useCallback, useMemo, useState } from 'react'
 import { Identity, IdentityMethods, IdentityStateValue } from '../types'
-import { useSessionToken } from '@contember/react-client'
+import { GraphQlClientError, useSessionToken } from '@contember/react-client'
 import { useLogoutInternal } from '../internal/hooks/useLogoutInternal'
 import { useMeQuery } from './queries'
 
-export const useFetchIdentity = (): [{ state: IdentityStateValue, identity: Identity | undefined }, IdentityMethods] => {
+export const useFetchIdentity = (): [{ state: IdentityStateValue; identity: Identity | undefined }, IdentityMethods] => {
 	const sessionToken = useSessionToken()
 	const fetchMe = useMeQuery()
 
@@ -36,9 +36,8 @@ export const useFetchIdentity = (): [{ state: IdentityStateValue, identity: Iden
 			})
 		} catch (e) {
 			console.error(e)
-			if (typeof e === 'object' && e !== null && 'status' in e && (e as { status?: unknown }).status === 401) {
+			if (e instanceof GraphQlClientError && e.response?.status === 401) {
 				logout({ noRedirect: true })
-				setIdentityState({ state: 'cleared', identity: undefined })
 			} else {
 				setIdentityState({ state: 'failed', identity: undefined })
 			}

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/hooks/useTenantMutation.ts

@@ -2,11 +2,11 @@ import { TenantApiOptions, useTenantApi } from './useTenantApi'
 import { useCallback, useMemo } from 'react'
 import { MutationFetcher } from '@contember/graphql-client-tenant'
 
-export type TenantMutationOkResponse<Result> = { ok: true, result: Result }
-export type TenantMutationErrorResponse<Error> = { ok: false, error: Error, developerMessage?: string }
+export type TenantMutationOkResponse<Result> = { ok: true; result: Result }
+export type TenantMutationErrorResponse<Error> = { ok: false; error: Error; developerMessage?: string }
 export type TenantMutationResponse<Result, Error> = TenantMutationOkResponse<Result> | TenantMutationErrorResponse<Error>
 
-export type TenantMutation<Result, Error> = { readonly mutation?: { readonly ok: boolean, readonly error?: { readonly code: Error, readonly developerMessage: string}, readonly result?: Result} }
+export type TenantMutation<Result, Error> = { readonly mutation?: { readonly ok: boolean; readonly error?: { readonly code: Error; readonly developerMessage: string}; readonly result?: Result} }
 
 export const useTenantMutation = <TResult, TError extends string = never, TVariables extends object = {}>(
 	fetcher: MutationFetcher<TenantMutation<TResult, TError>, TVariables>,

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 })