Email Link Strategy

type SendEmailOptions<User> = {
  emailAddress: string;
  magicLink: string;
  user?: User | null;
  domainUrl: string;
  form: FormData;
};
 
type SendEmailFunction<User> = {
  (options: SendEmailOptions<User>): Promise<void>;
};

import { renderToString } from "react-dom/server";
import type { SendEmailFunction } from "remix-auth-email-link";
import type { User } from "~/models/user.model";
import * as emailProvider from "~/services/email-provider.server";
 
export let sendEmail: SendEmailFunction<User> = async (options) => {
  let subject = "Here's your Magic sign-in link";
  let body = renderToString(
    <p>
      Hi {options.user?.name || "there"},<br />
      <br />
      <a href={options.magicLink}>Click here to login on example.app</a>
    </p>
  );
 
  await emailProvider.sendEmail(options.emailAddress, subject, body);
};

import { Authenticator } from "remix-auth";
import { EmailLinkStrategy } from "remix-auth-email-link";
import { sessionStorage } from "~/services/session.server";
import { sendEmail } from "~/services/email.server";
import { User, getUserByEmail } from "~/models/user.server";
 
// This secret is used to encrypt the token sent in the magic link and the
// session used to validate someone else is not trying to sign-in as another
// user.
let secret = process.env.MAGIC_LINK_SECRET;
if (!secret) throw new Error("Missing MAGIC_LINK_SECRET env variable.");
 
export let auth = new Authenticator<User>(sessionStorage);
 
// Here we need the sendEmail, the secret and the URL where the user is sent
// after clicking on the magic link
auth.use(
  new EmailLinkStrategy(
    { sendEmail, secret, callbackURL: "/magic" },
    // In the verify callback,
    // you will receive the email address, form data and whether or not this is being called after clicking on magic link
    // and you should return the user instance
    async ({
      email,
      form,
      magicLinkVerify,
    }: {
      email: string;
      form: FormData;
      magicLinkVerify: boolean;
    }) => {
      let user = await getUserByEmail(email);
      return user;
    }
  )
);

import { ActionArgs, LoaderArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { Form, useLoaderData } from "@remix-run/react";
import { auth } from "~/services/auth.server";
import { sessionStorage } from "~/services/session.server";
 
export let loader = async ({ request }: LoaderArgs) => {
  await auth.isAuthenticated(request, { successRedirect: "/me" });
  let session = await sessionStorage.getSession(request.headers.get("Cookie"));
  // This session key `auth:magiclink` is the default one used by the EmailLinkStrategy
  // you can customize it passing a `sessionMagicLinkKey` when creating an
  // instance.
  return json({
    magicLinkSent: session.has("auth:magiclink"),
    magicLinkEmail: session.get("auth:email"),
  });
};
 
export let action = async ({ request }: ActionArgs) => {
  // The success redirect is required in this action, this is where the user is
  // going to be redirected after the magic link is sent, note that here the
  // user is not yet authenticated, so you can't send it to a private page.
  await auth.authenticate("email-link", request, {
    successRedirect: "/login",
    // If this is not set, any error will be throw and the ErrorBoundary will be
    // rendered.
    failureRedirect: "/login",
  });
};
 
// app/routes/login.tsx
export default function Login() {
  let { magicLinkSent, magicLinkEmail } = useLoaderData<typeof loader>();
 
  return (
    <Form action="/login" method="post">
      {magicLinkSent ? (
        <p>
          Successfully sent magic link{" "}
          {magicLinkEmail ? `to ${magicLinkEmail}` : ""}
        </p>
      ) : (
        <>
          <h1>Log in to your account.</h1>
          <div>
            <label htmlFor="email">Email address</label>
            <input id="email" type="email" name="email" required />
          </div>
          <button>Email a login link</button>
        </>
      )}
    </Form>
  );
}

import { LoaderArgs } from "@remix-run/node";
import { auth } from "~/services/auth.server";
 
export let loader = async ({ request }: LoaderArgs) => {
  await auth.authenticate("email-link", request, {
    // If the user was authenticated, we redirect them to their profile page
    // This redirect is optional, if not defined the user will be returned by
    // the `authenticate` function and you can render something on this page
    // manually redirect the user.
    successRedirect: "/me",
    // If something failed we take them back to the login page
    // This redirect is optional, if not defined any error will be throw and
    // the ErrorBoundary will be rendered.
    failureRedirect: "/login",
  });
};

import { LoaderArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { auth } from "~/services/auth.server";
 
export let loader = async ({ request }: LoaderArgs) => {
  // If the user is here, it's already authenticated, if not redirect them to
  // the login page.
  let user = await auth.isAuthenticated(request, { failureRedirect: "/login" });
  return json({ user });
};
 
export default function Me() {
  let { user } = useLoaderData<typeof loader>();
  return (
    <div>
      <h1>Welcome {user.name}</h1>
      <p>You are logged in as {user.email}</p>
    </div>
  );
}