AuthApiError: Email link is invalid or has expired

[ryuhangyeong]

# Email Template
<h2>Magic Link</h2>

<p>Follow this link to login:</p>
<p><a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=magiclink">Log In</a></p>

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

import type { EmailOtpType } from "@supabase/supabase-js";
import type { NextRequest } from "next/server";

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const token_hash = searchParams.get("token_hash");
  const type = searchParams.get("type") as EmailOtpType | null;
  const next = "/account";

  const redirectTo = request.nextUrl.clone();
  redirectTo.pathname = next;
  redirectTo.searchParams.delete("token_hash");
  redirectTo.searchParams.delete("type");

  if (token_hash && type) {
    const superBaseClient = createClient();

    const { error } = await superBaseClient.auth.verifyOtp({
      type,
      token_hash,
    });

    console.log(error);

    if (!error) {
      redirectTo.searchParams.delete("next");
      return NextResponse.redirect(redirectTo);
    }
  }

  redirectTo.pathname = "/error";
  return NextResponse.redirect(redirectTo);
}

The token is not recognized properly.

I don't know the cause.

Who can help?

[ryuhangyeong]

Self Answer

• type

magiclink -> email

[kolberszymon]

I have the same problem, what do you mean by this answer?

[ryuhangyeong]

@kolberszymon

Sorry for the late reply.

I don't know the exact reason, but

If the type is email, the flow is as follows.

If a specific email address has not yet registered, a membership registration email template will be sent.

If a specific email address is registered, it will be sent as a magic link template.

<p><a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">Log In</a></p>

Try with the example above.