codeforlife 2.8.2 → 2.9.0

package/src/hooks/auth.tsx

@@ -1,397 +0,0 @@
-import * as yup from "yup"
-import { type ReactNode, useCallback, useEffect, useState } from "react"
-import Cookies from "js-cookie"
-import type { TypedUseMutation } from "@reduxjs/toolkit/query/react"
-import { createSearchParams } from "react-router-dom"
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { useSelector } from "react-redux"
-
-import { type AuthFactor, type User } from "../api"
-import {
-  type OAuth2CodeChallenge,
-  type OAuth2CodeChallengeLengths,
-  type OAuth2ReceiveCodeUrlSearchParams,
-  type OAuth2RequestCodeUrlSearchParams,
-  generateOAuth2CodeChallenge,
-  makeOAuth2StorageKey,
-} from "../utils/auth"
-import { useLocation, useNavigate, useSearchParams } from "./router"
-import { type ExchangeOAuth2CodeArg } from "../api/endpoints/session"
-import { SESSION_METADATA_COOKIE_NAME } from "../settings"
-import { generateSecureRandomString } from "../utils/general"
-import { selectIsLoggedIn } from "../slices/session"
-
-// -----------------------------------------------------------------------------
-// Session
-// -----------------------------------------------------------------------------
-
-export interface SessionMetadata {
-  user_id: User["id"]
-  user_type: "teacher" | "student" | "indy"
-  auth_factors: Array<AuthFactor["type"]>
-  otp_bypass_token_exists: boolean
-}
-
-export function useSessionMetadata<T = SessionMetadata>(
-  cookieName = SESSION_METADATA_COOKIE_NAME,
-): T | undefined {
-  return useSelector(selectIsLoggedIn)
-    ? (JSON.parse(Cookies.get(cookieName)!) as T)
-    : undefined
-}
-
-/**
- * A utility function to predefine a useSessionMetadata hook.
- * @param cookieName The name of the session metadata cookie.
- * @returns An object containing the session metadata.
- */
-useSessionMetadata.predefine = <SessionMetadata,>(
-  cookieName = SESSION_METADATA_COOKIE_NAME,
-) => {
-  return () => useSessionMetadata<SessionMetadata>(cookieName)
-}
-
-export type UseSessionChildrenFunction<Required extends boolean> = (
-  metadata: Required extends true
-    ? SessionMetadata
-    : SessionMetadata | undefined,
-) => ReactNode
-
-export type UseSessionChildren<
-  UserType extends SessionMetadata["user_type"] | undefined,
-> =
-  | ReactNode
-  | (UserType extends undefined
-      ? UseSessionChildrenFunction<false>
-      : UseSessionChildrenFunction<true>)
-
-export type UseSessionOptions<
-  UserType extends SessionMetadata["user_type"] | undefined,
-> = Partial<{
-  userType: UserType
-  next: boolean
-}>
-
-export function useSession<
-  UserType extends SessionMetadata["user_type"] | undefined = undefined,
->(
-  children: UseSessionChildren<UserType>,
-  options: UseSessionOptions<UserType> = {},
-) {
-  const { userType, next = true } = options
-
-  const { pathname } = useLocation()
-  const navigate = useNavigate()
-  const sessionMetadata = useSessionMetadata()
-
-  const loginRequired =
-    userType && (!sessionMetadata || sessionMetadata.user_type !== userType)
-
-  useEffect(() => {
-    if (loginRequired) {
-      navigate({
-        pathname:
-          "/login" +
-          {
-            teacher: "/teacher",
-            student: "/student",
-            indy: "/independent",
-          }[userType],
-        search: next
-          ? createSearchParams({ next: pathname }).toString()
-          : undefined,
-      })
-    }
-  }, [navigate, loginRequired, userType, next, pathname])
-
-  if (loginRequired) return <></>
-
-  if (typeof children === "function") {
-    return sessionMetadata
-      ? (children as UseSessionChildrenFunction<true>)(sessionMetadata)
-      : (children as UseSessionChildrenFunction<false>)(sessionMetadata)
-  }
-
-  return children
-}
-
-// -----------------------------------------------------------------------------
-// OAuth2
-// -----------------------------------------------------------------------------
-
-export function useOAuth2State(
-  provider: string,
-  length: number = 32,
-  storageKey: string = "state",
-): [string | undefined, () => void] {
-  const oAuth2StorageKey = makeOAuth2StorageKey(provider, storageKey)
-  const storageValue = sessionStorage.getItem(oAuth2StorageKey)
-
-  const [_state, _setState] = useState<string>()
-
-  useEffect(() => {
-    let state: string
-    if (storageValue && storageValue.length === length) {
-      state = storageValue
-    } else {
-      state = generateSecureRandomString(length)
-      sessionStorage.setItem(oAuth2StorageKey, state)
-    }
-
-    _setState(state)
-  }, [oAuth2StorageKey, storageValue, length])
-
-  const resetState = useCallback(() => {
-    sessionStorage.removeItem(oAuth2StorageKey)
-    _setState(undefined)
-  }, [oAuth2StorageKey])
-
-  return [_state, resetState]
-}
-
-export function useOAuth2CodeChallenge(
-  provider: string,
-  length: OAuth2CodeChallengeLengths = 128,
-  storageKey: string = "codeChallenge",
-): [OAuth2CodeChallenge | undefined, () => void] {
-  const oAuth2StorageKey = makeOAuth2StorageKey(provider, storageKey)
-  const storageValue = sessionStorage.getItem(oAuth2StorageKey)
-
-  const [_codeChallenge, _setCodeChallenge] = useState<OAuth2CodeChallenge>()
-
-  useEffect(() => {
-    let codeChallenge: OAuth2CodeChallenge | undefined
-    if (storageValue) {
-      const storageJsonValue: unknown = JSON.parse(storageValue)
-      if (
-        typeof storageJsonValue === "object" &&
-        storageJsonValue &&
-        "verifier" in storageJsonValue &&
-        typeof storageJsonValue.verifier == "string" &&
-        storageJsonValue.verifier.length === length &&
-        "challenge" in storageJsonValue &&
-        typeof storageJsonValue.challenge === "string" &&
-        "method" in storageJsonValue &&
-        storageJsonValue.method === "S256"
-      ) {
-        codeChallenge = {
-          verifier: storageJsonValue.verifier,
-          challenge: storageJsonValue.challenge,
-          method: storageJsonValue.method,
-        }
-      }
-    }
-
-    if (codeChallenge) _setCodeChallenge(codeChallenge)
-    else {
-      generateOAuth2CodeChallenge(length)
-        .then(codeChallenge => {
-          sessionStorage.setItem(
-            oAuth2StorageKey,
-            JSON.stringify(codeChallenge),
-          )
-
-          _setCodeChallenge(codeChallenge)
-        })
-        .catch(error => {
-          if (error) console.error(error)
-        })
-    }
-  }, [oAuth2StorageKey, storageValue, length])
-
-  const resetCodeChallenge = useCallback(() => {
-    sessionStorage.removeItem(oAuth2StorageKey)
-    _setCodeChallenge(undefined)
-  }, [oAuth2StorageKey])
-
-  return [_codeChallenge, resetCodeChallenge]
-}
-
-interface BaseUseOAuth2KwArgs<SessionMetadata> {
-  provider: string
-  authUri: string
-  clientId: string
-  redirectUri: string
-  scope: string
-  responseType?: "code"
-  accessType?: "offline"
-  prompt?: string
-  useLoginMutation: TypedUseMutation<
-    SessionMetadata,
-    ExchangeOAuth2CodeArg,
-    any
-  >
-  onCreateSession: (result: SessionMetadata) => void
-  onRetrieveSession: (metadata: SessionMetadata) => void
-}
-
-interface UseOAuth2KwArgs<SessionMetadata>
-  extends BaseUseOAuth2KwArgs<SessionMetadata> {
-  useSessionMetadata: () => SessionMetadata | undefined
-}
-
-export type OAuth2 = [string, OAuth2RequestCodeUrlSearchParams] | []
-
-// https://datatracker.ietf.org/doc/html/rfc7636
-function useOAuth2Internal<SessionMetadata>({
-  provider,
-  authUri,
-  clientId,
-  redirectUri,
-  scope,
-  responseType = "code",
-  accessType = "offline",
-  prompt,
-  useSessionMetadata,
-  useLoginMutation,
-  onCreateSession,
-  onRetrieveSession,
-}: UseOAuth2KwArgs<SessionMetadata>): OAuth2 {
-  const [state, resetState] = useOAuth2State(provider)
-  const [
-    {
-      verifier: codeVerifier,
-      challenge: codeChallenge,
-      method: codeChallengeMethod,
-    } = {},
-    resetCodeChallenge,
-  ] = useOAuth2CodeChallenge(provider)
-  const [
-    login,
-    {
-      originalArgs: loginArgs = {} as ExchangeOAuth2CodeArg,
-      isLoading: loginIsLoading,
-      isError: loginIsError,
-    },
-  ] = useLoginMutation()
-  const sessionMetadata = useSessionMetadata()
-  const navigate = useNavigate()
-  const searchParams =
-    useSearchParams({ code: yup.string(), state: yup.string() }) || {}
-  const location = useLocation<OAuth2ReceiveCodeUrlSearchParams>()
-
-  const locationState = location.state || {}
-
-  useEffect(() => {
-    // If the the auth provider has redirected back to our site with the
-    // expected search params, we redirect to the current page to remove them.
-    if (searchParams.code && searchParams.state) {
-      navigate<OAuth2ReceiveCodeUrlSearchParams>(".", {
-        // Removes the URL containing the search params from the history stack.
-        replace: true,
-        // Ensure we don't break the auth flow by navigating to another page.
-        next: false,
-        // Store the search params in the page's state instead.
-        state: { code: searchParams.code, state: searchParams.state },
-      })
-    }
-  }, [searchParams.code, searchParams.state, navigate])
-
-  useEffect(() => {
-    // If we're already logged in, no need to log in again.
-    if (sessionMetadata) onRetrieveSession(sessionMetadata)
-    else if (
-      // If the state and code verifier have been generated...
-      state &&
-      codeVerifier &&
-      // ...and the page's state contains a code...
-      locationState.code &&
-      // ...and the page's state contains the stored state...
-      locationState.state === state &&
-      // ...and the login endpoint was not called with the current values or has
-      // not returned an error...
-      (loginArgs.code !== locationState.code ||
-        loginArgs.code_verifier !== codeVerifier ||
-        loginArgs.redirect_uri !== redirectUri ||
-        !loginIsError) &&
-      // ...and the login endpoint is not currently being called...
-      !loginIsLoading
-    ) {
-      // ...call the login endpoint.
-      login({
-        code: locationState.code,
-        code_verifier: codeVerifier,
-        redirect_uri: redirectUri,
-      })
-        .unwrap()
-        .then(onCreateSession)
-        .catch(() => {
-          navigate(".", {
-            replace: true,
-            state: {
-              notifications: [
-                {
-                  props: {
-                    error: true,
-                    children: "Failed to login. Please try again.",
-                  },
-                },
-              ],
-            },
-          })
-        })
-        .finally(() => {
-          resetState()
-          resetCodeChallenge()
-        })
-    }
-  }, [
-    navigate,
-    redirectUri,
-    // State
-    state,
-    locationState.state,
-    resetState,
-    // Code
-    codeVerifier,
-    locationState.code,
-    resetCodeChallenge,
-    // Login
-    login,
-    loginIsLoading,
-    loginIsError,
-    loginArgs.code,
-    loginArgs.code_verifier,
-    loginArgs.redirect_uri,
-    // Session
-    sessionMetadata,
-    onCreateSession,
-    onRetrieveSession,
-  ])
-
-  if (state && codeChallenge && codeChallengeMethod) {
-    const urlSearchParams: OAuth2RequestCodeUrlSearchParams = {
-      client_id: clientId,
-      redirect_uri: redirectUri,
-      scope,
-      response_type: responseType,
-      access_type: accessType,
-      state,
-      code_challenge: codeChallenge,
-      code_challenge_method: codeChallengeMethod,
-    }
-
-    if (prompt) urlSearchParams["prompt"] = prompt
-
-    return [
-      authUri + "?" + new URLSearchParams(urlSearchParams).toString(),
-      urlSearchParams,
-    ]
-  }
-
-  return []
-}
-
-export const useOAuth2: {
-  <SessionMetadata>(kwargs: UseOAuth2KwArgs<SessionMetadata>): OAuth2
-  (kwargs: BaseUseOAuth2KwArgs<SessionMetadata>): OAuth2
-} = <_SessionMetadata,>(
-  kwargs:
-    | UseOAuth2KwArgs<_SessionMetadata>
-    | BaseUseOAuth2KwArgs<SessionMetadata>,
-): OAuth2 => {
-  return useOAuth2Internal(
-    // @ts-expect-error value is assignable
-    "useSessionMetadata" in kwargs ? kwargs : { ...kwargs, useSessionMetadata },
-  )
-}

