Features > Magic Link

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

Setup

1. Supabase takes care of handling Magic Links for you automatically.

2. You can begin authenticating your users directly on the frontend using code similar to the sample provided below:

/app/components/SignInButton.vue

    <script>
      const handleOtpSignup = async (options: {
          type: string;
          provider?: Provider;
      }) => {
        isLoading.value = 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 mail box!");
        } catch (error) {
          console.log(error);
        } finally {
          isLoading.value = false;
        }
    };
  </script>

3. When you need to verify the authentication status of your users on the backend, you can accomplish it with code similar to the example below:

/app/api/example.ts

import { serverSupabaseUser } from '#supabase/server';

export default defineEventHandler(async (event) => {
    try {
        const user = await serverSupabaseUser(event)

        // User who are not logged in can't make a purchase
        if (!user) {
            throw createError({ statusCode: 401, statusMessage: "You must be logged in to make a purchase." });
        }

        // you can do what you need to do with the authenticated user
    } catch (error) {
        console.error(error);
        throw error;
    }
});