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

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

@@ -0,0 +1,35 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { LoginToken } from '../../useTenantApi'
+import { createTenantMutation } from '../../useTenantMutation'
+import { ModelType } from 'graphql-ts-client-api'
+
+const signInIdpFragment = TenantApi.signInIDPResult$$.person(TenantApi.person$$)
+
+export type SignInIDPMutationResult = ModelType<typeof signInIdpFragment>
+
+export const signInIDPMutation = TenantApi
+	.mutation$
+	.signInIDP(
+		TenantApi
+			.signInIDPResponse$$
+			.error(TenantApi.signInIDPError$$)
+			.result(signInIdpFragment),
+		options => options.alias('mutation'),
+	)
+
+export type SignInIDPMutationVariables = {
+	identityProvider: string
+	expiration?: number
+	data:
+		& {
+			url?: string
+			redirectUrl?: string
+			sessionData?: any
+		}
+		& { [key: string]: any }
+}
+
+
+export const useSignInIDPMutation = createTenantMutation<SignInIDPMutationResult, TenantApi.SignInIDPErrorCode, SignInIDPMutationVariables>(signInIDPMutation, {
+	apiToken: LoginToken,
+})

package/src/hooks/mutations/index.ts

@@ -0,0 +1,7 @@
+export * from './apiKey'
+export * from './auth'
+export * from './invite'
+export * from './idp'
+export * from './memberships'
+export * from './otp'
+export * from './passwordReset'

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

@@ -0,0 +1 @@
+export * from './useInviteMutation'

package/src/hooks/mutations/invite/useInviteMutation.tsx

@@ -0,0 +1,20 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { ModelType } from 'graphql-ts-client-api'
+import { createTenantMutation } from '../../useTenantMutation'
+
+const inviteMutationResult = TenantApi.inviteResult$$
+	.person(TenantApi.person$$.identity(TenantApi.identity$$))
+
+export type InviteMutationResult = ModelType<typeof inviteMutationResult>
+
+export const inviteMutation = TenantApi.mutation$
+	.invite(
+		TenantApi
+			.inviteResponse$$
+			.error(TenantApi.inviteError$$.membershipValidation(TenantApi.membershipValidationError$$))
+			.result(inviteMutationResult),
+		options => options.alias('mutation'),
+	)
+
+export const useInviteMutation = createTenantMutation(inviteMutation)
+export type InviteMutationVariables = Parameters<ReturnType<typeof useInviteMutation>>[0]

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

@@ -0,0 +1,3 @@
+export * from './useRemoveProjectMemberMutation'
+export * from './useAddProjectMemberMutation'
+export * from './useUpdateProjectMemberMutation'

package/src/hooks/mutations/memberships/useAddProjectMemberMutation.ts

@@ -0,0 +1,13 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { createTenantMutation } from '../../useTenantMutation'
+
+export const addProjectMemberMutation = TenantApi.mutation$
+	.addProjectMember(
+		TenantApi
+			.addProjectMemberResponse$$
+			.error(TenantApi.addProjectMemberError$$.membershipValidation(TenantApi.membershipValidationError$$)),
+		options => options.alias('mutation'),
+	)
+
+export const useAddProjectMemberMutation = createTenantMutation(addProjectMemberMutation)
+export type AddProjectMemberMutationVariables = Parameters<ReturnType<typeof useAddProjectMemberMutation>>[0]

package/src/hooks/mutations/memberships/useRemoveProjectMemberMutation.ts

@@ -0,0 +1,13 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { createTenantMutation } from '../../useTenantMutation'
+
+export const removeProjectMemberMutation = TenantApi.mutation$
+	.removeProjectMember(
+		TenantApi
+			.removeProjectMemberResponse$$
+			.error(TenantApi.removeProjectMemberError$$),
+		options => options.alias('mutation'),
+	)
+
+export const useRemoveProjectMemberMutation = createTenantMutation(removeProjectMemberMutation)
+export type RemoveProjectMemberMutationVariables = Parameters<ReturnType<typeof useRemoveProjectMemberMutation>>[0]

package/src/hooks/mutations/memberships/useUpdateProjectMemberMutation.ts