package/src/hooks/form.tsx

@@ -1,11 +0,0 @@
-import { useRef } from "react"
-
-/**
- * Shorthand for a reference to a HTML input element since this is so common for
- * forms.
- *
- * @returns Ref object to a HTML input element.
- */
-export function useInputRef() {
-  return useRef<HTMLInputElement>(null)
-}

package/src/hooks/general.tsx

@@ -1,110 +0,0 @@
-import {
-  type DependencyList,
-  type Dispatch,
-  type SetStateAction,
-  useEffect,
-  useState,
-} from "react"
-
-export function useExternalScript<EventType extends keyof HTMLElementEventMap>({
-  props,
-  attrs,
-  eventTypes,
-}: {
-  props: Partial<HTMLScriptElement> & { src: string }
-  attrs?: Record<string, string>
-  eventTypes?: EventType[]
-}): EventType | undefined {
-  const [eventType, setEventType] = useState<EventType>()
-
-  useEffect(() => {
-    if (
-      document.querySelector<HTMLScriptElement>(`script[src="${props.src}"]`)
-    ) {
-      throw Error("already exists")
-    }
-
-    const script = document.createElement("script")
-
-    Object.entries(props).forEach(([key, value]) => {
-      // @ts-expect-error value is assignable
-      script[key] = value
-    })
-
-    if (attrs !== undefined) {
-      Object.entries(attrs).forEach(([key, value]) => {
-        script.setAttribute(key, value)
-      })
-    }
-
-    function eventListener(event: Event): void {
-      setEventType(event.type as EventType)
-    }
-
-    eventTypes?.forEach(eventType => {
-      script.addEventListener(eventType, eventListener)
-    })
-
-    document.head.appendChild(script)
-
-    return () => {
-      eventTypes?.forEach(eventType => {
-        script.removeEventListener(eventType, eventListener)
-      })
-
-      document.head.removeChild(script)
-    }
-  }, [eventTypes, attrs, props])
-
-  return eventType
-}
-
-export function useCountdown(
-  seconds: number,
-  interval: number = 1,
-): [number, Dispatch<SetStateAction<number>>] {
-  if (seconds <= 0) throw Error("seconds must be > 0")
-  if (interval <= 0) throw Error("interval must be > 0")
-
-  const [_seconds, _setSeconds] = useState(seconds)
-
-  useEffect(() => {
-    const countdown = setInterval(() => {
-      _setSeconds(seconds => {
-        seconds = seconds - interval
-        return seconds < 0 ? 0 : seconds
-      })
-    }, interval * 1000)
-
-    return () => {
-      clearInterval(countdown)
-    }
-  }, [interval])
-
-  return [_seconds, _setSeconds]
-}
-
-export function useEventListener<EventType extends keyof HTMLElementEventMap>(
-  element: HTMLElement,
-  type: EventType,
-  listener: (this: HTMLElement, ev: HTMLElementEventMap[EventType]) => any,
-  kwArgs: {
-    options?: boolean | AddEventListenerOptions
-    deps?: DependencyList
-  } = {},
-): void {
-  const { options, deps = [] } = kwArgs
-
-  useEffect(
-    () => {
-      element.addEventListener(type, listener, options)
-
-      return () => {
-        element.removeEventListener(type, listener, options)
-      }
-    },
-    // TODO: simplify this hook.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    deps,
-  )
-}

