Features > Magic Link

Name: NextStarterAI
Price: 169.00 USD
Rating: 4.8 (314 reviews)

Setup

1. Supabase manages Magic Links on your behalf automatically.

2. You can directly start authenticating your users on frontend side just like the code sample below:

/app/components/SignInButton.ts

    const handleOtpSignup = async (options: {
        type: string;
        provider?: Provider;
    }) => {
      setIsLoading(true);
  
      try {
        const { type, provider } = options;
        const redirectURL = window.location.origin + "/api/auth/callback";

        await supabase.auth.signInWithOtp({
        email,
        options: {
            emailRedirectTo: redirectURL,
        },
        });
        toast.success("Check your emails!");
      } catch (error) {
        console.log(error);
      } finally {
        setIsLoading(false);
      }
  };

3. When you need to check the authentication status of your users on backend, you can do it like the code below:

/app/api/example/route.ts

    import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
    import { NextResponse } from "next/server";
    import { cookies } from "next/headers";

    export const dynamic = "force-dynamic";

    export async function POST(req) {
    const supabase = createRouteHandlerClient({ cookies });
    const { data } = await supabase.auth.getSession();
    const { session } = data;

        // Check authentication by the object returned by Supabase
        if (session) {
            const body = await req.json();
                // you can do what you need to do with the authenticated user
        } else {
            // Unauthenticated
            NextResponse.json({ error: "Not signed in" }, { status: 401 });
        }
    }