@contember/react-client-tenant 1.3.0-alpha.26 → 1.3.0-rc.1

package/src/internal/hooks/useHandleIDPResponse.ts

@@ -0,0 +1,64 @@
+import { SetStateAction, useEffect, useRef } from 'react'
+import { useSetSessionToken } from '@contember/react-client'
+import { useIDPStateStore } from './useIDPStateStore'
+import { getBaseHref } from '../utils/getBaseHref'
+import { IDPStateValue } from '../../types/idp'
+import { useSignInIDPMutation } from '../../hooks'
+import { useRedirectToBacklinkCallback } from './useRedirectToBacklink'
+
+export interface UseHandleIDPResponseProps {
+	onLogin?: () => void
+	expiration?: number
+
+	setState: (state: SetStateAction<IDPStateValue>) => void
+	hasOauthResponse: boolean
+}
+
+const headers = {
+	'X-Contember-Token-Path': 'data.mutation.result.token',
+}
+
+const DEFAULT_LOGIN_EXPIRATION = 14 * 24 * 3600 // 14 days
+
+export const useHandleIDPResponse = ({ onLogin, expiration = DEFAULT_LOGIN_EXPIRATION, setState, hasOauthResponse }: UseHandleIDPResponseProps): void => {
+	const idpSignIn = useSignInIDPMutation({ headers })
+	const setSessionToken = useSetSessionToken()
+
+	const firstRenderRef = useRef(true)
+
+	const { get: loadIdpState } = useIDPStateStore()
+	const redirectToBackLink = useRedirectToBacklinkCallback()
+
+	useEffect(() => {
+		if (!hasOauthResponse || !firstRenderRef.current) {
+			return
+		}
+		firstRenderRef.current = false
+		;(async () => {
+			const idpState = loadIdpState()
+			if (!idpState) {
+				setState({ type: 'response_failed', error: 'INVALID_LOCAL_STATE' })
+				return
+			}
+
+			const response = await idpSignIn({
+				data: {
+					url: window.location.href,
+					redirectUrl: getBaseHref(),
+					sessionData: idpState.sessionData,
+				},
+				identityProvider: idpState.provider,
+				expiration,
+			})
+			if (!response.ok) {
+				setState({ type: 'response_failed', error: response.error || 'UNKNOWN_ERROR' })
+			} else {
+				setSessionToken(response.result.token)
+				setState({ type: 'success' })
+
+				onLogin?.()
+				redirectToBackLink()
+			}
+		})()
+	}, [idpSignIn, onLogin, setSessionToken, hasOauthResponse, loadIdpState, expiration, setState, redirectToBackLink])
+}

package/src/internal/hooks/useIDPAutoInit.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react'
+
+export const useIDPAutoInitProvider = () => {
+	return useMemo(() => {
+		const params = new URLSearchParams(window.location.search)
+		const idp = params.get('idp')
+		if (idp !== null) {
+			return idp
+		}
+		const backlink = params.get('backlink')
+
+		if (backlink !== null) {
+			const resolvedBacklink = new URL(backlink, window.location.href)
+			return resolvedBacklink.searchParams.get('idp')
+		}
+	}, [])
+}
+

package/src/internal/hooks/useIDPStateStore.ts

@@ -0,0 +1,18 @@
+import { useCallback } from 'react'
+
+export type IDPState = { provider: string, sessionData: any }
+
+export const useIDPStateStore = (): {get: () => IDPState | null, set: (state: IDPState) => void} => {
+	return {
+		get: useCallback(() => {
+			const item = sessionStorage.getItem('idp')
+			if (!item) {
+				return null
+			}
+			return JSON.parse(item)
+		}, []),
+		set: useCallback((state: IDPState) => {
+			sessionStorage.setItem('idp', JSON.stringify(state))
+		}, []),
+	}
+}

package/src/internal/hooks/useInitIDPRedirect.ts

@@ -0,0 +1,48 @@
+import { SetStateAction, useCallback } from 'react'
+import { useIDPStateStore } from './useIDPStateStore'
+import { getBaseHref } from '../utils/getBaseHref'
+import { IDPInitError, IDPStateValue } from '../../types/idp'
+import { useInitSignInIDPMutation } from '../../hooks'
+import { useSaveBacklink } from './useRedirectToBacklink'
+
+export interface UseInitIDPRedirectProps {
+	onRedirect?: (url: string) => void
+	setState: (state: SetStateAction<IDPStateValue>) => void
+}
+
+export const useInitIDPRedirect = ({ onRedirect, setState }: UseInitIDPRedirectProps) => {
+	const initRequest = useInitSignInIDPMutation()
+	const saveBacklink = useSaveBacklink()
+	const { set: saveIdpState } = useIDPStateStore()
+
+	return useCallback(async ({ provider }: { provider: string }): Promise<{ ok: true } | { ok: false, error: IDPInitError }> => {
+		const fail = (error: IDPInitError) => {
+			setState({ type: 'init_failed', error })
+			return { ok: false, error }
+		}
+		try {
+			setState({ type: 'processing_init' })
+			const response = await initRequest({
+				data: {
+					redirectUrl: getBaseHref(),
+				},
+				identityProvider: provider,
+			})
+			if (!response.ok) {
+				return fail(response.error || 'UNKNOWN_ERROR')
+			} else {
+				saveIdpState({ provider, sessionData: response.result.sessionData as string })
+				saveBacklink()
+				if (onRedirect) {
+					onRedirect(response.result.authUrl as string)
+				} else {
+					window.location.href = response.result.authUrl as string
+				}
+				return { ok: true }
+			}
+		} catch (e) {
+			console.error(e)
+			return fail('UNKNOWN_ERROR')
+		}
+	}, [initRequest, onRedirect, saveBacklink, saveIdpState, setState])
+}

