Looking for tips / guide on changing magic sign in landing page (MagicSignInLive)

Wondering if anyone has figured out exactly how to replace the Ash Authentication magic link landing page (the one a user gets after clicking their magic link email)?

I found this cryptic note in the Magic Link tutorial:

You probably don’t want to serve this page to users in production. You can work around this by placing your own page at the same path before it in the router, or changing the email link to a different URL.

Unfortunately the “see also” link is pretty useless (no docs there, really), and the MagicSignInLive page and overrides guide don’t really address this specific question.

After perusing the source, it looks like the intention is for me to:

  1. Write my own AshAuthentication.Phoenix.MagicSignInLive (which seems pretty straightforward),
  2. And then reuse AshAuthentication.Phoenix.Components.MagicLink.SignIn (or make something like it) to generate the required interaction button on said page (unless… this is for the sign-in button on the login page… err…,
  3. And somehow inject it into the target landing URL (not clear on how to do that, e.g., “placing your own page at the same path before it in the router, or changing the email link,” but not clear how to do that).

Would be great if someone has done this and could post a little detail so I don’t end up going down the wrong path. :rofl:

Ultimately, what I’m after is wrapping the page in my root layout (header, menu, etc.) and put a bit of “Welcome back!” style text on the page.

Ideally… Seems ideal if we had a component that would just render the button, and could add that to any page of our own design. Hm. Well, maybe that’s essentially what I could extract from MagicSignInLive if I can figure it out…

Hi there!

I know this thread is a few months old, but I just stumbled upon it while solving the exact same issue. I wanted to customize the landing page to integrate it into my app layout, show a “Welcome back, [Name]” message, and handle both login and registration on that same page.

I figured out how to override the route and build a custom LiveView that handles the token verification and form submission manually.

I wrote a blog post detailing the steps (including the router override and the LiveView code): Ash Authentication - Customize Magic Link (Part 1) - Coding.Individuals

Ideally, this helps anyone else looking for a concrete example of how to implement a custom magic link sign-in.

2 Likes