@@ -0,0 +1,13 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { createTenantMutation } from '../../useTenantMutation'
+
+export const updateProjectMemberMutation = TenantApi.mutation$
+	.updateProjectMember(
+		TenantApi
+			.updateProjectMemberResponse$$
+			.error(TenantApi.updateProjectMemberError$$.membershipValidation(TenantApi.membershipValidationError$$)),
+		options => options.alias('mutation'),
+	)
+
+export const useUpdateProjectMemberMutation = createTenantMutation(updateProjectMemberMutation)
+export type UpdateProjectMemberMutationVariables = Parameters<ReturnType<typeof useUpdateProjectMemberMutation>>[0]

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

@@ -0,0 +1,3 @@
+export * from './useConfirmOtpMutation'
+export * from './useDisableOtpMutation'
+export * from './usePrepareOtpMutation'

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

@@ -0,0 +1,13 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { createTenantMutation } from '../../useTenantMutation'
+
+export const confirmOtpMutation = TenantApi.mutation$
+	.confirmOtp(TenantApi
+			.confirmOtpResponse$$
+			.error(TenantApi.confirmOtpError$$),
+		options => options.alias('mutation'),
+	)
+
+
+export const useConfirmOtpMutation = createTenantMutation(confirmOtpMutation)
+export type ConfirmOtpMutationVariables = Parameters<ReturnType<typeof useConfirmOtpMutation>>[0]

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

@@ -0,0 +1,10 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { createTenantMutation } from '../../useTenantMutation'
+
+export const disableOtpMutation = TenantApi.mutation$.disableOtp(
+	TenantApi.disableOtpResponse$$.error(TenantApi.disableOtpError$$),
+	options => options.alias('mutation'),
+)
+
+export const useDisableOtpMutation = createTenantMutation(disableOtpMutation)
+export type DisableOtpMutationVariables = Parameters<ReturnType<typeof useDisableOtpMutation>>[0]

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

@@ -0,0 +1,16 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { ModelType } from 'graphql-ts-client-api'
+import { createTenantMutation } from '../../useTenantMutation'
+
+const prepareOtmMutationResult = TenantApi.prepareOtpResponse$$.result(TenantApi.prepareOtpResult$$)
+
+export type PrepareOtpMutationResult = ModelType<typeof TenantApi.prepareOtpResult$$>
+
+export const prepareOtpMutation = TenantApi.mutation$.prepareOtp(
+	prepareOtmMutationResult,
+	options => options.alias('mutation'),
+)
+
+
+export const usePrepareOtpMutation = createTenantMutation(prepareOtpMutation)
+export type PrepareOtpMutationVariables = Parameters<ReturnType<typeof usePrepareOtpMutation>>[0]

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

@@ -0,0 +1,2 @@
+export * from './useCreateResetPasswordRequestMutation'
+export * from './useResetPasswordMutation'

package/src/hooks/mutations/passwordReset/useCreateResetPasswordRequestMutation.ts

@@ -0,0 +1,17 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { LoginToken } from '../../useTenantApi'
+import { createTenantMutation } from '../../useTenantMutation'
+
+export const createResetPasswordRequestMutation = TenantApi
+	.mutation$
+	.createResetPasswordRequest(
+		TenantApi
+			.createPasswordResetRequestResponse$$
+			.error(TenantApi.createPasswordResetRequestError$$),
+		options => options.alias('mutation'),
+	)
+
+export const useCreateResetPasswordRequestMutation = createTenantMutation(createResetPasswordRequestMutation, {
+	apiToken: LoginToken,
+})
+export type CreateResetPasswordRequestMutationVariables = Parameters<ReturnType<typeof useCreateResetPasswordRequestMutation>>[0]

package/src/hooks/mutations/passwordReset/useResetPasswordMutation.ts

@@ -0,0 +1,17 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { LoginToken } from '../../useTenantApi'
+import { createTenantMutation } from '../../useTenantMutation'
+
+export const resetPasswordMutation = TenantApi
+	.mutation$
+	.resetPassword(
+		TenantApi
+			.resetPasswordResponse$$
+			.error(TenantApi.resetPasswordError$$),
+		options => options.alias('mutation'),
+	)
+
+export const useResetPasswordMutation = createTenantMutation(resetPasswordMutation, {
+	apiToken: LoginToken,
+})
+export type ResetPasswordMutationVariables = Parameters<ReturnType<typeof useResetPasswordMutation>>[0]

