diff --git a/README.md b/README.md index 0ee327a..07346f3 100644 --- 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 index 62272cd..ab23607 100644 --- 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 index ab1b642..45c621e 100644 --- a/src/authenticator.ts +++ b/src/authenticator.ts @@ -97,11 +97,11 @@ export class Authenticator { * 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 { * 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,7 +146,7 @@ export class Authenticator { * 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" @@ -154,7 +154,7 @@ export class Authenticator { * 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 { /** * 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" }); * } */