Use ActionArgs/LoaderArgs instead of ActionFunction/`LoaderFunc…

…tion` (#196) * chore: use `ActionArgs`/`LoaderArgs` instead of `ActionFunction`/`LoaderFunction` * Update authenticator.ts * Update authenticator.md * Apply suggestions from code review Co-authored-by: Sergio Xalambrí <[email protected]>
sergiodxa · Sep 26, 2022 · c36ea94 · c36ea94
1 parent 2226ebe
commit c36ea94
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -99,8 +99,9 @@ First, create a `/login` page. Here we will render a form to get the email and p
 
 ```tsx
 // app/routes/login.tsx
-import { Form } from "@remix-run/react"
-import { ActionFunction, LoaderFunction, redirect } from "@remix-run/node"
+import type { ActionArgs, LoaderArgs } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
+import { Form } from "@remix-run/react";
 import { authenticator } from "~/services/auth.server";
 
 // First we create our UI with the form doing a POST and the inputs with the
@@ -122,7 +123,7 @@ export default function Screen() {
 
 // Second, we need to export an action function, here we will use the
 // `authenticator.authenticate method`
-export let action: ActionFunction = async ({ request }) => {
+export async function action({ request }: ActionArgs) {
   // we call the method with the name of the strategy we want to use and the
   // request object, optionally we pass an object with the URLs we want the user
   // to be redirected to after a success or a failure
@@ -135,7 +136,7 @@ export let action: ActionFunction = async ({ request }) => {
 // Finally, we can export a loader function where we check if the user is
 // authenticated with `authenticator.isAuthenticated` and redirect to the
 // dashboard if it is or return null if it's not
-export let loader: LoaderFunction = async ({ request }) => {
+export async function loader({ request }: LoaderArgs) {
   // If the user is already authenticated redirect to /dashboard directly
   return await authenticator.isAuthenticated(request, {
     successRedirect: "/dashboard",
@@ -169,7 +170,7 @@ if (user) {
 Once the user is ready to leave the application, we can call the `logout` method inside an action.
 
 ```ts
-export let action: ActionFunction = async ({ request }) => {
+export async function action({ request }: ActionArgs) {
   await authenticator.logout(request, { redirectTo: "/login" });
 };
 ```
@@ -185,7 +186,7 @@ If we do not pass the `successRedirect` option to the `authenticator.authenticat
 Note that we will need to store the user data in the session this way. To ensure we use the correct session key, the authenticator has a `sessionKey` property.
 
 ```ts
-export let action: ActionFunction = async ({ request }) => {
+export async function action({ request }: ActionArgs) {
   let user = await authenticator.authenticate("user-pass", request, {
     failureRedirect: "/login",
   });
@@ -234,7 +235,7 @@ Furthermore, we can read the error using that key after a failed authentication.
 
 ```ts
 // in the loader of the login route
-export let loader: LoaderFunction = async ({ request }) => {
+export async function loader({ request }: LoaderArgs) {
   await authenticator.isAuthenticated(request, {
     successRedirect: "/dashboard",
   });
@@ -267,7 +268,7 @@ Alternatively, we can do it on the action itself.
 ```ts
 import { AuthorizationError } from "remix-auth";
 
-export let action: ActionFunction = async ({ request }) => {
+export async function action({ request }: ActionArgs) {
   try {
     return await authenticator.authenticate("user-pass", request, {
       successRedirect: "/dashboard",

diff --git a/docs/authenticator.md b/docs/authenticator.md
@@ -71,12 +71,13 @@ authenticator.use(
 This will depend a lot on what strategy you are using since each one may have different requirements. Continuing our example of the `LocalStrategy`, we need to create a `/login` route and call our authenticator there.
 
 ```tsx
-import { ActionFunction, LoaderFunction, redirect, json } from "@remix-run/node";
+import type { ActionArgs, LoaderArgs } from "@remix-run/node";
+import { json, redirect } from "@remix-run/node";
 import { Form } from "@remix-run/react";
 import { authenticator } from "~/auth.server"; // import our authenticator
 import { getSession, commitSession } from "~/session.server";
 
-export let action: ActionFunction = async ({ request }) => {
+export async function action({ request }: ActionArgs) {
   // Authenticate the request and redirect to /dashboard if user is
   // authenticated or to /login if it's not
   authenticator.authenticate("local", request, {
@@ -85,7 +86,7 @@ export let action: ActionFunction = async ({ request }) => {
   });
 };
 
-export let loader: LoaderFunction = async ({ request }) => {
+export async function loader({ request }: LoaderArgs) {
   // Check if the user is already logged-in (this checks the key user in the session)
   let user = await authenticator.isAuthenticated(request);
   // If the user is logged-in, redirect to the dashboard directly

diff --git a/src/authenticator.ts b/src/authenticator.ts
@@ -97,11 +97,11 @@ export class Authenticator<User = unknown> {
    * Call this to authenticate a request using some strategy. You pass the name
    * of the strategy you want to use and the request to authenticate.
    * @example
-   * let action: ActionFunction = async ({ request }) => {
+   * async function action({ request }: ActionArgs) {
    *   let user = await authenticator.authenticate("some", request);
    * };
    * @example
-   * let action: ActionFunction = ({ request }) => {
+   * async function action({ request }: ActionArgs) {
    *   return authenticator.authenticate("some", request, {
    *     successRedirect: "/private",
    *     failureRedirect: "/login",
@@ -137,7 +137,7 @@ export class Authenticator<User = unknown> {
    * with the user object or null, you can use this to check if the user is
    * logged-in or not without triggering the whole authentication flow.
    * @example
-   * let loader: LoaderFunction = async ({ request }) => {
+   * async function loader({ request }: LoaderArgs) {
    *   // if the user is not authenticated, redirect to login
    *   let user = await authenticator.isAuthenticated(request, {
    *     failureRedirect: "/login",
@@ -146,15 +146,15 @@ export class Authenticator<User = unknown> {
    *   return json(privateData);
    * }
    * @example
-   * let loader: LoaderFunction = async ({ request }) => {
+   * async function loader({ request }: LoaderArgs) {
    *   // if the user is authenticated, redirect to /dashboard
    *   await authenticator.isAuthenticated(request, {
    *     successRedirect: "/dashboard"
    *   });
    *   return json(publicData);
    * }
    * @example
-   * let loader: LoaderFunction = async ({ request }) => {
+   * async function loader({ request }: LoaderArgs) {
    *   // manually handle what happens if the user is or not authenticated
    *   let user = await authenticator.isAuthenticated(request);
    *   if (!user) return json(publicData);
@@ -203,7 +203,7 @@ export class Authenticator<User = unknown> {
   /**
    * Destroy the user session throw a redirect to another URL.
    * @example
-   * let action: ActionFunction = async ({ request }) => {
+   * async function action({ request }: ActionArgs) {
    *   await authenticator.logout(request, { redirectTo: "/login" });
    * }
    */