React Hook integration for AWS Amplify Auth

context.ts

import React from "react"
import { CognitoUser } from "@aws-amplify/auth"

import { useAuth } from "./hooks"
import { SignInInput } from "./types"

interface AuthState {
  user: CognitoUser | null
  signIn(input : SignInInput): Promise<void>
  signOut(): Promise<void>
  deleteUser(): Promise<void>
}

export const AuthContext = React.createContext<AuthState>({
  user: null,
  signIn: async (input) => {},
  signOut: async () => {},
  deleteUser: async () => {},
})

interface AuthProps {
  children: React.ReactNode
}

export const AuthProvider = ({ children } : AuthProps) => {
  const auth = useAuth()

  return (
    <AuthContext.Provider value={auth}>
      {children}
    </AuthContext.Provider>
  )
}

hooks.ts

import React from "react"
import Auth, { CognitoUser } from "@aws-amplify/auth"

import {
  SignInInput,
  SignUpInput,
  ConfirmSignUpInput,
  ResendSignUpInput,
  ForgotPasswordInput,
  ResetPasswordInput,
} from "./types"
import { AuthContext } from "./context"

export function useAuth() {
  const [user, setUser] = React.useState<CognitoUser | null>(null)

  React.useEffect(() => {
    let active = true

    const check = async () => {
      try {
        const user = await Auth.currentAuthenticatedUser()
        if (active) setUser(user)
      } catch (error) {
        if (active) setUser(null)
      }
    }

    check()

    return () => { active = false }
  }, [setUser])

  const signIn = React.useCallback(async ({ email, password } : SignInInput) => {
    setUser(await Auth.signIn(email, password))
  }, [setUser])

  const signOut = React.useCallback(async () => {
    await Auth.signOut()
    setUser(null)
  }, [setUser])

  const deleteUser = React.useCallback(async () => {
    user?.deleteUser((error?: Error) => {
      if (error) throw error

      setUser(null)
    })
  }, [user, setUser])

  return { user, signIn, signOut, deleteUser }
}

export function useUser() {
  const { user } = React.useContext(AuthContext)
  if (!user) return null

  // See https://github.com/aws-amplify/amplify-js/issues/4927
  // @ts-ignore
  return user.attributes
}

export function useSignIn() {
  return React.useContext(AuthContext).signIn
}

export function useSignOut() {
  return React.useContext(AuthContext).signOut
}

export function useSignUp() {
  return async function signUp({ name, email, password } : SignUpInput) {
    await Auth.signUp({ username: email, password, attributes: { name, email }, })
  }
}

export function useConfirmSignUp() {
  return async function confirmSignUp({ email, code } : ConfirmSignUpInput) {
    await Auth.confirmSignUp(email, code)
  }
}

export function useResendSignUp() {
  return async function resendSignUp({ email } : ResendSignUpInput) {
    await Auth.resendSignUp(email)
  }
}

export function useForgotPassword() {
  return async function forgotPassword({ email } : ForgotPasswordInput) {
    await Auth.forgotPassword(email)
  }
}

export function useResetPassword() {
  return async function resetPassword({ email, code, password } : ResetPasswordInput) {
    await Auth.forgotPasswordSubmit(email, code, password)
  }
}

export function useDeleteUser() {
  return React.useContext(AuthContext).deleteUser
}

You didn't add the types :-)

export type SignInInput = {
  email: string;
  password: string;
};
export type SignUpInput = {
  name: string;
  email: string;
  password: string;
};
export type ConfirmSignUpInput = {
  email: string;
  code: string;
};
export type ResendSignUpInput = {
  email: string;
};
export type ForgotPasswordInput = {
  email: string;
};
export type ResetPasswordInput = {
  email: string;
  code: string;
  password: string;
};

Shouldn't context.ts be of file type .tsx?

Shouldn't context.ts be of file type .tsx?

yes

I suggest replacing import { CognitoUser } from "@aws-amplify/auth" with import { CognitoUserInterface } from '@aws-amplify/ui-components'; since the congito user attribute types don't exist on the former.