useAuth: AWS Amplify Auth React Hooks = Easy Auth Management

// use-auth.jsimport React, {  useState, useEffect, useContext, createContext,} from 'react';import { Auth } from '@aws-amplify/auth';// Implement your particular AWS Amplify configurationconst amplifyConfigurationOptions = {  userPoolRegion: "REGION",  userPoolId: "POOL_ID",  userPoolWebClientId: "CLIENT_ID",};Auth.configure(amplifyConfigurationOptions);const AuthContext = createContext();// Wrap your app with <ProvideAuth />export function ProvideAuth({ children }) {  const auth = useProvideAuth();  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;}// Access auth values and functions with custom useAuth hookexport const useAuth = () => useContext(AuthContext);function useProvideAuth() {  const [user, setUser] = useState(null);  const [isSignedIn, setIsSignedIn] = useState(false);  useEffect(() => {    // NOTE: check for user or risk an infinite loop    if (!user) {      // On component mount      // If a session cookie exists      // Then use it to reset auth state      Auth.currentSession()        .then((session) => {          const {            idToken,            accessToken,          } = session;          // Define your user schema per your needs          const user = {            email: idToken.payload.email,            username: idToken.payload.preferred_username,            userId: idToken.payload.sub,            accessToken: accessToken.jwtToken,          };          setIsSignedIn(true);          setUser(user);        })        .catch((err) => {          // handle it        });    }  }, [user]);  const signIn = ({ email, password }) => Auth.signIn(email, password)    .then((cognitoUser) => {      // Set user data and access token to memory      const {        attributes,        signInUserSession: {          accessToken,        },      } = cognitoUser;      const user = {        email: attributes.email,        username: attributes.preferred_username,        userId: attributes.sub,        accessToken: accessToken.jwtToken,      };      setIsSignedIn(true);      setUser(user);      return user;    });  const signOut = () => Auth.signOut()    .then(() => {      setIsSignedIn(false);      setUser(null);    });  return {    user,    isSignedIn,    signIn,    signOut,  };}

// AppRoot.jsximport React from 'react';import App from './app'; // uses <MyComponent />import { ProvideAuth } from './use-auth';return (  <ProvideAuth>    <App />  </ProvideAuth>);// MyComponent.jsximport React from 'react';import { useAuth } from './use-auth';function MyComponent() {  const { isSignedIn, user, signIn, signOut } = useAuth();  return (    <div>      <div>{`IsSignedIn: ${isSignedIn}`}</div>      <div>{`Username: ${user?.username}`}</div>      {isSignedIn ? (        <button onClick={signOut} type="button">Sign Out</button>      ) : (        <button onClick={signIn} type="button">Sign In</button>      )}    </div>  )};

// Example Componentimport React from 'react';import { ProvideAuth, useAuth } from '../src/use-auth';function TestComponent() {  const {    user,    isSignedIn,    signIn,    signOut,  } = useAuth();  const handleSignIn = () => {    const mockCreds = {      email: '[email protected]',      password: 'pw',    }    signIn(mockCreds);  }  const handleSignOut = () => signOut()  return (    <div>      <div>{`IsSignedIn: ${isSignedIn}`}</div>      <div>{`Username: ${user?.username}`}</div>      <div>{`AccessToken: ${user?.accessToken}`}</div>      <button onClick={handleSignIn} type="button">SignInButton</button>      <button onClick={handleSignOut} type="button">SignOutButton</button>    </div>  );}function UseAuthExample() {  return (    <ProvideAuth>      <TestComponent />    </ProvideAuth>  );}export { UseAuthExample };

// use-auth.test.jsximport React from 'react';import {  render, screen, fireEvent, act,} from '@testing-library/react';import { Auth } from '@aws-amplify/auth';import { UseAuthExample } from './UseAuthExample';describe('useAuth', () => {  beforeEach(() => {    jest.clearAllMocks();  });  it('should provide default values on load when user is not authenticated', () => {    const currentSessionMock = jest.fn().mockRejectedValue('No user found.');    Auth.currentSession = currentSessionMock;    render(<UseAuthExample />);    const isSignedIn = screen.getByText(/issignedin/i);    const username = screen.getByText(/username/i);    const accessToken = screen.getByText(/accesstoken/i);    expect(isSignedIn).toHaveTextContent('IsSignedIn: false');    expect(username).toHaveTextContent('Username:');    expect(accessToken).toHaveTextContent('AccessToken:');  });  it('should provide current user on load when current session is found', async () => {    const currentSessionMock = jest.fn().mockResolvedValue({      idToken: {        payload: {          email: '[email protected]',          preferred_username: 'myuser',          sub: '1234-abcd',        },      },      accessToken: {        jwtToken: 'fake-token',      },    });    Auth.currentSession = currentSessionMock;    await act(async () => {      render(<UseAuthExample />);    });    const isSignedIn = screen.getByText(/issignedin/i);    const username = screen.getByText(/username/i);    const accessToken = screen.getByText(/accesstoken/i);    expect(isSignedIn).toHaveTextContent('IsSignedIn: true');    expect(username).toHaveTextContent('Username: myuser');    expect(accessToken).toHaveTextContent('AccessToken: fake-token');  });  it('should login the user and update ui', async () => {    const currentSessionMock = jest.fn().mockRejectedValue('No user found.');    const signInMock = jest.fn().mockResolvedValue({      attributes: {        email: '[email protected]',        preferred_username: 'myuser',        sub: '1234-abcd',      },      signInUserSession: {        accessToken: {          jwtToken: 'fake-token',        },      },    });    Auth.currentSession = currentSessionMock;    Auth.signIn = signInMock;    render(<UseAuthExample />);    const isSignedIn = screen.getByText(/issignedin/i);    const username = screen.getByText(/username/i);    const accessToken = screen.getByText(/accesstoken/i);    expect(isSignedIn).toHaveTextContent('IsSignedIn: false');    expect(username).toHaveTextContent('Username:');    expect(accessToken).toHaveTextContent('AccessToken:');    const signInButton = screen.getByText(/signinbutton/i);    await act(async () => {      fireEvent.click(signInButton);    });    expect(isSignedIn).toHaveTextContent('IsSignedIn: true');    expect(username).toHaveTextContent('Username: myuser');    expect(accessToken).toHaveTextContent('AccessToken: fake-token');  });});