Problem with Supabase Magic Links in Next.js 14

[sambowenhughes]

Bug report

• [ X ] I confirm this is a bug with Supabase, not with my own application.
• [ X ] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

There seems to be an issue with magic links in Supabase when using Next.js 14. Magic links arent being picked up.

Description:

I have an auth callback handler as shown below:

import { NextResponse } from "next/server";
import { createClient } from "@/utils/supabase/server";

export async function GET(request: Request) {
  const requestUrl = new URL(request.url);
  const queryParams = requestUrl.searchParams;

  function parseHashParams(hash: string) {
    const hashParams = new URLSearchParams(hash.substring(1));
    return {
      accessToken: hashParams.get("access_token"),
      refreshToken: hashParams.get("refresh_token"),
      expiresAt: hashParams.get("expires_at"),
      expiresIn: hashParams.get("expires_in"),
      type: hashParams.get("type"),
    };
  }

  const {
    accessToken: hashAccessToken,
    refreshToken: hashRefreshToken,
    expiresAt: hashExpiresAt,
    expiresIn: hashExpiresIn,
    type: hashType,
  } = parseHashParams(requestUrl.hash);

  const code = queryParams.get("code");
  const accessToken = queryParams.get("access_token") || hashAccessToken;
  const refreshToken = queryParams.get("refresh_token") || hashRefreshToken;
  const expiresAt = queryParams.get("expires_at") || hashExpiresAt;
  const type = queryParams.get("type") || hashType;

  const supabase = createClient();

  if (code) {
    const { error } = await supabase.auth.exchangeCodeForSession(code);
    if (error) {
      console.error("Code exchange error:", error.message);
      return NextResponse.redirect(
        `${requestUrl.origin}/login?error=Failed to authenticate with code`
      );
    }
    return NextResponse.redirect(requestUrl.origin);
  }

  if (type === "magiclink" && accessToken && refreshToken && expiresAt) {
    const { error } = await supabase.auth.setSession({
      access_token: accessToken,
      refresh_token: refreshToken,
    });

    if (error) {
      console.error("Magic link authentication error:", error.message);
      return NextResponse.redirect(
        `${requestUrl.origin}/login?error=Failed to authenticate with magic link`
      );
    }

    return NextResponse.redirect(requestUrl.origin);
  }

  return NextResponse.redirect(
    `${requestUrl.origin}/login?error=Invalid or missing credentials`
  );
}

Steps to Reproduce:

1. Trigger the send magic link request via the Supabase portal.
2. Set the configuration redirect link to /auth/callback.
3. The magic link is not working as expected

Expected Behavior:

The magic link should authenticate successfully and redirect the user to the application's home page authenticated

Actual Behavior:

• The magic link authentication is not being implemented correctly.
• The handler callback handler is not picking up the magic link flow
• Users are redirected to the login page with an error.

[simonha9]

Hi! Could you provide some more information about what you mean by magiclinks 'not being picked up'? Are they not being generated properly? Do you have an example of a magiclink? Or is it failing on setting the session?

[aaa3334]

Hi!

Are you using the link or the code?
The link is buggy and I don't use it at all.

1. It has to be opened from the same browser you requested it from
2. It can only be opened once
3. Many email clients will do a scan to preload the link to check for viruses which destroys the links.

There are ways to send it so the email client will not read it, but it is not foolproof and you still have the 'same browser as requested' issue.

I only use codes (but also have a small issue there now too, but it is still useable)