package/src/hooks/queries/index.ts

@@ -0,0 +1,4 @@
+export * from './useMeQuery'
+export * from './useProjectMembersQuery'
+export * from './useProjectMembershipsQuery'
+export * from './useProjectRolesDefinitionQuery'

package/src/hooks/queries/useMeQuery.ts

@@ -0,0 +1,23 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { ModelType } from 'graphql-ts-client-api'
+import { TenantApiOptions, useTenantApi } from '../useTenantApi'
+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 MeQueryData = ModelType<typeof identityFragment>
+
+export const useMeQuery = (options: TenantApiOptions = {}) => {
+	const executor = useTenantApi(options)
+	return useCallback(async ({}: {}): Promise<MeQueryData> => {
+		return (await executor(TenantApi.query$.me(identityFragment))).me
+	}, [executor])
+}

package/src/hooks/queries/useProjectMembersQuery.ts

@@ -0,0 +1,43 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { ModelType, ParameterRef } from 'graphql-ts-client-api'
+import { TenantApiOptions, useTenantApi } from '../useTenantApi'
+import { useCallback } from 'react'
+
+const projectIdentityRelationFragment = TenantApi
+	.projectIdentityRelation$
+	.identity(TenantApi.identity$$
+			.person(TenantApi.person$$)
+			.apiKey(TenantApi.apiKey$$)
+		,
+	)
+	.memberships(TenantApi.membership$$.variables(TenantApi.variableEntry$$))
+
+export type ProjectMembersQueryResult = readonly ModelType<typeof projectIdentityRelationFragment>[]
+
+export type ProjectMembersQueryVariables =
+	& {
+		projectSlug: string
+	}
+	& TenantApi.ProjectMembersInput
+
+
+export const useProjectMembersQuery = ({ headers, apiToken }: TenantApiOptions = {}) => {
+	const executor = useTenantApi({
+		headers,
+		apiToken,
+	})
+	return useCallback(async ({ projectSlug, ...membersInput }: ProjectMembersQueryVariables): Promise<ProjectMembersQueryResult> => {
+		const result = await executor(TenantApi.query$.projectBySlug({
+			slug: ParameterRef.of('projectSlug'),
+		}, TenantApi.project$.members({
+			input: ParameterRef.of('membersInput'),
+		}, projectIdentityRelationFragment)), {
+			variables: {
+				projectSlug,
+				membersInput,
+			},
+		})
+
+		return result.projectBySlug?.members ?? []
+	}, [executor])
+}

package/src/hooks/queries/useProjectMembershipsQuery.ts

@@ -0,0 +1,25 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { ModelType, ParameterRef } from 'graphql-ts-client-api'
+import { TenantApiOptions, useTenantApi } from '../useTenantApi'
+import { useCallback } from 'react'
+
+const projectMembershipsFragment = TenantApi.membership$$.variables(TenantApi.variableEntry$$)
+
+export type ProjectMembershipsQueryResult = readonly ModelType<typeof projectMembershipsFragment>[]
+
+export type ProjectMembershipsQueryVariables = {
+	projectSlug: string
+	identityId: string
+}
+
+
+export const useProjectMembershipsQuery = (options: TenantApiOptions = {}) => {
+	const executor = useTenantApi(options)
+	return useCallback(async (input: ProjectMembershipsQueryVariables): Promise<ProjectMembershipsQueryResult> => {
+		const result = await executor(TenantApi.query$.projectMemberships(TenantApi.membership$$.variables(TenantApi.variableEntry$$)), {
+			variables: input,
+		})
+
+		return result.projectMemberships ?? []
+	}, [executor])
+}

package/src/hooks/queries/useProjectRolesDefinitionQuery.ts

