Tutorials > User Authentication

Ready to get your users on board with Nuxt Starter AI? We've got two built-in ways of user authentication: Magic Links & Google Oauth. You can use both of them at the same time or just use one of them. Take your pick and start!

🌟 Fantastic job completing one of our awesome tutorials! Now, it's time for a high-five! 🙌 To keep going, simply navigate smoothly to the sign-in/sign-up page, just like this:

/components/SignInButton.vue

<template>
  <NuxtLink className="btn btn-primary" to="/signin">
      Login
  </NuxtLink>
</template>

<script lang="ts" setup>

</script>
<style></style>

In sign in/up pages, the code below takes care of OTP and Google Login out of the box for you in seconds!

/pages/sign-in.vue

const handleSignup = async (options: {
    type: string;
    provider?: Provider;
}) => {
  isLoading.value = true;

  try {
    const { type, provider } = options;
    const redirectURL = window.location.origin + "/api/auth/callback";

    if (type === "oauth") {
      await supabase.auth.signInWithOAuth({
        provider,
        options: {
          redirectTo: redirectURL,
        },
      });
    } else if (type === "magic_link") {
      await supabase.auth.signInWithOtp({
        email,
        options: {
          emailRedirectTo: redirectURL,
        },
      });

      toast.success("Check your emails!");

      isDisabled.value = true;
    }
  } catch (error) {
    console.log(error);
  } finally {
    isLoading.value = false;
  }
};
    