Louis – 12-43 Jun 29

Does this seem like a sensible approach to managing authentication state? I'm using Cognito via Amplify and have an authentication context that provides the user to the rest of the application. I need to perform side effects in the authentication context and on the page, so I'm exposing a React Query mutation from the context provider that facilitates this... * CODE IN THREAD * Thanks πŸ™‚
L
Louisβ€’658d ago
export const AuthenticationContextProvider = ({
children,
}: AuthenticationContextProviderProps) => {
const [user, setUser] = useState<CustomCognitoUser>();

const { isLoading: isGettingAuthenticatedUser } = useQuery<CustomCognitoUser>(
"getAuthenticatedUser",
() => authenticationService.getAuthenticatedUser(),
{
onSuccess: (user) => {
setUser(user);
},
},
);

const signInMutation = useMutation<
CustomCognitoUser,
Error,
AuthenticationCredentials
>(
({ emailAddress, password }: AuthenticationCredentials) =>
authenticationService.signIn({
emailAddress,
password,
}),
{
onSuccess: (user) => {
setUser(user);
},
},
);

// ...
export const AuthenticationContextProvider = ({
children,
}: AuthenticationContextProviderProps) => {
const [user, setUser] = useState<CustomCognitoUser>();

const { isLoading: isGettingAuthenticatedUser } = useQuery<CustomCognitoUser>(
"getAuthenticatedUser",
() => authenticationService.getAuthenticatedUser(),
{
onSuccess: (user) => {
setUser(user);
},
},
);

const signInMutation = useMutation<
CustomCognitoUser,
Error,
AuthenticationCredentials
>(
({ emailAddress, password }: AuthenticationCredentials) =>
authenticationService.signIn({
emailAddress,
password,
}),
{
onSuccess: (user) => {
setUser(user);
},
},
);

// ...
export const SignInPage = () => {
const navigate = useNavigate();

const { signInMutation } = useAuthenticationContext();

const {
mutate: signIn,
isLoading: isSigningIn,
error: signInError,
} = signInMutation;

const handleSignInFormSubmit = ({
emailAddress,
password,
}: AuthenticationCredentials) => {
signIn(
{ emailAddress, password },
{
onSuccess: () => {
navigate(pagePaths.home);
},
onError: (error) => {
const isUserNotConfirmedException =
error.name === "UserNotConfirmedException";

if (isUserNotConfirmedException) {
toast.success(
`A verification code has been sent to ${emailAddress}.`,
);

navigate(
`${pagePaths.verifyEmailAddress}/?emailAddress=${emailAddress}`,
);
}
},
},
);
};

// ...
export const SignInPage = () => {
const navigate = useNavigate();

const { signInMutation } = useAuthenticationContext();

const {
mutate: signIn,
isLoading: isSigningIn,
error: signInError,
} = signInMutation;

const handleSignInFormSubmit = ({
emailAddress,
password,
}: AuthenticationCredentials) => {
signIn(
{ emailAddress, password },
{
onSuccess: () => {
navigate(pagePaths.home);
},
onError: (error) => {
const isUserNotConfirmedException =
error.name === "UserNotConfirmedException";

if (isUserNotConfirmedException) {
toast.success(
`A verification code has been sent to ${emailAddress}.`,
);

navigate(
`${pagePaths.verifyEmailAddress}/?emailAddress=${emailAddress}`,
);
}
},
},
);
};

// ...
UU
Unknown Userβ€’657d ago