@@ -0,0 +1,34 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { ModelType } from 'graphql-ts-client-api'
+import { TenantApiOptions, useTenantApi } from '../useTenantApi'
+import { useCallback } from 'react'
+
+const projectRolesDefinitionFragment = TenantApi.roleDefinition$$
+	.variables(
+		TenantApi.roleVariableDefinition$$
+			.on(TenantApi.roleConditionVariableDefinition$$)
+			.on(TenantApi.roleEntityVariableDefinition$$)
+			.on(TenantApi.rolePredefinedVariableDefinition$$)
+		,
+	)
+
+export type ProjectRoleDefinition = ModelType<typeof projectRolesDefinitionFragment>
+export type ProjectRolesDefinitionQueryResult = readonly ProjectRoleDefinition[]
+
+const projectRolesDefinitionQuery = TenantApi.query$
+	.projectBySlug(
+		TenantApi
+			.project$
+			.roles(projectRolesDefinitionFragment),
+	)
+
+export interface ProjectRolesDefinitionQueryVariables {
+	slug: string
+}
+
+export const useProjectRolesDefinitionQuery = ({ headers, apiToken }: TenantApiOptions = {}) => {
+	const executor = useTenantApi()
+	return useCallback(async (variables: ProjectRolesDefinitionQueryVariables): Promise<ProjectRolesDefinitionQueryResult> => {
+		return (await executor(projectRolesDefinitionQuery, { headers, apiToken, variables })).projectBySlug?.roles ?? []
+	}, [apiToken, executor, headers])
+}

package/src/hooks/useFetchIdentity.ts