package/src/hooks/index.ts

@@ -1,5 +0,0 @@
-export * from "./api"
-export * from "./auth"
-export * from "./form"
-export * from "./general"
-export * from "./router"

package/src/hooks/router.tsx

@@ -1,168 +0,0 @@
-import {
-  type Location,
-  type Params,
-  type To,
-  type NavigateOptions as _NavigateOptions,
-  useLocation as _useLocation,
-  useNavigate as _useNavigate,
-  useParams as _useParams,
-  useSearchParams as _useSearchParams,
-} from "react-router-dom"
-import { type ObjectShape, object as objectSchema } from "yup"
-import { type ReactNode, useEffect } from "react"
-
-import {
-  type ObjectSchemaFromShape,
-  type TryValidateSyncOnErrorRT,
-  type TryValidateSyncOptions,
-  type TryValidateSyncRT,
-  tryValidateSync,
-} from "../utils/schema"
-import { type PageState } from "../components/page"
-import { type ReadOnly } from "../utils/router"
-
-export type NavigateOptions<
-  State extends Record<string, any> = Record<string, any>,
-> = Omit<_NavigateOptions, "state"> & {
-  state?: State & Partial<PageState>
-  next?: boolean
-}
-
-export type Navigate = {
-  <State extends Record<string, any> = Record<string, any>>(
-    to: To,
-    options?: NavigateOptions<State>,
-  ): void
-  (delta: number): void
-}
-
-export function useNavigate(): Navigate {
-  const navigate = _useNavigate()
-  const searchParams = useSearchParams()
-
-  return (
-    toOrDelta: To | number,
-    options: (NavigateOptions & { next?: boolean }) | undefined = undefined,
-  ) => {
-    if (typeof toOrDelta === "number") navigate(toOrDelta)
-    else {
-      const { next = true, ..._options } = options || {}
-
-      navigate(
-        next && "next" in searchParams ? searchParams.next : toOrDelta,
-        _options,
-      )
-    }
-  }
-}
-
-export function useLocation<State = {}>() {
-  return _useLocation() as Location<null | Partial<PageState & State>>
-}
-
-// -----------------------------------------------------------------------------
-// Use Search Params
-// -----------------------------------------------------------------------------
-
-export function useSearchParams(): { [k: string]: string }
-
-export function useSearchParams<
-  OnErrorRT extends TryValidateSyncOnErrorRT<ObjectSchemaFromShape<Shape>>,
-  Shape extends ObjectShape = {},
->(
-  shape: Shape,
-  validateOptions?: TryValidateSyncOptions<
-    ObjectSchemaFromShape<Shape>,
-    OnErrorRT
-  >,
-): TryValidateSyncRT<ObjectSchemaFromShape<Shape>, OnErrorRT>
-
-export function useSearchParams<
-  OnErrorRT extends TryValidateSyncOnErrorRT<ObjectSchemaFromShape<Shape>>,
-  Shape extends ObjectShape = {},
->(
-  shape?: Shape,
-  validateOptions?: TryValidateSyncOptions<
-    ObjectSchemaFromShape<Shape>,
-    OnErrorRT
-  >,
-) {
-  const searchParams = Object.fromEntries(_useSearchParams()[0].entries())
-  if (!shape) return searchParams
-
-  return tryValidateSync(searchParams, objectSchema(shape), validateOptions)
-}
-
-// -----------------------------------------------------------------------------
-// Use Params
-// -----------------------------------------------------------------------------
-
-export function useParams(): ReadOnly<Params<string>>
-
-export function useParams<
-  OnErrorRT extends TryValidateSyncOnErrorRT<ObjectSchemaFromShape<Shape>>,
-  Shape extends ObjectShape = {},
->(
-  shape: Shape,
-  validateOptions?: TryValidateSyncOptions<
-    ObjectSchemaFromShape<Shape>,
-    OnErrorRT
-  >,
-): TryValidateSyncRT<ObjectSchemaFromShape<Shape>, OnErrorRT>
-
-export function useParams<
-  OnErrorRT extends TryValidateSyncOnErrorRT<ObjectSchemaFromShape<Shape>>,
-  Shape extends ObjectShape = {},
->(
-  shape?: Shape,
-  validateOptions?: TryValidateSyncOptions<
-    ObjectSchemaFromShape<Shape>,
-    OnErrorRT
-  >,
-) {
-  const params = _useParams()
-  if (!shape) return params
-
-  return tryValidateSync(params, objectSchema(shape), validateOptions)
-}
-
-export function useParamsRequired<
-  OnErrorRT extends TryValidateSyncOnErrorRT<ObjectSchemaFromShape<Shape>>,
-  Shape extends ObjectShape = {},
->({
-  shape,
-  children,
-  onValidationError,
-  onValidationSuccess = () => {},
-  validateOptions,
-}: {
-  shape: Shape
-  children: (
-    data: NonNullable<
-      TryValidateSyncRT<ObjectSchemaFromShape<Shape>, OnErrorRT>
-    >,
-  ) => ReactNode
-  onValidationError: (navigate: Navigate) => void
-  onValidationSuccess?: (
-    params: NonNullable<
-      TryValidateSyncRT<ObjectSchemaFromShape<Shape>, OnErrorRT>
-    >,
-  ) => void
-  validateOptions?: TryValidateSyncOptions<
-    ObjectSchemaFromShape<Shape>,
-    OnErrorRT
-  >
-}) {
-  const params = useParams(shape, validateOptions)
-  const navigate = useNavigate()
-
-  useEffect(
-    () => {
-      if (params) onValidationSuccess(params)
-      else onValidationError(navigate)
-    },
-    [], // eslint-disable-line react-hooks/exhaustive-deps
-  )
-
-  return params ? children(params) : <></>
-}