Best practices to use actions/mutations for auth?

[bodokaiser]

Hey together :),

has anyone used the new action/mutation feature for authentication?

If yes, could you share some details on how you structured the routes and actions?

Thank you and all the best,
Bodo

[bodokaiser]

My proposal would be to have a userLoader as data loader for the root route which performs the async action to check if a user is authenticated, i.e.,

export async function userLoader() {
  const user = await Auth.currentAuthenticatedUser()

  return { id: user.getUsername(), ...user.attributes }
}

A UserProvider, would make the user available via react context for all child elements, e.g.,

export function useUser() {
  return useContext(UserContext)
}

export function UserProvider({ children }: { children: ReactNode }) {
  const user = useLoaderData() as User | null

  return <UserContext.Provider value={user}>{children}</UserContext.Provider>
}

The sign-in route could be something like

{
  path: 'sign-in',
  action: async ({ request }: ActionFunctionArgs) => {
    const formData = await request.formData()

    const email = formData.get('email') as string
    const password = formData.get('password') as string

    return await Auth.signIn(email, password)
  }, 
  element: (
    <RequireNoUser>
      <Form action="post">
        <input type="email" name="email" />
        <input type="password" name="password" />
        <button type="submit">Sign-in</button>
      </Form>
    </RequireNoUser>
  ),
}

wherein RequireNoUser uses the useUser hook to redirect to / if the user has already signed-in.

What do you guys think? What could one improve (I am new to the data loader and action API)?