package/src/internal/hooks/useLogoutInternal.ts

@@ -0,0 +1,35 @@
+import { useSetSessionToken } from '@contember/react-client'
+import { useCallback } from 'react'
+import { useSignOutMutation } from '../../hooks'
+
+export const useLogoutInternal = (clearIdentity?: () => void) => {
+	const tenantLogout = useSignOutMutation()
+	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/useRedirectToBacklink.ts

@@ -0,0 +1,42 @@
+import { useCallback, useEffect } from 'react'
+import { useIdentity } from '../../contexts'
+
+const getBacklinkFromUrl = () => {
+	return new URLSearchParams(window.location.search).get('backlink')
+}
+
+export const useSaveBacklink = () => {
+	return useCallback(() => {
+		const backlink = getBacklinkFromUrl()
+		if (!backlink) {
+			return
+		}
+		sessionStorage.setItem('backlink', backlink)
+	}, [])
+}
+
+export const useRedirectToBacklinkCallback = () => {
+	return useCallback(() => {
+		const backlink = getBacklinkFromUrl() ?? sessionStorage.getItem('backlink')
+		if (!backlink) {
+			return
+		}
+		sessionStorage.removeItem('backlink')
+		const resolvedBacklink = new URL(backlink, window.location.href)
+		if (resolvedBacklink.origin === window.location.origin) {
+			window.location.href = resolvedBacklink.toString()
+		}
+	}, [])
+}
+
+export const useRedirectToBacklink = () => {
+	const identity = useIdentity()
+	const redirect = useRedirectToBacklinkCallback()
+	useEffect(() => {
+		if (!identity) {
+			return
+		}
+		redirect()
+	}, [identity, redirect])
+
+}

package/src/internal/utils/getBaseHref.ts

@@ -0,0 +1,4 @@
+export const getBaseHref = () => {
+	const href = window.location.href
+	return href.includes('?') ? href.slice(0, href.indexOf('?')) : href
+}

package/src/tsconfig.json

@@ -5,5 +5,6 @@
 	},
 	"references": [
 		{ "path": "../../react-client/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/forms.ts

@@ -0,0 +1,26 @@
+import { SetStateAction } from 'react'
+
+export type FormState =
+	| 'loading'
+	| 'initial'
+	| 'submitting'
+	| 'error'
+	| 'success'
+
+type FormValueType = Record<string, unknown>;
+
+export type FormErrorCode = 'UNKNOWN_ERROR'
+
+export type FormError<V extends FormValueType, E extends string> = {
+	field?: keyof V
+	code: FormErrorCode | E
+	developerMessage?: string
+};
+
+export interface FormContextValue<V extends FormValueType, E extends string, S extends string = never> {
+	values: V
+	state: FormState | S
+	setValues: (values: SetStateAction<V>) => void
+	setValue: <F extends keyof V>(field: F, value: V[F]) => void
+	errors: FormError<V, E>[]
+}

package/src/types/idp.ts

@@ -0,0 +1,25 @@
+import { InitSignInIDPErrorCode, SignInIDPErrorCode } from '@contember/graphql-client-tenant'
+
+export type IDPStateValue =
+	| { type: 'nothing' }
+	| { type: 'processing_init' }
+	| { type: 'processing_response' }
+	| { type: 'success' }
+	| { type: 'init_failed', error: IDPInitError }
+	| { type: 'response_failed', error: IDPResponseError }
+
+export type IDPStateType = IDPStateValue['type']
+
+export type IDPInitError =
+	| InitSignInIDPErrorCode
+	| 'UNKNOWN_ERROR'
+
+export type IDPResponseError =
+	| SignInIDPErrorCode
+	| 'INVALID_LOCAL_STATE'
+	| 'UNKNOWN_ERROR'
+
+
+export type IDPMethods = {
+	initRedirect: (args: { provider: string }) => Promise<{ ok: true } | { ok: false, error: IDPInitError }>
+}

package/src/types/index.ts

@@ -0,0 +1,5 @@
+export * from './forms'
+export * from './IdentityMethods'
+export * from './IdentityStateValue'
+export * from './Identity'
+export * from './idp'