Provides access to the email address after submitting form

README.md

@@ -134,8 +134,10 @@ export let loader: LoaderFunction = async ({ request }) => {
   // This session key `auth:magiclink` is the default one used by the EmailLinkStrategy
   // you can customize it passing a `sessionMagicLinkKey` when creating an
   // instance.
-  if (session.has('auth:magiclink')) return json({ magicLinkSent: true })
-  return json({ magicLinkSent: false })
+  return json({
+    magicLinkSent: session.has('auth:magiclink'),
+    magicLinkEmail: session.get('auth:email'),
+  })
 }
 
 export let action: ActionFunction = async ({ request }) => {
@@ -152,15 +154,26 @@ export let action: ActionFunction = async ({ request }) => {
 
 // app/routes/login.tsx
 export default function Login() {
-  let { magicLinkSent } = useLoaderData<{ magicLinkSent: boolean }>()
+  let { magicLinkSent, magicLinkEmail } =
+    useLoaderData<{ magicLinkSent: boolean; magicLinkEmail?: string }>()
+
   return (
     <Form action="/login" method="post">
-      <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>
+      {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>
   )
 }
@@ -331,5 +344,12 @@ type EmailLinkStrategyOptions<User> = {
    * @default false
    */
   validateSessionMagicLink?: boolean
+
+  /**
+   * The key on the session to store the email.
+   * It's unset the same time the sessionMagicLinkKey is.
+   * @default "auth:email"
+   */
+  sessionEmailKey?: string
 }
 ```

src/index.ts

@@ -105,6 +105,13 @@ export type EmailLinkStrategyOptions<User> = {
    * @default false
    */
   validateSessionMagicLink?: boolean
+
+  /**
+   * The key on the session to store the email.
+   * It's unset the same time the sessionMagicLinkKey is.
+   * @default "auth:email"
+   */
+  sessionEmailKey?: string
 }
 
 /**
@@ -152,6 +159,8 @@ export class EmailLinkStrategy<User> extends Strategy<
 
   private readonly validateSessionMagicLink: boolean
 
+  private readonly sessionEmailKey: string
+
   constructor(
     options: EmailLinkStrategyOptions<User>,
     verify: StrategyVerifyCallback<User, EmailLinkStrategyVerifyParams>
@@ -167,6 +176,7 @@ export class EmailLinkStrategy<User> extends Strategy<
     this.magicLinkSearchParam = options.magicLinkSearchParam ?? 'token'
     this.linkExpirationTime = options.linkExpirationTime ?? 1000 * 60 * 30 // 30 minutes
     this.validateSessionMagicLink = options.validateSessionMagicLink ?? false
+    this.sessionEmailKey = options.sessionEmailKey ?? 'auth:email'
   }
 
   public async authenticate(
@@ -213,6 +223,8 @@ export class EmailLinkStrategy<User> extends Strategy<
         const magicLink = await this.sendToken(emailAddress, domainUrl, form)
 
         session.set(this.sessionMagicLinkKey, await this.encrypt(magicLink))
+        session.set(this.sessionEmailKey, emailAddress)
+
         throw redirect(options.successRedirect, {
           headers: {
             'Set-Cookie': await sessionStorage.commitSession(session),
@@ -266,8 +278,10 @@ export class EmailLinkStrategy<User> extends Strategy<
       return user
     }
 
-    // remove the magic link from the session
+    // remove the magic link and email from the session
     session.unset(this.sessionMagicLinkKey)
+    session.unset(this.sessionEmailKey)
+
     session.set(options.sessionKey, user)
     const cookie = await sessionStorage.commitSession(session)
     throw redirect(options.successRedirect, {