@@ -0,0 +1,55 @@
+import { useCallback, useMemo, useState } from 'react'
+import { Identity, IdentityMethods, IdentityStateValue } from '../types'
+import { useSessionToken } from '@contember/react-client'
+import { useLogoutInternal } from '../internal/hooks/useLogoutInternal'
+import { useMeQuery } from './queries'
+
+export const useFetchIdentity = (): [{ state: IdentityStateValue, identity: Identity | undefined }, IdentityMethods] => {
+	const sessionToken = useSessionToken()
+	const fetchMe = useMeQuery()
+
+	const [identityState, setIdentityState] = useState<ReturnType<typeof useFetchIdentity>[0]>({ state: sessionToken ? 'loading' : 'none', identity: undefined })
+
+	const clearIdentity = useCallback(() => setIdentityState({ state: 'cleared', identity: undefined }), [])
+	const logout = useLogoutInternal(clearIdentity)
+
+	const fetch = useCallback(async () => {
+		setIdentityState({ state: 'loading', identity: undefined })
+		try {
+			const response = await fetchMe({})
+			const person = response.person
+			const projects = response.projects
+			const permissions = response.permissions ?? { canCreateProject: false }
+
+			setIdentityState({
+				state: 'success',
+				identity: {
+					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({ state: 'cleared', identity: undefined })
+			} else {
+				setIdentityState({ state: 'failed', identity: undefined })
+			}
+		}
+	}, [fetchMe, logout])
+
+	return [
+		identityState,
+		useMemo((): IdentityMethods => ({
+			clearIdentity,
+			refreshIdentity: fetch,
+		}), [clearIdentity, fetch]),
+	]
+}

package/src/hooks/useLogout.ts

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

package/src/hooks/useTenantApi.ts

@@ -1,16 +1,24 @@
-import { useTenantGraphQlClient } from '@contember/react-client'
+import { useLoginToken, useTenantGraphQlClient } from '@contember/react-client'
 import { useCallback } from 'react'
 import { Fetcher, TextWriter, util } from 'graphql-ts-client-api'
 
-export const useTenantApi = () => {
+export const LoginToken = Symbol('LoginToken')
+
+export type TenantApiOptions = {
+	readonly headers?: Record<string, string>
+	readonly apiToken?: string | typeof LoginToken
+}
+
+export const useTenantApi = ({ headers, apiToken }: TenantApiOptions = {}) => {
 	const client = useTenantGraphQlClient()
+	const loginToken = useLoginToken()
 
 	return useCallback(<TData extends object, TVariables extends object>(
 		fetcher: Fetcher<'Query' | 'Mutation', TData, TVariables>,
 		options?: {
 			readonly variables?: TVariables
 			readonly headers?: Record<string, string>
-			readonly apiToken?: string
+			readonly apiToken?: string | typeof LoginToken
 		},
 	): Promise<TData> => {
 
@@ -27,10 +35,14 @@ export const useTenantApi = () => {
 		writer.text(fetcher.toString())
 		writer.text(fetcher.toFragmentString())
 
+		const apiTokenResolved = apiToken ?? options?.apiToken
 		return client.execute(writer.toString(), {
 			variables: options?.variables,
-			headers: options?.headers,
-			apiToken: options?.apiToken,
+			headers: {
+				...headers,
+				...options?.headers,
+			},
+			apiToken: apiTokenResolved === LoginToken ? loginToken : apiTokenResolved,
 		})
-	}, [client])
+	}, [apiToken, client, headers, loginToken])
 }

package/src/hooks/useTenantMutation.ts

@@ -0,0 +1,45 @@
+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 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 const useTenantMutation = <TResult, TError extends string = never, TVariables extends object = {}>(
+	fetcher: MutationFetcher<TenantMutation<TResult, TError>, TVariables>,
+	{ headers, apiToken }: TenantApiOptions = {},
+) => {
+	const tenantApi = useTenantApi({ headers, apiToken })
+
+	return useCallback(async (variables: TVariables): Promise<TenantMutationResponse<TResult, TError>> => {
+		const result = await tenantApi(
+			fetcher,
+			{
+				variables,
+			},
+		)
+		if (!result.mutation?.ok) {
+			return {
+				ok: false,
+				error: result.mutation?.error?.code as TError,
+				developerMessage: result.mutation?.error?.developerMessage,
+			}
+		} else {
+			return { ok: true, result: result.mutation.result as TResult }
+		}
+	}, [fetcher, tenantApi])
+}
+
+
+export const createTenantMutation = <TResult, TError extends string = never, TVariables extends object = {}>(
+	fetcher: MutationFetcher<TenantMutation<TResult, TError>, TVariables>,
+	defaultOptions?: TenantApiOptions,
+) => {
+	return ({ headers, apiToken }: TenantApiOptions = {}) => useTenantMutation(fetcher, {
+		headers: useMemo(() => ({ ...defaultOptions?.headers, ...headers }), [headers]),
+		apiToken: apiToken ?? defaultOptions?.apiToken,
+	})
+}

package/src/hooks/useTenantQueryLoader.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useObjectMemo } from '@contember/react-utils'
+
+export type TenantQueryLoaderState<Result> =
+	| { state: 'loading' }
+	| { state: 'error'; error: unknown }
+	| { state: 'success'; data: Result }
+	| { state: 'refreshing'; data: Result }
+
+export type TenantQueryLoaderMethods = {
+	refresh: () => void
+}
+
+export const useTenantQueryLoader = <TVariables extends object, Result>(fetcher: (variables: TVariables) => Promise<Result>, variables: TVariables): [TenantQueryLoaderState<Result>, TenantQueryLoaderMethods] => {
+	const [state, setState] = useState<TenantQueryLoaderState<Result>>({ state: 'loading' })
+	const stateRef = useRef(state)
+	stateRef.current = state
+	const variablesMemo = useObjectMemo(variables)
+
+	const reqId = useRef(0)
+
+	const triggerLoad = useCallback(async () => {
+		const currentReqId = ++reqId.current
+		try {
+			if (stateRef.current.state === 'success') {
+				setState({ state: 'refreshing', data: stateRef.current.data })
+			}
+			const data = await fetcher(variablesMemo)
+			if (reqId.current !== currentReqId) {
+				return
+			}
+			setState({ state: 'success', data })
+		} catch (e) {
+			console.error(e)
+			if (reqId.current !== currentReqId) {
+				return
+			}
+			setState({ state: 'error', error: e })
+		}
+
+	}, [fetcher, variablesMemo])
+
+
+	useEffect(() => {
+		triggerLoad()
+	}, [triggerLoad])
+
+	return [state, { refresh: triggerLoad }]
+}

package/src/index.ts

@@ -1,3 +1,6 @@
+export * from './components'
+export * from './contexts'
 export * from './hooks'
+export * from './types'
 
 export type { ModelType } from 'graphql-ts-client-api'

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))
+		}, []),
+	}
+}