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

package/dist/types/types/Identity.d.ts

@@ -1,5 +1,6 @@
 export interface Identity {
     readonly id: string;
+    readonly roles: readonly string[];
     readonly person?: Person;
     readonly projects: IdentityProject[];
     readonly permissions: {

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

@@ -1 +1 @@
-{"version":3,"file":"Identity.d.ts","sourceRoot":"","sources":["../../../src/types/Identity.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACxB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,QAAQ,EAAE,eAAe,EAAE,CAAA;IACpC,QAAQ,CAAC,WAAW,EAAE;QACrB,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAA;KAClC,CAAA;CACD;AAED,MAAM,WAAW,MAAM;IACtB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;CAC5B;AAED,MAAM,WAAW,eAAe;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;CACjC"}
+{"version":3,"file":"Identity.d.ts","sourceRoot":"","sources":["../../../src/types/Identity.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACxB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;IACjC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,QAAQ,EAAE,eAAe,EAAE,CAAA;IACpC,QAAQ,CAAC,WAAW,EAAE;QACrB,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAA;KAClC,CAAA;CACD;AAED,MAAM,WAAW,MAAM;IACtB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;CAC5B;AAED,MAAM,WAAW,eAAe;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;CACjC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-client-tenant",
   "license": "Apache-2.0",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-beta.2",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -11,6 +11,7 @@
         "types": "./dist/types/index.d.ts",
         "development": "./dist/development/index.js",
         "production": "./dist/production/index.js",
+        "typescript": "./src/index.ts",
         "default": "./dist/production/index.js"
       },
       "require": {
@@ -33,11 +34,11 @@
     "directory": "packages/react-client-tenant"
   },
   "dependencies": {
-    "@contember/graphql-client-tenant": "2.0.0-alpha.9",
-    "@contember/react-client": "2.0.0-alpha.9",
-    "@contember/react-utils": "2.0.0-alpha.9",
-    "@radix-ui/primitive": "^1.0.1",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@contember/graphql-client-tenant": "2.0.0-beta.2",
+    "@contember/react-client": "2.0.0-beta.2",
+    "@contember/react-utils": "2.0.0-beta.2",
+    "@radix-ui/primitive": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
     "graphql-ts-client-api": "^3.1.17"
   },
   "peerDependencies": {
@@ -48,4 +49,4 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }
-}
+}

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/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,7 @@ export * from './auth'
 export * from './invite'
 export * from './idp'
 export * from './memberships'
+export * from './passwordless'
 export * from './otp'
 export * from './passwordReset'
+export * from './profile'

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/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/mutations/profile/index.ts

@@ -0,0 +1,2 @@
+export * from './useChangeProfile'
+export * from './useChangeMyProfile'

package/src/hooks/mutations/profile/useChangeMyProfile.ts

@@ -0,0 +1,13 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { createTenantMutation } from '../../useTenantMutation'
+
+export const changeMyProfile = TenantApi.mutation$
+	.changeMyProfile(
+		TenantApi
+		  .changeMyProfileResponse$$
+		  .error(TenantApi.changeMyProfileError$$),
+		options => options.alias('mutation'),
+	)
+
+export const useChangeMyProfileMutation = createTenantMutation(changeMyProfile)
+export type ChangeMyProfileMutationVariables = Parameters<ReturnType<typeof useChangeMyProfileMutation>>[0]

package/src/hooks/mutations/profile/useChangeProfile.ts

@@ -0,0 +1,13 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { createTenantMutation } from '../../useTenantMutation'
+
+export const changeProfile = TenantApi.mutation$
+	.changeProfile(
+		TenantApi
+		  .changeProfileResponse$$
+		  .error(TenantApi.changeProfileError$$),
+		options => options.alias('mutation'),
+	)
+
+export const useChangeProfileMutation = createTenantMutation(changeProfile)
+export type ChangeProfileMutationVariables = Parameters<ReturnType<typeof useChangeProfileMutation>>[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,7 +6,7 @@ import { useCallback } from 'react'
 const projectIdentityRelationFragment = TenantApi
 	.projectIdentityRelation$
 	.identity(TenantApi.identity$$
-		.person(TenantApi.person$$)
+		.person(TenantApi.person$.id.email.name.otpEnabled)
 		.apiKey(TenantApi.apiKey$$)
 		,
 	)

package/src/hooks/useFetchIdentity.ts

@@ -1,6 +1,6 @@
 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'
 
@@ -25,6 +25,7 @@ export const useFetchIdentity = (): [{ state: IdentityStateValue; identity: Iden
 				state: 'success',
 				identity: {
 					id: response.id,
+					roles: response.roles ?? [],
 					person: person ?? undefined,
 					projects: projects.map(it => ({
 						name: it.project.name,
@@ -36,9 +37,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/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
+}

package/src/types/Identity.ts

@@ -1,5 +1,6 @@
 export interface Identity {
 	readonly id: string
+	readonly roles: readonly string[]
 	readonly person?: Person
 	readonly projects: IdentityProject[]
 	readonly permissions: {