AuthenticationContext.tsx

import React, {createContext, useCallback, useContext, useMemo, useState} from "react";
import { Auth } from "aws-amplify";

export enum AuthenticationStatus {
    UNAUTHENTICATED,
    SIGNING_IN,
    WAITING_OTP,
    CONFIRMING_OTP,
    APPROVED_OTP,
    AUTHENTICATED,
    SIGNING_OUT,
    SIGNING_UP
}

interface IAuthenticationPayload {
    username: string,
    password: string
}

type MethodSignIn = (username: string, password: string) => Promise<void>;
type MethodSignOut = () => Promise<void>;
type MethodSignUp = (username: string, password: string) => Promise<void>;
type MethodSetUsername = (username: string) => void;
type MethodSetPassword = (password: string) => void;

interface IAuthenticationState {
    authenticationPayload: IAuthenticationPayload,
    status: AuthenticationStatus,
    signIn: MethodSignIn,
    signOut: MethodSignOut,
    signUp: MethodSignUp,
    setUsername: MethodSetUsername,
    setPassword: MethodSetPassword,
    error: string | null
}

export const AuthenticationContext = createContext<IAuthenticationState | null>(null);

function useAuthenticationContext(): IAuthenticationState {
    const [status, setStatus] = useState<AuthenticationStatus>(AuthenticationStatus.UNAUTHENTICATED);
    const [error, setError] = useState<string | null>(null);
    const [authenticationPayload, setAuthenticationPayload] = useState<IAuthenticationPayload>({username: "", password: ""});
    const signIn = useCallback(async (username: string, password: string) => {
        // todo
    }, [setStatus]);

    const signUp = useCallback(async (username: string, password: string) => {
        // todo
    }, [setStatus]);

    const signOut = useCallback(async() => {
        // todo
    }, []);

    const setUsername = useCallback((username: string) => {
        setAuthenticationPayload({
            ...authenticationPayload,
            username
        });
    }, [setAuthenticationPayload, authenticationPayload]);

    const setPassword = useCallback((password: string) => {
        setAuthenticationPayload({
            ...authenticationPayload,
            password
        });
    }, [setAuthenticationPayload, authenticationPayload])

    return useMemo(() => (
        {
            authenticationPayload,
            status,
            signIn,
            signOut,
            signUp,
            setUsername,
            setPassword,
            error
        }
    ),
        [
            authenticationPayload,
            status,
            signIn,
            signOut,
            signUp,
            setUsername,
            setPassword,
            error
        ]);
}

export const AuthenticationContextProvider: React.FC<any> = ({children}) => {
    const authenticationContext = useAuthenticationContext();
    return (
        <AuthenticationContext.Provider value={authenticationContext}>
            {children}
        </AuthenticationContext.Provider>
    )
}

export const useSafeAuthenticationContext = () => {
    const authenticationContext = useContext(AuthenticationContext);
    if (!authenticationContext) {
        throw Error("This component must be wrap by AuthenticationContextProvider");
    }
    return authenticationContext;
}